Why deconstructed features
in ES5 and earlier versions, developers in order to obtain specific data from objects and arrays and assigned to the variable, write a lot of code that looks homogenization, as follows:
= {options the let
repeat: to true,
save: to false
};
// get the data from the object
the let = options.repeat repeat,
save = options.save;
code values extracted from the repeat and save options object and stored as local variables of the same name, the extraction process is very similar, imagine, if you want to extract more variables, you must turn to write similar code assigned to a variable, which also contains a nested if structure is traversed alone can not find real information, it is necessary to dig the entire data structure to find the required data.
Object deconstruction
objects deconstruction grammatical forms an object is placed on the left side a literal assignment, such as:
Node = {the let
type: "Identifier",
name: "foo"
};
the let {type, name} = Node;
the console.log (type); // "Identifier"
the console.log (name); // "foo"
in this code, node.type value is stored in the variable named type; node.name value is stored in a variable named in name.
Note: If you use var, let, const deconstruction declare a variable, must provide initialization procedure (that is, the value of the right side of the equal sign), otherwise it will cause the program to throw a syntax error.
Deconstruction assignment
can also use deconstructed in the grammar assign values to variables, as follows, want to modify their value after the definition of variables, it can be:
Node = {the let
type: "Identifier",
name: "foo"
},
type = "the Literal",
name =. 5;
// use the syntax of a plurality of variable assignments deconstructed
({type, Node name =});
the console.log (type); // "Identifier"
the console.log (name); // "foo"
initialize a value in this example, name and declared type variable, the next several lines, by deconstructing assignment method, read the corresponding values from the target node reassign these two variables. Note: Always use parentheses wrap one pair of deconstruction assignments, javascript engine open a pair of braces as a block of code and syntax requirements, code blocks can not appear on the left side of an assignment, you can add parentheses after block statement into an expression, in order to achieve the overall destructuring assignment process.
The default value is
used when deconstructed assignment expression, if a local variable name specified in the object does not exist, then the local variable is assigned the value undefined, as follows:
Node = {the let
type: "Identifier",
name: "foo"
};
the let {type, name, value} = Node;
the console.log (type); // "Identifier"
the console.log (name); // " foo "
the console.log (value); // undefined
when the specified attribute does not exist, a default value can define, add an equal sign in the name of the attribute (=) and the corresponding default value:
Node = {the let
type: "Identifier",
name: "foo"
};
the let {type, name, value to true} = = Node;
the console.log (type); // "Identifier"
the console.log (name); / / "foo"
the console.log (value); // to true
non-local variable with the same name
each instance so far, deconstruction are local variables of the same name of the object attribute assignment using, for example, the value node.type It is stored in a variable of type. But if you want to use a different name of a local variable to store the value of the object attributes, in an extended syntax ES6 meet:
Node = {the let
type: "Identifier",
name: "foo"
};
the let type {: localType, name: the localName} = Node;
the console.log (localType); // "Identifier"
the console.log (the localName); / / "foo"
when other variable name assignment can also add a default value, simply add an equal sign and the default values after the variable name:
Node = {the let
type: "Identifier"
};
the let type {: localType, name: the localName = "bar"} = Node;
the console.log (localType); // "Identifier"
the console.log (the localName); // " bar "
nested object deconstructing
the let Node = {
type:" Identifier ",
name:" foo ",
LOC: {
Start: {
Line:. 1,
column:. 1
},
End: {
Line:. 1,
column:. 4
}
}
} ;
the let LOC {:}} {Start = Node;
the console.log (start.line); //. 1
the console.log (start.column); //. 1
in this example, we used a model deconstruction braces , its meaning is found in the loc attribute node object, one should continue to look for start-depth property. Furthermore, you can use a different name with the object properties of local variable names:
Node = {the let
type: "Identifier",
name: "foo",
LOC: {
Start: {
Line:. 1,
column:. 1
},
End: {
Line:. 1,
column:. 4
}
}
};
// extracted node. loc.start
the let {LOC: {Start: Node = localStart}};
//. 1; the console.log (localStart.line)
the console.log (localStart.column); //. 1
array deconstruction
compared to the deconstruction of the object syntax, an array of deconstruction is much simpler, it uses an array literal, and deconstruction operations completed within the array, rather than the object using the object literal syntax as named properties:
= Colors the let [ "Red", "Green", "Blue"];
the let [firstColor, secondColor] = Colors;
the console.log (firstColor); // "Red"
the console.log (secondColor); // "Green"
in this code, we deconstructed from an array of colors "red" and "green" these two values, and are stored in variables and variable secondColor in firstColor. In deconstructing the array syntax, our position in the array by value selection, and can be stored in any variable, not explicitly declare an element will directly be ignored. In this process, the array itself will not be any change.
Deconstruction mode, elements may be omitted, directly to the variable name only elements of interest. For example, if you just want to take a third value in the array, you do not need to provide the name of the first and second variable elements:
= Colors the let [ "Red", "Green", "Blue"];
the let [,, thirdColor] = Colors;
the console.log (thirdColor); // "Blue"
destructuring assignment
array deconstruction context assignment may also be used, but not We need to use parentheses parcel expression, unlike that of the object deconstruction agreement.
= Colors the let [ "Red", "Green", "Blue"],
firstColor = "Black",
secondColor = "Purple";
[firstColor, secondColor] = Color;
the console.log (firstColor); // "Red"
Console // "green"; .log (secondColor )
array deconstruction also use a unique embodiment: the exchange value of two variables. Value exchange ES5 two variables need to be introduced in the third temporary variables, but the array of deconstruction ES6, there is no need of additional variables, as follows:
A. 1 = the let,
B = 2;
[A, B] = [B, A];
the console.log (A); // 2
the console.log (B);. 1 //
default value
may be expressed in the array destructuring assignment wherein the default value is added to any position in the array, the default value of the specified position when the property does not exist or is undefined:
= Colors the let [ "Red"];
the let [firstColor, secondColor = "Green"] = Colors;
the console.log (firstColor); // "Red"
the console.log (secondColor); // "Green"
nested array deconstruction
= Colors the let [ "Red", [ "Green", "LightGreen"], "Blue"];
the let [firstColor, [secondColor]] = Colors;
the console.log (firsrColor); // "Red"
the console.log ( secondColor); // "Green"
Colors array of things this example, the variable referenced secondColor value "green", which is included in another array element inside the array, so that both sides of the brackets secondColor is a necessary Deconstruction mode. Similarly, in the array can be unlimited in-depth deconstruction go, just like in the object.
Uncertain elements
in the array, you can ... syntax to assign the remaining elements in the array to a particular variable, as follows:
= Colors the let [ "Red", "Green", "Blue"];
the let [firstColor, ... restColors] = Colors;
the console.log (firstColor); // "Red"
the console.log (restColors.length); 2 //
the console.log (restColors [0]); // "Green"
the console.log (restColors [. 1]); // "Blue"
Note: the array being deconstructed indefinite element must be the last entry, continue to add the comma in the back causes the program to throw a syntax error.
Mixed deconstruction
can mix and an array of objects deconstruction deconstruction to create more complex expressions, this way, you can extract the information you want from any mixed with an array of data objects and deconstruction:
Node = {the let
type: "Identifier",
name: "foo",
LOC: {
Start: {
Line:. 1,
column:. 1
},
End: {
Line:. 1,
column:. 1
}
},
Range: [0,3 ]
};
the let {
LOC:} {Start,
Range: [startIndex]
} = Node;
the console.log (start.line); //. 1
the console.log (start.column); //. 1
the console.log (startIndex) ; 0 //
this code respectively node.loc.start and node.range [0] to extract the variable start and startIndex. Remember: deconstruction mode loc: and range: only on behalf of their place in the object, that is, the object's properties.
---------------------
Author: Du Zero White
Source: CSDN
Original: https: //blog.csdn.net/DFF1993/article/details/82951227
copyright Disclaimer: This article is a blogger original article, reproduced, please attach Bowen link!