- An array of deconstruction
- Object deconstruction
- Related issues statement and deconstruction
- Deconstruction and repeat assignment
- Demand deconstruction
- The default value is assigned
- Deconstruction parameters
Deconstruction (destructuring): Structured assignment
Deconstruction is usually regarded as a structured assignment method for ES6, may be split by deconstructing out array element or an object property, as a single variable. And in the case of the same name may be implemented names multiplexed to the purpose of reducing the amount of code, the basic purpose is to reduce the amount of codes deconstruction.
ES6 before from the array to split the element and then assigned to the variable how to do?
1 function foo(){ 2 return [1,2,3]; 3 } 4 var tmp = foo(), 5 a = tmp[0], b = tmp[1], c = tmp[2]; 6 console.log(a, b, c); // 1 2 3
Deconstruction using the code array for ES6:
var [a, b, c] = foo();
ES6 before splitting property from the object as a variable transcoding do?
1 function bar(){ 2 return { 3 x:4, 4 y:5, 5 z:6 6 } 7 } 8 var tmp = bar(), 9 x = tmp.x, y = tmp.y, z = tmp.z; 10 console.log(x, y, z); //4 5 6
ES6 deconstruction code object properties:
. 1 var {X: X, Y: Y, Z: = Z} bar (); // This line may also abbreviated: var {X, Y, Z} = bar (); 2 the console.log (X, Y , Z); // . 4. 5. 6
Object property assignment mode:
See above deconstruction of syntax, the first question is, arrays and objects by what means the element and attribute values assigned to the variable it? The logic behind it is no longer complicated to explore here, worthy of our attention is the expression that is the variable name, that is an element or a reference to the property? When you see an array of deconstruction, it is still relatively easy to understand:
var [a, b, c] = foo();
As can be seen from Examples a, b, c is the name of the variable, but they actually are by brackets "[]" of the array index foo () corresponding to the index value of the method of performing the method, is assigned to the corresponding position variable. And this we can deduce that the object of deconstruction in deconstruction expression in the left side of the "x:" represents the property value object references, "x" is a variable, shorthand way annotation example has been written, meaning that variable multiplexing attribute name of the object as a variable name. If you want to declare a new variable name by deconstructing it?
let {x:bam, y:baz, z:bap} = bar();
This is the object attribute assignment mode, because the structure of the left like an object, but the grammatical structure of the assignment is from left to right, the right is not the object argument assignment to the property name on the left.
Representations and deconstruct some of the problems related to:
In normal development, we would like to write the variable name in the first row of the scope of this way of writing sometimes is written Developer's Handbook, developed as a writing standard code, object structure at this time will need to add parentheses, to avoid "{}" is interpreted as a block-level scope:
. 1 var A, B, C, X, Y, Z; 2 [A, B, C] = foo (); . 3 ({X, Y, Z} = bar ()); // Object When this deconstruction remember to write parentheses
Attributes can be calculated using deconstructed:
Deconstruction properties such as the need to add another object to object, can be calculated using properties of ways to achieve:
. 1 var Which = "X" , 2 O = {}; . 3 ({[Which]: O [Which]} = bar ()); // essentially the same ({X: 0.x}) . 4 Console. log (OX); // 4
Deconstruction and repeat assignment:
Through the above series of logic deconstruction traditional values, property values reusable object deconstructed very simple to understand, see below:
. 1 var {s: m, s: = {s} n-: 10}; // reuse s assigned attribute values m, n- 2 the console.log (m, n-); // 10 10
Then play some of the more sophisticated deconstruction repeat assignment:
. 1 var {A: {X: X-, X: the Y}, A = {A}: {X:. 1 }}; 2 // Analysis: 3 // first step . 4 // ({X: X-, X: } = the Y {X:. 1} ); A = {X:}. 1; . 5 // second portion . 6 // X-=. 1, the Y =. 1,
Come in an array of repeating assignment deconstruction:
. 1 var {A: X-, A: the Y, A: [the Z]} = {A: [. 1 ]}; 2 // Analysis 3 // first step . 4 // X-= [. 1], the Y = [. 1] , ([the Z] = [. 1]); . 5 // second portion . 6 // the Z =. 1; . 7 the console.log (X-, the Y, the Z); // [. 1] [. 1]. 1 . 8 X-[0] 10 = ; . 9 Y.push (2 ); 10 the console.log (X-, the Y, the Z); // [10,2] [10,2]. 1
By this above example also illustrates application of deconstruction out value types simply assign by reference, not cloned, a file having a modified property value cited therein, all references will be applied to the other.
Demand deconstruction:
Press deconstruction deconstruction is only wanted attributes and elements, and can not match the allowed attributes and elements, the corresponding variables are declared but not assigned.
1 var [,,c,d] = [1,2,3]; 2 var {w,z} = {x:10,y:20,z:30}; 3 console.log(c,d); // 3 undefined 4 console.log(w,z); // undefined 30
Default value assignment:
With the above mismatch, reminds me of the ES6 default parameters to methods provided, default values can also be achieved in Deconstruction:
1 var [a = 3, b = 6, c = 9, d = 12] = [1, 2, 3]; 2 console.log(a, b, c, d); // 1 2 3 12 3 var {x, y, z, w = 50} = {x:10, y:20, z:30} 4 console.log(x, y, z, w); //10 20 30 50
Deconstruction parameters:
Deconstruction is a kind of variable declarations and acts on the starting assignment in nature, so this operation can of course also be placed inside the parameters of the method used to, which makes traditional values has become very convenient, but also eliminates the trouble of parameter type conversion and dismantling.
1 function ([x,y]){ 2 console.log(x,y); 3 } 4 foo([1,2]);// 1 2
Receiving the parameter as a variable argument object is deconstructed.
The last question to an interesting algorithm, using variable exchange deconstruction achieve two values:
1 var a = 10, b = {value:"B"}; 2 [a, b] = [b, a]; 3 console.log(a, b); //{value:10} 10
Finally, you can use comprehensive deconstruction of syntax to achieve these very complex applications, such as deconstruction default value + parameter default values to achieve mass participation, nested Default: deconstruction restructuring, reference may be "You do not know JS" lower volume P86 ~ P90 .