Destruct assignment of variables

1. Array deconstruction assignment

Basic usage

  • Extracting values from arrays and objects and assigning values to variables is called deconstruction

    • Extract values from an array and assign values to variables according to their positions.

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

  • “Pattern matching”, as long as the pattern (structure) on both sides of the equal sign is the same, the variable on the left will be assigned the corresponding value.

    • If the deconstruction fails, the value of the variable is undefined
    • Incomplete deconstruction, the pattern to the left of the equals sign, matches only part of the array to the right of the equals sign
    • An error will be reported if the right-hand side of the equals sign is not a traversable structure or does not have an Iterator interface after being converted to an object
    • Any data structure that has an Iterator interface can be assigned in the form of an array

The default value

  • Destruct assignment allows you to specify default values

    • The default is valid only if an array member is strictly equal to undefined

    • If an array member is null, its default value does not take effect

    • Default Value If it is an expression, the expression is lazy, that is, evaluated only when it is used

    • The default value can refer to another variable of the deconstructed assignment, but that variable must already be declared

      let [x = y, y = 1] = []; / / an error

2. Object deconstruction assignment

Deconstruction can be applied to objects as well as arrays.

  • The attributes of the object have no order, and variables must have the same name as the attributes to get the correct value

    let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

  • Deconstruction failed, variable value equal to undefined

  • The internal mechanism for deconstructing assignment of an object is to find the property of the same name and then assign it to the corresponding variable

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
Copy the code

  • Like arrays, deconstruction can also be used for nested structured objects

  • The destruct pattern is a nested object, and the parent property of the child object does not exist, then an error is reported.

    let {foo: {bar}} = {baz: 'baz'}; / / an error

  • The deconstructive assignment of an object can take inherited properties

The default value

  • The deconstruction of an object can also specify default values

    • This takes effect only if the value of an object’s attribute is strictly equal to undefined.
    • Null is not exactly the same as undefined, so the default value will not take effect.

Pay attention to the point

  • Place the entire destruct assignment statement in parentheses to prevent JavaScript from interpreting it as a code block.
  • Destruct assignment allows no variable names to be placed in the pattern to the left of the equals sign.
  • Arrays are special objects in nature, so they can be deconstructed into object properties.

3. Destruct assignment of strings

  • Strings can also be deconstructed and converted into an array-like object

    • All objects like arrays have onelengthProperty, so you can also destruct an assignment to this property 
      let {length : len} = 'hello';
len // 5
Copy the code

4. Deconstructive assignment of values and Bores

  • The values and booleans on the right hand side of the equals sign are converted to objects first

    • As long as the value to the right of the equals sign is not an object or array, it is first converted to an object.
    • Undefined and NULL cannot be converted to objects, so destructuring assignments to them will result in an error.

5. Destruct assignment of function parameters

  • Function arguments can also be destructively assigned

    • Function arguments can also be destructed using default values.
    • Undefined triggers the default values of function arguments.

6. The parenthesis problem

Parentheses should not be used where there could be ambiguity about deconstruction

  • It is recommended that parentheses not be placed in schemas whenever possible.

  • A case where parentheses cannot be used

    • Variable declaration statement
    • Function parameters
    • The mode of the assignment statement

  • A case where parentheses can be used

    • Parentheses can be used for the non-pattern part of an assignment statement.

7. Use

  • [x, y] = [y, x];

  • Returns multiple values from a function: returns an array or object for deconstruction

  • Definition of function arguments: matches a set of arguments to variable names

  • Extract JSON data: Extract data from a JSON object

  • Default values of function parameters: Specifies the default values of the parameters

  • Traversing the Map structure: for… The of Iterator Iterator Iterator Iterator Iterator Iterator Iterator Iterator Iterator

  • How to specify input modules: Specify input methods when importing modules

Mind mapping

“ES6 tutorial” variable deconstruction assignment

I hope it helps. If you think it’s good, just give it a thumbs up. This article can be involved in revision and improvement (mind map source file address) can leave a message to me. If there is infringement please contact delete!