Array destruct assignment

Deconstruction refers to extracting values from arrays and objects according to a pattern

In the array deconstruction process, the pattern is [index: variable], where index is the array subscript, and variable refers to the corresponding value of index in the array. Index is the matching pattern. Variable is a variable, and index is omitted in the array deconstruction and assignment process

  1. Basic usage
let [a, b, c] = [1.2.3];
a / / 1
b / / 2
c / / 3

let [head, ...tail] = [1.2.3.4];
head / / 1
tail / / [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z / / []

// Destruct failed
let [foo] = [];        / / foo is undefined
let [bar, foo] = [1];  / / foo is undefined

// Not completely deconstructed
let [x, y] = [1.2.3];
x / / 1
y / / 2
Copy the code

Deconstruction unsuccessful: If the structure is unsuccessful, the value of the variable equals 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

  1. The default value

Default values are set for variables during destruction. default values are valid only when a position in the array is exactly equal to (===) undefined

let [foo = true] = [];
foo // true

let [x = 1] = [undefined];
x / / 1

Null === undefined => false
let [x = 1] = [null];
x // null
Copy the code

If the default value is an expression, the expression is lazily evaluated

function f() {
    console.log("aa");
}

let [x = f()] = [1]; // x can take a value, so f() is never executed

Copy the code

2. Object deconstruction assignment

Array elements are arranged in order, so the value of a variable is determined by position; The attributes of an object have no order, and variables must have the same name as the attributes to get the correct value

In essence, object deconstruction is in the form of {key: variable} = obj, that is, obtain the value of a key of obJ and assign it to variable. Variable is key by default

let { foo, bar } = {foo: "aaa".bar: "bbb"}
foo // "aaa"
bar // "bbb"

Copy the code

If the variable name is different from key, the specified variable name must be displayed

As with arrays, you can also specify default values for object deconstruction

The default is valid only if the object’s attribute value is strictly equal to undefined

Three, character blunt deconstruction assignment

When you deconstruct a string, the string is converted to an array-like object

4. Deconstruction of values and Boolean values

If the right side of the equal sign is a value or Boolean, it is converted to an object first

Both numeric and Boolean-wrapped objects have toString attributes, so the variable S can take on a value

Warning:

  • If the schema is a nested object and the parent property of the child object does not exist, an error will be reported

    The reason for this is that obj.foo is undefined, and if foo is undefined TTT is an error, the entire deconstruction is equivalent to obj.foo.ttt

-** When using an already declared variable to destruct an assignment, be very careful **

! [image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51be176d8ac046c895ae13e8a1a0928b~tplv-k3u1fbpfcp-watermark .image) JavaScript interprets {x} as a block of code, resulting in syntax errors; Place the entire statement in parentheses so that it executes correctly.Copy the code

  • The rule for deconstructing assignment is to turn the value to the right of the equals sign into an object whenever it is not an object or array. Because undefined and NULL cannot be converted to objects, they both report errors when destructively assigned