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

Keywords: Attribute

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"];

let [head,...tail]=[1,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]=[]

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]=[]
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];

let [y=1]=[null];

let [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]=[];
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"};
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(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};
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}={}

let {z,y=5}={z:1};

let {mes:msg="hahhhaa"}={};

let {mx=4}={mx:undefined}

let {ms=4}={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';
Reference: introduction to ES6 standard (Second Edition)

Posted by LowEndTheory on Sun, 03 May 2020 23:35:26 -0700