Deconstruction assignment of ECMAScript6 (ES6) (array, object, string)

es6 allows you to extract from arrays and objects and assign values to variables according to certain patterns, which is called deconstruction
1. Deconstruction and assignment of arrays
As long as the patterns on both sides of the equal sign are the same, the variables on the left will be given corresponding values

let [a,b,c]=[1,2,3];
console.log(a,b,c)//Output 123

let [,,third]=["food","bar","baz"];
console.log(third);//bar

let [head,...tail]=[1,2,3,4,5,6];
console.log(head);//1
console.log(tail);//[2,3,4,5,6]

//If the deconstruction is unsuccessful, the value of the variable is equal to undefined
let [x,y,...z]=['a'];
console.log(x,y,z);//a undefined []

let [foo]=[]
console.log(foo)//undefined

let [bar,foo1]=[1];
console.log(bar,foo1);//1 undefined

For a Set structure, you can also use the array's deconstruction assignment

let [x,y,z]=new Set(["a","b","c"]);
console.log(x,y,z);//a b c

Deconstruct default assignment allows default values to be specified

let [foo=true]=[]
console.log(foo);//true

es6 internally uses the strict equality operator (=====) to determine whether a position has a value. If an array member is not exactly equal to undefined, the default value will not take effect

let [x=1]=[undefined];
console.log(x);//1

let [y=1]=[null];
console.log(y);//undefined

let [z=1]=[];
console.log(z);//1

Other variables can be deconstructed, but they must already be declared

let [x=1,y=x]=[];
console.log(x,y);//1 1

let [z=h,h=1]=[];
console.log(z,h);//ReferenceError

Note: Deconstruction assignments apply not only to let commands, but also to var and const commands
2. Deconstruction and assignment of objects
There is an important difference between object deconstruction and array. The elements of an array are arranged in order, and the value of a variable is determined by its position. However, the attributes of an object do not have a secondary order, and the variable must have the same name as the attribute to get the correct value

let {foo,bar}={foo:"aaa",bar:"bbb"};
console.log(foo,bar)//aaa bbb

let {baz}={foo:"aaa",bar:"bbb"};
console.log(baz)//undefined

The internal mechanism of object's Deconstruction and assignment is to find the attribute with the same name first, and then assign it to the corresponding variable. What is really assigned is the latter, not the former.

let {foo:baz}={foo:"aaa",bar:"bbb"};
console.log(baz);//aaa
console.log(foo);//ReferenceError: foo is not defined

In the following code, the variables of the deconstructed assignment will be redeclared, so using let, the const command will report an error. Since the var command allows redeclaration, using the var command will not report an error

let foo;
let {foo}={foo:1};
console.log(foo)//Identifier 'foo' has already been declared

var baz;
var {baz}={baz:1};
console.log(baz);//1

The default value can also be specified for object deconstruction, but the condition that the default value takes effect is that the attribute value of the object is strictly equal to undefined;

let {x=3}={}
console.log(x)//3

let {z,y=5}={z:1};
console.log(z,y)//1,5

let {mes:msg="hahhhaa"}={};
console.log(msg)//hahhhaa

let {mx=4}={mx:undefined}
console.log(mx);//4

let {ms=4}={ms:null};
console.log(ms)//null

3. Deconstruction and assignment of strings
The string is converted to an array like object

const [a,b,c,d,e]='hello';
console.log(a,b,c,d,e)//h e l l o

Objects like arrays have the length attribute, so you can also deconstruct and assign values to this attribute

let {length:len}='hello';
console.log(len)//5

Reference: introduction to ES6 standard (Second Edition)