Shulou(Shulou.com)06/01 Report--

The purpose of this article is to share with you about the use of JavaScript object deconstruction. I think it is very practical, so I share it with you. I hope you can get something after reading this article.

Preface

The release of ES6 (ES2015) provides JavaScript with a more convenient and quick way to deal with the properties of objects. This mechanism is called Destructuring (also known as deconstruction assignment). But can you really use it? Do you really know the use of deconstructing assignments in various scenarios?

Get a value from an object using deconstruction

The most basic use of object deconstruction is to retrieve the value of the property key from the object.

For example, we define an object that has two properties: name and age

Const User = {name: 'Pinellia ternata at the front end', age: 18}

Traditionally, we will use dot (.) The notation or subscript ([]) notation retrieves the value from the object. The following code snippet shows an example of retrieving values from an object using dot symbols to retrieve values id and name. Employee

Before we wanted to get the value of a property in an object, we used. Or [].

Const name = User ['name']; const age = User.age

Of course, these two ways are fine in the current situation, but when there are more properties of User, we have to keep copying and pasting, resulting in a lot of repetitive code.

With the structure assignment, we can get the value quickly. For example, we use the key name of the object to create a variable and assign the value of the object to the same key. In this way, no matter how many attributes there are, we only need to assign the attribute name, which also reduces a lot of repetitive code.

Const {name, age} = User; uses deconstruction to get values from nested objects

In the above example, User is just a simple single-tier object, and we also encounter nested objects in our daily development, so using structural assignment, how do we retrieve values in nested objects? Let's redefine the User object and add a contact property to the object, which contains the phone of the User.

Const User = {name: 'Pinellia ternata at the front end', age:'18 years, contact: {phone:'110',}}

If we use it. It takes two times to go back to the value of phone at that time.

Const phone = User.contact.phone

If deconstruction assignment is used, it is written as follows:

Const {contact: {phone}} = Userconsosle.log (phone) / / output 10.

No matter how many layers of nesting, as long as you follow this way, you will get a specific value.

Use object deconstruction to define a new variable and default value

Of course, we may encounter a lot of extreme situations in the process of daily development.

For example, some fields may be missing from the object passed from the backend.

Const User = {name: 'Pinellia ternata at the front end',}

Or the property does not have a specific value:

Const User = {name: 'Pinellia ternata in front-end', age:''}

When we use deconstructing assignments: age variables are created regardless of whether the age attribute exists or not.

Const {name, age} = employee

When User.age is not specifically worth saying, we can use the

Const {name, age=18} = employee

Give age a default value.

New variable

Hold on, hold on. There are more magic shows in the deconstruction part! How do I create a brand new variable and assign a value that is calculated using the object property value? Sounds complicated? This is an example.

What should we do when we want to output the combined value of the User attribute?

Const {name,age,detail = `${name} this year ${age}`} = User; console.log (detail); / / output: the front-end Pinellia ternata uses JavaScript object deconstructing aliases in 18 this year.

In JavaScript object deconstruction, you can name the deconstruction variable alias. It is convenient to reduce the chances of variable name conflicts.

Const User = {name: 'Pinellia ternata in front-end', age:''}

Suppose we want to use deconstruction assignment to get the value of the age attribute, but we already have the variable age in the code, so we need to define aliases at the time of the structure.

Const {age: userAge} = User;console.log (userAge); / / Front-end Pinellia ternata

If you use age, you will get an error.

Console.log (age)

. *

Using object deconstruction to handle dynamic name attributes

We often treat API response data as JavaScript objects. These objects may contain dynamic data, so as clients, we may not even know the property key name in advance.

Const User = {name: 'Pinellia ternata in front-end', age:''}

When we pass the key as an argument, we can write a function that returns the property value of the User object. Here we use [] to accept parameters, and js will retrieve it from the object based on this key pair!

Function getPropertyValue (key) {const {[key]: returnValue} = User; return returnValue;} const contact = getPropertyValue ('contact'); const name = getPropertyValue (' name'); console.log (contact, name); / / Pinellia ternata in the front end deconstructs the object to deconstruct the assignment parameter in the function parameter and return value

Use object deconstruction to pass property values as parameters to the function.

Const User = {name: 'Pinellia ternata at the front end', age: 18}

Name now let's create a simple function that uses the and property values to create a message dept to log in to the browser console.

Function consoleLogUser ({name, age}) {console.log (`${name} this year ${age}`);}

Pass values directly as function arguments and use them internally.

ConsoleLogUser (User); / / the front-end Pinellia ternata returned a value of 18 deconstructor objects this year.

There is another use for object deconstructors. If the function returns an object, you can deconstruct the value directly into a variable. Let's create a function that returns the object.

Function getUser () {return {'name':' in front-end Pinellia ternata, 'age': 18}} const {age} = getUser (); console.log (age); / / 18 deconstruct objects in the loop

The last (but not least) use we will discuss is circular deconstruction. Let's consider a group of employees. We want to traverse the array and want to use the property values of each employee object.

Const User= [{'name':' sharing Pinellia ternata', 'age': 16}, {' name': 'front-end Pinellia ternata', 'age': 18}, {' name': 'tapping code Pinellia ternata', 'age': 20}]

You can use for-of loops to iterate through User objects, and then use object deconstruction assignment syntax to retrieve details.

For (let {name, age} of employees) {console.log (`${name} this year ${age} years old!`);}

What is the role of JavaScript? 1, can embed dynamic text in HTML pages. 2. Respond to browser events. 3. Read and write HTML elements. 4. Verify the data before it is submitted to the server. 5. Detect the browser information of visitors. 6. Control cookies, including creation and modification, etc. 7. Server-side programming based on Node.js technology.

This is what the use of JavaScript object deconstruction is, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.