destructuring assignment

Before learning the new ES6 feature destructuring assignment, let's take a look at why destructuring is used. In the past, if we needed to get the data in an object or an array and store them in an array, we needed to write a lot of code. as follows

const person = {
  name: 'little bear',
  age: 18, sex: '男' } let age = person.age let name = person.name let sex = person.sex

It can be seen that we only want to get the corresponding data from simple objects, and we need to write a lot of repetitive code. If we just want to get a certain data from a more complex data structure, then a lot of traversal operations may be required. to be able to complete.
Based on this, es6 introduced the feature of destructuring assignment for us. We can get data from objects or arrays more easily.

What is deconstruction

The destructuring assignment syntax is a Javascript expression, which makes it possible to extract data from an array or object into different variables (this passage is the definition of destructuring assignment in mdn, pay attention to the definition here, it can be seen that destructuring is mainly used in arrays and objects).
Still the above requirement, if we use the method of destructuring assignment, then the writing method is as follows

const person = {
  name: 'little bear',
  age: 18, sex: '男' } let { name,age,sex } = person

Compared with the grammar before es6, is it more concise to get the data in the object and store it in the variable?

Destructuring of triple arrays

In our daily development, we usually encounter the need to extract an item in the array and put it in a variable, so how to use destructuring assignment to achieve it?

let nbaStars=['yaoming','kobe','james','paul'] let [chinaStar,...usaStar] = nbaStars let [,,,myidol] = nbaStars console.log(usaStar,chinaStar,myidol) //output yaoming ['kobe','james','paul'] paul

There is also a usage, you can exchange the value of the variable, the above example, if I want to make Paul a Chinese star and Yao Ming to become my favorite star, I used to need to set a temporary variable, and then let them through the temporary variable Swap values, which can now be swapped directly via destructuring assignment

[chinaStar,myidol] = [myidol,chinaStar]
console.log(chinaStar,myidol)
// paul,yaoming

From the above example, we can basically see the use of destructuring arrays. Destructuring arrays can omit parameters and use remaining parameters. Destructuring assignment to swap two variables is a great way to extract data from an array.

Deconstruction of the Four Objects

Object destructuring is similar to array destructuring. Let's take an example to see how both object destructuring and function destructuring are used.

const rocketsTeam = {
    name:rockets,
    players:[
      {
         name:'james harden', age: 18, role: 'sg' }, { name:'yao ming', age: 12, role: 'c' } ], city:'houston' }

What if we want to find out Yao Ming's character and store it in a variable? Before es6, we needed to traverse the object array to achieve this requirement. Let's see if the destructuring assignment feature of es6 can help us?

let {players:[,{role:playerRole}]} = rocketsTeam
console.log(playerRole) 
//output C

Without needing to iterate through the array, we get what we want.

Five Summary

From the above examples, we can see that destructuring assignment is convenient for extracting values ​​from arrays and objects. When there is such a need in the future, the first thing that comes to mind is whether this function can solve it.