ES6 can extract values from arrays and objects, and then assign values to variables. Classification of deconstruction assignment: array deconstruction assignment, object deconstruction assignment, string deconstruction assignment, numerical deconstruction assignment, Boolean value deconstruction assignment, function parameter deconstruction assignment.

1. Deconstruction and assignment of array

1.1 basic usage

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

As shown above, as long as the patterns on both sides of the equal sign are the same, the variables on the left will be given the corresponding values on the right. You can also use nested arrays for structure.

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

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

1.2 unsuccessful deconstruction

If the structure is not successful, the value of the variable is undefined.

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

//In both cases, the value of foo is equal to undefined.
let [foo] = [];
let [bar, foo] = [1];

1.3 incomplete deconstruction

That is to say, the pattern on the left of the equal sign matches only a part of the array on the right of the equal sign, which can still be deconstructed successfully.

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

//Nesting condition
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
c // 4

1.4 default

Deconstruction assignment allows you to set the default value. When the array member is strictly equal to undefined, the default value will take effect.

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

2. Deconstruction and assignment of objects

Deconstruction also applies to objects.

let {foo, bar, barz} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"
barz // undefined

In fact, the object's deconstruction assignment is to find the attribute with the same name first, and then assign it to the corresponding variable. The former is the matching pattern, and the latter is the real variable.

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

let obj = { first: "hello", last: "world" };
let { first: f, last: g } = obj;
f // "hello"
g // "world"
first // first id not undefined

Deconstruction can also be used for nested objects

let obj = {
  p: [
    "hello",
    { y: "world" }
   ]
};

let { p, p: [x, { y }] } = obj;
x // "hello"
y // "world"
p //  ["hello", { y: "world" }]

The deconstruction of objects can also specify default values

let { x = 1 } = {};
x // 1

3. Deconstruction and assignment of strings

When a string is deconstructed, it is converted to an array like object.

const [a, b, c] = "red";
a // "r"
b // "e"
c // "d"

The length property of an array like object can also be deconstructed

let { length: len } = "hello";
len // 5

4 value and Boolean value deconstruction assignment

When deconstructing an assignment, if the right side of the equal sign is not an array or an object, it will be converted to an object first. If it is undefined or null, it cannot be converted to an object, and an error will be reported.

let { toString: s } = 123;
s === Nunmber.prototype.toString // true;

let { toString: s } = true;
s === Boolean.prototype.toString // true;

let { prop : x } = undefined; // Report errors
let { prop : y } = null; // Report errors

5. Deconstruction and assignment of function parameters

The parameters of the function can also be assigned using deconstruction and specify default values

function add([x, y]){
  return x + y;
}
add([1,2]); // 3

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