<> Destructuring assignment

What is deconstruction assignment ?
Destructuring assignment ：ES6 Allows values to be taken from arrays and objects according to certain patterns , Then we assign values to the variables , This is called deconstruction assignment .
Classification of deconstruction assignment ：

<> one , Array deconstruction assignment

Simple array deconstruction
// example 1： { let a,b; [a,b]=[1,2]; console.log(a,b) // output a=1 b=2; }
Extension operator (…) On the deconstruction of the theory of the law
// example 2: { let a,b,c; [a,b,...c]=[1,2,3,4,5,6]; console.log(a,b,c) // output a=1 b=2
c=[3,4,5,6]; }
When deconstruction is unsuccessful or incomplete
// example 3： { let a,b,c; [a,b,c]=[1,2]; console.log(a,b,c);// output a=1 b=2 c=undefined;
} // example 4： { let a,b; [a,b]=[1,2,3]; console.log(a,b);// output a=1 b=2; }
Deconstruction assignment of arrays , The structure format on both sides of the equal sign should be the same , To complete the structure .
The above code example 1：
among [a,b]=[1,2], The structure on both sides is exactly the same , Then it's completely deconstructed ,1 Assign to a,2 Assign to b.

Example code 2：

A new operator is introduced ----- Extension operator (…), Used to retrieve all ergodic properties in a parameter object , Copy to the current object .[a,b,…c]=[1,2,3,4,5,6],1 Assign to a,2 Assign to b, With extension operator c, that …c=[3,4,5,6], This is the extension operator .

Example code 3：[a,b,c]=[1,2],a,b Will be assigned one by one to 1,2, But there is no value to the right of the equal sign , that c It's defined , But there is no assignment to it , that c be equal to undefined.

Example code 4： There are more values on the right , It will be discarded automatically , It is not assigned to the variable on the left .

Default value
// example 5： { let foo; [foo=12]=[]; console.log(foo) // output 12; } // example 6： { let[x,y="b"
]=["a",undefined]// x="a" ,y="b" } // example 7 { let a=2; [a]=["undefined"]; console.
log(a); // output a="undefined" }
Deconstruction assignments allow default values to be set , But only undefined Will trigger the use of the default value .

Example code 5：[foo=12]=[], Because there's an empty one on the right , No value , So the right side is equivalent to undefined, Then it will trigger the use foo Default value for 12, So output 12.

Example code 6：[x,y=“b”]=[“a”,undefined],x Will be assigned to a string “a”, because y Corresponding to the past undefined, Then the trigger uses the default value , therefore y=“b”.

Example code 7： If this is the case “undefined” In my words , Then the default value is not triggered ,“undefined” It's just a string .

Deconstruction order
// example 8 { let[x=1,y=x]= console.log(x,y) // x=2 y=2 }

First 2 Assign to x, At this time x Already 2 It's over , And then we do the analysis y The deconstruction of assignment , the reason being that undefined, Then the trigger uses the default value ,y=x, At this time x=2, that y=2. This is the order of array deconstruction assignments .

<> two , Deconstruction assignment of objects

There is an important difference between the deconstruction assignment of objects and arrays . The elements of an array are arranged in order , The value of a variable is determined by its position , There is no order in the attributes of an object , The variable must have the same name as the property , As like as two peas, the structure and format are exactly the same. , Only in this way can we get the correct value .
for example ：
// example 9 { let {bar,foo}={foo:"aaa",bar:"bbb"} console.log(foo,bar); // output
foo="aaa" bar="bbb" } // example 10 { let {baz}={foo:"aaa",bar:"bbb"}; console.log(baz)
;// output undefined } // example 11 { let{x,y,z=1,a:q}={a:100,b:200,y:300} console.log(x,y,
z,q);// x=undefined y=300 z=1 q=100 }
In the first example of the above code , The order of the variables to the left of the equal sign and to the right of the equal sign is not aligned next to the order , However, the deconstruction of the object does not affect the assignment , It is assigned by the property name .

The variables in the second code example do not correspond to the same property name , The value cannot be obtained , In the end, it's equal to undefined.

The writing of the above two examples is the abbreviation of object deconstruction assignment . actually ：
{
let {bar：bar,foo：foo}={foo:“aaa”,bar:“bbb”}
console.log(foo,bar); // output foo=“aaa” bar=“bbb”
}
The internal mechanism of object deconstruction assignment is to find the same attribute name first , Then assign the value to the corresponding variable , In fact, the latter is really assigned , Not the former .
for example ：
// example 12 { let{foo:baz}={foo:"aaa",bar:"bbb"}; console.log(baz);// output baz="aaa"
console.log(foo);// output Will report an error error:foo is not defined }
//foo Is a property name, not a variable , The assignment is baz Assigned value “aaa”.
<> three , Deconstruction assignment of string

Strings can also be deconstructed and assigned , At this time, the string is converted to an array like object .
{ let[a,b,c,d,e]="hello"; console.log(a,b,c,d,e); // output a="h" b="e" c="l" d="l"
e="o" }
Objects like arrays have one length attribute , At the same time, this attribute can be deconstructed .
for example
{ let{length:len}="hello"; console.log(len); // output len=5
<> four , The problem of parentheses

Parentheses are not allowed for the following three deconstruction assignments .

1. Variable declaration statement

let [( a )]=;
let {x: ( c )}={};
let {(x: c)}={};
let {(x):c}={};
The above statements will report an error , Because they are all variable declaration statements .
2. Function parameters
Because function parameters are also variable declarations .
3. The mode of assignment statement
The above statement places the entire pattern in parentheses , Cause error report .

Then you can use parentheses
for example
[(b)]=; correct
({p:(d)}={}); correct
[(parseInt.prop)]= correct

All the above three lines can be executed correctly , Because first of all, they are all assignment statements , Instead of declarative statements ; Second, their parentheses are not part of the pattern . In the first line of the statement , The pattern is to take the first member of the array , It's not about parentheses ; In the second line of the statement , The pattern is p, instead of d; The nature of the third line statement is the same as that of the first line statement .

<> five , Usage and application scenarios

<> Exchange the value of a variable

In the past, variable exchange needed intermediate variables to store values temporarily , It's complicated .
Exchange variables by deconstructing assignment
for example
{ let x=1; let y=2; [x,y]=[2,1]; console.log(x,y)// output x=2 y=1; }
<> Returns multiple arguments from a function

Function can only return one value , If you want to return multiple values , They can only be returned in arrays and objects , With deconstruction assignment , It is more convenient to take the value from it .
for example
{ function f1(){ return [1,2,3] } let [a,b,c]=f1(); // output a=1 b=2 c=3 } {
function f2(){ return{ foo:1, bar:2 }; }; let {foo,bar}=f2(); // output foo=1 bar=2 }
<> extract JSON data

Data transmitted from the background server , Mostly JSON format , So we need to extract useful data , It's very easy to assign values by deconstruction .
for example
{ let jsonData={ id:42, status:"OK", data:[867,5309] }; let{id,status,data:
number}=jsonData; console.log(id,status,number)// output 42 OK [867,5309] }
<> other

For example, data extraction and rounding
{ let [b,,,c]=[1,2,3,4] console.log(b,c);// output b=1 c=4; } { let [a,...b]=[1,2,3,
4,5] console.log(a,b); // output a=1 b=[ 2, 3, 4, 5 ] }

Technology
Daily Recommendation