ES6 (variable's deconstruction assignment)

The previous assignment to a variable is a direct assignment of var a = 10, and now ES6 provides a way to assign values, that is, to deconstruct the assignment, by reading the value from the array and the object in a certain pattern, and then assigning a value to the variable . The destructor assignments for variables include: arrays, objects, strings, values, Boolean values, function parameters.

Deconstruction Assignment of "1" array

var  [A, B, c] = [1, 2, 3];

in ES6, you can assign values directly to variables, which are called pattern matching, and can be assigned as long as the patterns on both sides are equal. For example:

Let  [a,[b,c]] = [1,[2,3]];    //   A = 1  //b =  2    //c = 3Let [,, c] = [n/a];    //   C = 3 Let  [A,, c]  = [n/a];  // a  = 1  c  =  3let  [a,... b] = [n/a];  // a = 1   ... b =  [2,3]let [b  ,... C] = [1];  // A = 1  b = undefined   ... c = []

The last assignment above, the value of B is undefined, which is the result of unsuccessful deconstruction.

If the right side of the equal sign is not an array, an error will be added, such as:

let [a] = 1false=null== {};

The error is because the value on the right is converted to an object and does not have a iterator interface (the first five examples), and there is no iterator interface in itself (the last example). This shows that as long as a data structure has a iterator interface, you can use the array form to do the deconstruction assignment.

The deconstruction assignment allows you to specify a default value, but it is important to note that the default value only takes effect if the variable is strictly equal to undefined . Like what:

var  [x = 1] = [undefined];  // x =1 var  [x = 1] = [null];  // x = null

if the default value is an expression, the expression is executed only if the variable does not take a value.

The default value can also refer to other variables that deconstruct the assignment, but only if the referenced variable must already be declared, or it will get an error , such as:

Let  //  x =1  y =1let  //  x = 2 y = 2let  //  x = 1 y = 2 Let  //referenceerror

Deconstruction Assignment of "2" Object

There is an important difference between an object's deconstruction and an array. That is, the elements of the array are arranged in order, the value of the variable is determined by its position, and the object's properties do not need to be ordered in order, but it is important to note that the variable must have the same name as the property, so that the correct value can be taken . Like what:

var //   foo = "AAA"   bar = "BBB"var//  baz = undefined

If the variable name is not the same as the property name, but you want to fetch the value, you can write:

var {Foo:baz} = {foo: ' aaa ', bar: ' BBB '};  // baz = "AAA"   //foo  Error:foo is not defined

In this example, we can know that the real assignment is the variable Baz, not the pattern Foo, that is, the object's deconstruction assignment of the internal mechanism, is to find the same name attribute, and then assign to the corresponding variable. However, it is important to note that when using this notation, the Declaration and assignment of variables is one, and for let and const, variables cannot be re-declared, so once the assigned variable has been declared before, it will be an error. For example:

// syntaxerror:duplicate Declaration "foo"

However, this error does not occur if the variable is var declared, because the variable declared by Var allows for a duplicate declaration and can be successfully deconstructed after removing the second let, for example:

//   Success

But be sure to add (), this is necessary, because the parser interprets the opening brace as a block of code, not an assignment statement. Therefore, the use of an already declared variable for the deconstruction assignment needs to be added ().

Deconstruction can also be used for nested structures of objects. Like what:

var node = {    loc: {      start: {         1,         5      }}    }; var {loc: {start: ' {line}}}' =//  1//  error:loc is undefined//< /c16> Error:start is undefined

Only line is a variable, so it can be assigned, and LOC and start are patterns, so they are not assigned to a value.

The object's deconstruction can also specify default values, as well as arrays, where the default value takes effect only if the property value of the object is strictly equal to undefined.

The deconstruction assignment of "3" string

When a string is used to deconstruct an assignment, the string is converted to an array-like object that has a length property and can be deconstructed to assign a value. Like what:

// a = "h"  B = "E"  c = "L"  d = "L"  e = "O"let {length:len} = ' Hello ';  // len = 5

"4" value and the deconstruction assignment of Boolean value

When the assignment value and the Boolean value are deconstructed, the object is converted first. So from here we know that the rule to deconstruct an assignment is to turn it into an object, as long as the value to the right of the equal sign is not an object. Note that undefined and null cannot be converted to objects, so they cannot be deconstructed and assigned, or they will get an error, for example:

// TypeError NULL // TypeError

The deconstruction assignment of "5" function parameters

The parameters of the function can be not only deconstructed, but also using the default values. and undefined will trigger the default value of the function parameter.

function Move ({x = 0, y = 0} = {}) {      return3, Y:8});  // [3, 8]move ({x:3});        // [3, 0]move ({});            // [0, 0]move ();              // [0, 0]

If you specify a default value for the parameter of the function move, instead of specifying a default value for the variable x and y, you will get a different result, such as:

function Move ({x, y} = {x:0, y:0 }) {return//  [3, 8]//
   
     [3, undefined]
    // 
     [Undefined, undefined]
    // 
     [0, 0]
   

parentheses Problem

In some cases where the assignment is deconstructed, we need to use parentheses, in which case the parentheses can be used and in which case the parentheses cannot be used.

You can use parentheses: [1]: The non-modal part of an assignment statement, you can use parentheses.

Parentheses cannot be used: [1]: A variable declaration statement cannot have parentheses.

[2]: In function parameters, the pattern cannot have parentheses.

[3]: In an assignment statement, the entire pattern, or a layer in the nested pattern, cannot be placed in parentheses.

What is the value of the destructor assignment for a variable?--[1]: The value of the Exchange variable;

[2]: Return multiple values from the function;

[3]: definition of function parameters;

[4]: extracting JSON data;

[5]: The default value of the function parameter;

[6]: traverse the MAP structure;

[7]: Enter the specified method of the module.

ES6 (variable's deconstruction assignment)