Destruct assignment of arrays

1. Basic usage

let [a,b,c] = ['1'.'2'.'3'];
//a 1
//b 2
//c 3
Copy the code

You can extract the value from the array, assign the value to the variable, and as long as the pattern on both sides of the equal sign is the same, the variable on the left will be assigned the corresponding value

let [foo, [[bar], baz]] = [1The [[2].3]];
foo / / 1
bar / / 2
baz / / 3

let [ , , third] = ["foo"."bar"."baz"];
third // "baz"

let [x, , y] = [1.2.3];
x / / 1
y / / 3

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

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

If the deconstruction fails, the value of the variable is equal to undefined

2. Incomplete deconstruction

The pattern to the left of the equals sign matches only part of the array to the right of the equals sign

let [x, y] = [1.2.3];
x / / 1
y / / 2

let [a, [b], d] = [1[2.3].4];
a / / 1
b / / 2
d / / 4
Copy the code

If the right-hand side of the equals sign is not traversable it will get an error

3. Set the default values

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

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a'.undefined]; // x='a', y='b'
Copy the code

The code above first sets foo to default to true, so it prints true, and the second part sets y to default to b, so it prints b

Object destructuring assignment

1. Basic usage

let { foo, bar } = { foo: 'aaa'.bar: 'bbb' };
foo // "aaa"
bar // "bbb"
Copy the code

Because the attributes of an object have no order, the variable must have the same name as the attribute in order to get the correct value

If the variable name does not match the attribute name

let { foo: baz } = { foo: 'aaa'.bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello'.last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
Copy the code

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. It is the latter, but not the former, that is actually assigned.

Destruct assignment of a string

The string is converted to an array-like object.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
Copy the code

Array-like objects have a length attribute, so you can also deconstruct and assign to this attribute

let {length : len} = 'hello';
len / / 5
Copy the code

Deconstructive assignment of values and Bores

When deconstructing an assignment, if the value and Boolean are to the right of the equals sign, the object is converted first

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
Copy the code

Conclusion: Both numeric and Booleans wrapper objects have toString attributes, so the variable S can take a value.

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. Undefined and NULL cannot be converted to objects, so destructuring assignments to them will result in an error.

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
Copy the code