ES6 allowed according to a certain pattern, and the object is extracted from the array values, assignment variable, which is called destructuring assignment.
Destructuring assignment (1) of the array
let [a, b, c] = [1, 2, 3];
Essentially, such an approach in "pattern matching", as long as the same pattern on both sides of the equal sign, the variable will be left given the corresponding value
if deconstruction is not successful, the variable's value will be equal to undefined; for incomplete deconstruction, that is only part of the match, this
situation, deconstruction can still succeed. And if the right hand side is not an array (strictly speaking, can not traverse the structure), it will error.
Here are some examples:
Destructuring assignment allows you to specify the default values for ES6 internal strict equality operator (===), it is determined whether a value of a position, only when
a member of the array exactly equal undefined, the default value to take effect
Deconstruction assignment (2) the object of
the object with the array has an important difference. Elements of the array are arranged in order, the value of the variable is determined by its location, and the object
attribute is not order, the attribute must be the same name as the variable, in order to get the correct value. If no attribute of the same name, the value of the variable is equal
undefined.
Indeed destructuring assignment target is in the form of the following abbreviations,
the let {foo: foo, bar: bar} = {foo: 'AAA', bar: 'BBB'};
That is, the internal mechanism destructuring assignment of an object, is to find the same name properties, and then assigned to the variable corresponding to the real assignment is the latter
, not the former, the above code is a pattern to match foo, bar is variable. If variable names and attribute names are inconsistent, not short,
it can be written as follows:
the let {foo: baz} = {foo: 'AAA', bar: 'BBB'};
baz // "AAA"
and arrays, objects deconstruction also nested object can be used to deconstruct
the let obj = {
P: [
'the Hello',
{Y: 'World'}
]
};
{p the let: [X, Y} {]} = obj;
X // "the Hello"
Y // "World"
Note that, in this case p is a schematic, rather than variable, can not be assigned, but also as a variable if p assignment may be written as follows:
the let obj = {
P: [
'the Hello',
{Y: 'World'}
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
Deconstruction of objects can also specify a default value, the default value of the entry into force of that object's property value equal to strict undefined.
For example:
var X = {} = {X. 3: undefined};
X //. 3
var {x = 3} = {x: null};
x // null
Note destructuring assignment target point
1. If you want a variable already declared for destructuring assignment, it should be noted:
// error writing
the let X;
{X} = {X:. 1};
// SyntaxError: syntax error
code above being given, JavaScript engine {x} is understood as a code block, causing syntax errors, may be modified as follows
// correct wording of
the let X;
({X = {x}:}. 1);
2. Among the destructuring assignment allows the left operand mode, any variable name is not placed, the following expression while meaningless,
but valid:
({} = [to true, to false]);
({} = 'ABC' );
({} = []);
3. The special nature of the array of objects, it is possible to deconstruct array object properties, such as:
the let ARR = [. 1, 2,. 3];
the let {0: First, [arr.length -. 1]: =} Last ARR;
First. 1 //
Last 3 //
structure (3) string assignment
string can be deconstructed value, the characters are converted into a similar array of objects
const [a, b, c, d, e] = 'hello' ;
the let {length: len} = 'Hello';
len. 5 //
objects array has a length similar properties, it can be assigned to this attribute deconstruction.
(4) the structure and value of Boolean assignments
destructuring assignment rule is that, as long as the value is not equal right object or array, it will be converted to an object, for example:
the let {toString: S} = 123;
S === Number The .prototype.toString // true
{toString the let: = s} to true;
// === Boolean.prototype.toString s to true
the above code, the value and the wrapper object has toString Boolean attribute, the variable s to a value can take,
since the null and undefined can not be converted to an object, so they deconstruct the assignment, he will be given.
{prop the let: X = undefined}; // TypeError
the let {prop: Y} = null; // TypeError
Structure (5) function parameter assignment
parameter function can also be used destructuring assignment, structure function parameters also can use the default value, undefined will trigger
default values of function arguments.
(6) parentheses issue
rules ES6 is that as long as there is ambiguity could lead to deconstruction, you may not use parentheses, it is recommended whenever possible, do not in the mode
to place parentheses.
Without parentheses:
declaration statement 1. The variable mode can not parentheses
2. The function parameters (arguments belonging variable declarations and therefore can not with parentheses)
3. The mode assignment
can parentheses case where
only conditions: non mode assignment of the statement
[(b)] = [3correct
({p: (d)}correct
[(parseInt.prop)] = [3; // correct
three of the above statements can be executed correctly, because they are the first assignment, rather than declarative statements;
secondly they parentheses are not part of the pattern. The first statement, the pattern is the first member of the array taken,
nothing to do with parentheses;
second row statement, the pattern is p, rather than D; uniform property of the first row and the third row statement statement.
(7) use of
deconstruction use many variables assigned
value 1. The variable switching
the let X =. 1;
the let Y = 2;
[X, y] = [y, x];
2. The return value from the plurality of functions
the function returns a value only if more than one value to be returned, only to put them in an array or an object returned. With the deconstruction of the assignment, remove these values is very convenient.
3. Definition of function parameters
destructuring assignment can easily correspondence with a set of parameters and the variable name.
4. Extract Json data
deconstruction, is particularly useful for extracting data assigned JSON object.
The default values of function parameters
6. Map deconstruction traversing
// get keys
for (the let [Key] of Map) {
// ...
}
for (let [key, value] of map) {
console.log(key + " is " + value);
}
7. The method of specifying an input module