es6 --- variable deconstruction

Variable deconstruction

 

1. What is deconstruction? 

es6 allowed according to a certain pattern, the array and object to extract values, variable assignment , which is referred to deconstructed (destructuring)

 

2. deconstruction array assignment

grammar:

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

 

Sequence: values ​​from the array, in a corresponding position, the value of the variable, which belongs to the wording "pattern matching", equal on both sides as long as the same pattern, the variable on the left will be given a value corresponding to

• If the deconstruction of the value of failure, the variable is equal to undefined
• Incomplete deconstruction: the left side of the equal sign pattern matches only part of the right side of the array, deconstruction is still successful
• If the right hand side is not an array: will complain
• Deconstruction allows the assignment Default: Only deconstruction failure is strict, etc. (===) undefined, the default values ​​to take effect
• If the default value is an expression, then this expression is lazy evaluation, that can only be executed when used
• The default value can refer to deconstruct other variable assignment, but the variables referenced must have been defined

 

3. Object deconstruction assignment

grammar:

        let { a, b } = { a: 'aaa', b: 'bbb' };
        console.log(a, b); // aaa bbb

 

Order: Object variable values ​​deconstruction is not the order of the variables must attribute of the same name, in order to deconstruct success

Variable and attribute different names:

        let { a: c } = { a: 'aaa', b: 'bbb' };
        console.log(c); //aaa

Mechanism: the first find of the same name Properties, and then assigned to the variable corresponding to the real assignment was the latter, rather than the former

Variables with the same name: error

• es6 provisions of the let command and const variables defined in the definition can not be repeated, deconstruction assignment is the same
• If you do not let a second command will not report duplicate definition error, but the compiler will be left braces understood as a code block, the code block can not be assigned
• Solution : put the entire expression in parentheses, downgraded to an expression that would not be considered to be a block of code

        // EG: attributes and variables of the same name, the solution: 
        the let A; 
        ({A} = {A:}. 3); // use parentheses, an expression downgrade 
        the console.log (A); // . 3

 

Nesting: The object of deconstruction can also be nested, both sides must be the same premise model

        let obj = {
            first: [
                'hello',
                { firstChild: 'world' }
            ]
        };
        let { first: [x, { firstChild: y }] } = obj;
        console.log(x, y); //hello world

 

Deconstruction of the object is actually a simplified version of the model below

        // A is a schematic and c, b and d are variables 
        the let {A: B, c: d = {A}: 'AAA', c: 'CCC' }; 
        the console.log (B, d); // AAA ccc

 

4. string destructuring assignment

When deconstructing string, the string is converted to an array of class

grammar:

        let [a, b, c, d] = 'hello';
        console.log(a, b, c, d); // h e l l

 

There is a class property called array length string conversions, can be assigned to this attribute deconstruction

        let { length: len } = 'hello';
        console.log(len); //5

 

5. destructuring assignment numerical and Boolean values

• Using object deconstruction program
• If the right hand side is a number or Boolean, the left is the object, or Boolean value will first be converted to an object, in deconstruction
• The principle of deconstruction: deconstruction of the error will be just to the right of the array is not an array or string, the object of deconstruction, not an object on the first turn to the right target, and then deconstructed
• Because null and undefined not be converted to an object, so they will be on the deconstruction of error

        @ Values with Boolean deconstruction of 
        the let {toString: TS = 123} ; 
        the console.log (TS); 
        // two steps 
        // 1. The value of an object into 
        console.dir ( new new Number The (2123 ));
         // 2. the object deconstructing the object, if the value of the object model does not correspond to the pattern on the left, back to the prototype object to find 
        the console.log (TS === Number.prototype.toString); // to true

 

6. deconstruction assignment function

grammar:

        function fun([x, y]) {
            console.log(x + y);
        }
        fun([1, 2]);//3

 

• Fun function parameter is an array, the incoming call is an array fun, in the incoming instant real parameter participating were deconstruction, the two variables x and y are assigned values
• Destructor can use the default values
• Function argument is an object, by deconstructing the object, give values ​​of x, y, and fails to use the default values ​​if the deconstructing

 

7. The use of deconstruction

1) the value of the variable exchange

        let x = 1;
        let y = 2;
        [x, y] = [y, x];
        console.log(x, y); // 2 1

 

2) the value returned from a plurality of functions: the function can only return one value, multiple values ​​can only want to return a return value returned into an array or an object, with deconstruction method can easily remove these values

3) transfer function parameters

4) Data Extraction json: deconstruction particularly useful extraction json

5) Function Default parameters: es6 function allows parameters to their default values