The deconstruction and assignment of variables in ES6

Let's summarize today the structure of the variable that ES6 provides for us. This is useful for declaring variables and traversing arrays in our mass. This method provided by ES6 is also very simple and easy to understand. The assignment and analysis of an array

1. We assign value variables like this before

var b = 1;
var c = 2;
var d = 3;
var e = 4;

And now we can assign values like this:

let [a,b,c,d] = [1,2,3,4];
 Console.log (a,b,c,d)//1,2,3,4

2. Array assignment We can still do this.

let [a,b=2] = [1];

If we do this:

let [a,b=2] = [1,4];
Console.log (A,B)//1,4  

Key content This kind of matching method belongs to pattern matching in the ES6, that is, the function can be assigned on both sides of the structure. Second, the assignment and analysis of the object

1. There is an important difference between the assignment of objects and the parsing and arrays, and the array assignment is judged and assigned based on the position, and the object is assigned based on the comparison of variables and attributes, for example:

Let obj = {
    name: ' Jhone ', age
    : ' n ',
    sex: ' Man '
  } let

  obja = {Name,age,sex} = obj;
  Console.log (Obja.name)

The variable name,age,sex in the object and the attribute name,age,sex in object obj are compared to the assignment. Maybe you're a little confused, so let's look at the following example:

Let a= {name: "Jhon"} = {name:1}; 
Console.log (a)//error Invalid destructuring assignment target

The error above is an invalid deconstruction of the task target because the Jhon in {name: "Jhon"} is not a variable, but rather a string, that is, name itself is a fixed value and we can't assign it anymore.

2. In addition, we can also assign this value

Let a= {Name:jhon,age:ba} = {Name:1,jhon:3,}; 
 Console.log (a)//{Name:1,jhon:3}

This means that when the previous object is assigned, some properties are not in the following object, the result deletes the property, and if the following object contains attributes that are not contained in the previous object, the result adds the property.

3. If we use let to declare certain variables, like the following

let Jhon;
let {Name:jhon} = {name: "King"}

This is because the parser understands the braces as a block of code, not an assignment statement. The variable of let declaration cannot be changed (can only change the value of a variable)

We can do this:

    let Jhon;
    Let ({Name:jhon} = {name: "King"}); Add a curly brace

If a declared variable has a conflict, it is necessary to add a brace. Three. Array and object blending assignment

1. Nested objects inside the array

  let obj = [
    name,
      {age: '}
  ]

  var ary = [A,{b}] = obj;
  Console.log (ary)

2. Nested Arrays Inside objects

Let obj = {
      ar:[
        ' name ',
         ' age '
       ]
 }
 var ary = {Ar:[a,b]} = obj;
 Console.log (ary)

3. Nested objects Inside objects

Let obj = {
  name: ' Jhon ',
  age:{one:1,two:2}
}
var ary = {Name,age:{one,two}} = obj;
Console.log (ary)

Four. Deconstruct and assign values

1. String Deconstruction

let [a,b,c]= "123"
//A = 1
//b = 2
//c = 3

let {length:len} = ' Come ';  
Length = 5

2. Array Deconstruction

var ary = [1, 2, 3];  
var {0:one, 1:two} = ary;  
One//1  
two//2  

3. The function parameter's deconstruction assignment

  function Add ([x, Y]) {  
   alert (x + y);  
  }  

  Add ([5, 5]); Pop up 10