Original address (see the original recommended direct): https://www.cnblogs.com/xiaohuochai/p/7243166.html
a target deconstruct
the value of the specified field remove the specified object
codes
let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
Remove the node value of the object type field with the name of
two destructuring assignment
remove the specified object of the specified field values assigned to the field of the same name has been declared in
the code
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
// 使用解构来分配不同的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
Remove the value of the node object type with the name of the assignment has been declared to the type name with
the use of deconstruction to assign different values outermost parentheses must have
three default values
used when deconstructed assignment expression, if the specified local variable name the object does not exist, then the local variable is assigned the value undefined
Code
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined
So there is no value variable is assigned the value undefined in the node
Themselves define default values, when the specified attribute does not exist, it is possible to define any attribute is not present a default value
, such as
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
property value will use the default value true
Four non-local variable with the same name
if desired using different named local variable to store the value of object properties, may be used in the extended syntax ES6
such
let node = {
type: "Identifier",
name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
type attribute assigned to localType name attribute assigned to the localName
When using the properties of other objects stored in the variable name you can also set a default
such as
let node = {
type: "Identifier"
};
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"
Five nested objects deconstruction
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1
Deconstruction can get nested object property values specified in the object he can only get to the last stage of expansion of the property,
such as the current directly through the loc to find the property can not be found by the start only to find the property
equally be nested query but the use of aliases
such as
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
// 提取 node.loc.start
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1
Six array of deconstruction
in deconstruction array, we were selected by the value of the position in the array, and can be stored in any variable, not shown element declaration will directly be ignored
, such as
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
The first element and the second element are assigned to the firstColor with secondColor third element directly overlooked
in the deconstruction mode, you can also omit the direct elements, only the variable name for the element to catch the interest of
such
let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"
The first two elements directly overlooked
Array assignment deconstruction
array assignment deconstruction can also assign a context, but does not require parentheses parcels expression, which is the object of deconstruction different assignments
such as
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
Using an array variable exchange deconstruction
ES5 method
let a = 1,
b = 2,
tmp;
tmp = a;
a = b;
b = tmp;
console.log(a); // 2
console.log(b); // 1
Using arrays deconstruction
let a = 1,
b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1
Array deconstruction set default values
such as
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
Nested array deconstruction
such as
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
Indefinite elements
function with variable parameters, and the array has a deconstruction syntax similar concept - uncertain elements. In the array, you can ... syntax to assign the remaining elements in the array to a particular variable
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
All elements of the first element assigned to firstColor rest directly assigned restColors
Copies the array of
ES5 methods
in ES5, developers often use to clone the array concat () method, designed to concat () method is to connect two arrays, do not pass parameters if the call returns a copy of the current function
// 在 ES5 中克隆数组
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"
Deconstruction copy the array
// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"
Seven deconstruction mixed
array of objects mixed with deconstruction
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
Obtaining a first start element and attribute objects in the array
Eight parameters deconstruction
deconstruct the perfect wording parameters
const setCookieDefaults = {
secure : false,
path : "/",
domain : "example.com",
expires : new Date(Date.now() + 360000000)
}
function setCookie(name, value,{
secure = setCookieDefaults.secure,
path = setCookieDefaults.path,
domain = setCookieDefaults.domain,
expires = setCookieDefaults.expires
}=setCookieDefaults) {
// ...
}
Such exclusion can write a lot of pit Why do you write to see the original
The other ten deconstruction
string deconstruction
const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"
Array-like object has a length property, it can also be assigned to this property deconstruction
const {length} = 'hello';
console.log(length);//5
Numerical and Boolean values deconstruction
when deconstructed assignment, if the right hand side is a value and a Boolean value, you will first turn objects
let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true
Deconstruction assignment rule is that as long as the value is not an object or an array of right-hand side, you turn it first object. Because undefined and null can not be converted to an object, so they deconstruct the assignment, will be given
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError