<> 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]=[2] 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 )]=[1];
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
function f([(z)]){ return z;} report errors
function f([z,(x)]){ return x;} report errors
Because function parameters are also variable declarations .
3. The mode of assignment statement
({p:a})={p:10}; report errors
([a])=[5]; report errors
The above statement places the entire pattern in parentheses , Cause error report .

Then you can use parentheses
for example
[(b)]=[3]; correct
({p:(d)}={}); correct
[(parseInt.prop)]=[3] 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 ] }

©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element