The new ES6 feature extracts values from ARR&obj. According to the corresponding position. Assigning values to variables is called deconstructing assignment (undoing structures and reassigning values) and is cleaner and cleaner than ES5 code

Array deconstruction (Array deconstruction one by one matches ES5)

    var a = 1,
        b = 2,
        c = 3,
        d = 4.Let [a,b,c,d] = [1,2,3,4]
Copy the code
Complex matches the left and right sides of the equals sign have to be consistent and if they’re not, deconstruction will fail.
  let [a,b,d] = [1[2.3] and {id:1}];    
        const arr = [3.4.5.6]
        let [a,b,c,d] = arr    
        console.log(a);     //3, 4, 5, 6, etc. If the deconstruction fails, the variable value is undefined
Copy the code
Destruction-time assignment alias is the default value allowed when destruction-time assignment. Default value If the spare tire has a value
    let [x=1,y] = [10.20]             // If there is no default value, it takes effect
    / / x =? Y =?
    let [x=1,y] = [];                 //x=1,y=undefined 
    let [x,y='y'] = ['x'.0]           //x='x' y=0
    let [x,y='y'] = ['x'.null]        //x='x' y=null
    let [x,y='y'] = ['x'.undefined];  //x y // undefined(equivalent to nothing
                                              / /! Null is equivalent to having a value, but the value is null so y is null instead of the default value
    function f(){  / / development
        return 123
    }
    let [x,y=f()] = ['x'.undefined]     //x='x',y=123
    let [x,y=f()] = ['x'.0]             //x='x',y=0
Copy the code

Object to deconstruct

Object deconstruction differs from arrays in one important way. Right? Of the array. Elements are arranged in order, and the value of a variable is determined by its position, the value of an object. Attributes have no order, and variables must have the same name as attributes to get the correct value.

// (the order in which the object is deconstructed is irrelevant)
    var obj = {
    id:1.name:'abc'.sex:'male'
    };
    var id = obj.id;
    var name = obj.name;
    var sex = obj.sex;     // if obj has 100+ keys and values
    let (name,id) = obj    // The assigned variable must have the same name as the property in obj
Copy the code
Use of parentheses?
 // If you define variables before you deconstruct them, then you will have problems deconstructing them. The following is the error code, compilation will report an error
    let foo;
    {foo} ={foo:'Buy Tencent and Alibaba'};
    console.log(foo);      / / an error
    // Use parentheses to resolve errors
    let foo;
    ({foo} = {foo:"Buy Alibaba and Tencent"})
    console.log(foo)       // Output: Acquisition of Alibaba and Tencent
Copy the code
Es3 & ES5 extract the properties of the object
const obj = {name:'the old once'.age: 12}
        var personName = obj.name
        var parsonAge = onj.age 
        console.log(personName+personAge)  / / old had 12
        //es6
        const {name:personName,age:personAge} =obj             / / old had 12
        // Alias the object :name
// complex obj {,, {}}
        let obj = { name:'the old once'.age:12.family: {father:'老李'.mather:'old yuan'}}
        let {name,age,family:{father,mather}} = obj
        console.log(name)    / / the old once
        console.log(age)     / / 12
        console.log(fatehr)  / / li
        console.log(mather)  / / old yuen
Copy the code

String deconstruction

 // The string can also be destructed because the string is converted to an array-like object.
        const [a,b,c,d,e,f]="Changdd";
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e);
        console.log(f);
Copy the code
         // Implements a hybrid assignment called deconstructed assignment
         // This is an array && object (a structured value)
         // The syntax for one or more variables on the left is the same as the syntax for direct quantities of array objects on the right
         / / the demo case
         let [x,y] = [1.2]    //== let x=1,y=2;
         [x,y] = [y,x]        // Swap the values of two variables
Copy the code

The array on the right of the structuring assignment does not have to correspond one-to-one with the variables on the left. The extra variables on the left are assigned as UND25, while the extra values on the right will be ignored. The list of variables on the left can contain consecutive commas to serve as placeholders for the corresponding values on the right.

 / / the demo case
        let [a,b] = [1]       //x=1, y=undefined
        [a,b] = [1.2.3]       //a=1 b=2 
        [,a,b] = [1.2.3]      //a=2 b=3 
Copy the code
Multilayer deconstruction
 let obj = {
            data: {
                data: {
                    cites: [1.2.3]}}}// Use data to accept
        let {data:{data}} = obj
        // Then data is
        {
            cites: [1.2.3]}// Alias write alias
        let {data: {data : res }} = obj
        // Then res is
        {
            cites: [1.2.3]}Copy the code