為什么解構很有用
ECMAScript 5以及以前的版本:
let options = {
repeat: true,
save: false
};
// extract data from the object
let repeat = options.repeat,
save = options.save;
雖然這段代碼看上去也挺簡單的,但想象一下如果你要給大量的變量賦值,你得一個一個的賦值。
或者你需要取一個嵌套結構數(shù)據(jù)的某個值,也許你得遍歷整個結構。
如果你能把數(shù)據(jù)解構成一些小小的片段,那獲取信息將會更加容易。
對象的解構
let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
注意: 必須初始化
// syntax error!
var { type, name };
// syntax error!
let { type, name };
// syntax error!
const { type, name };
解構賦值
可以賦值給已經(jīng)定義過的變量:
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
// assign different values using destructuring
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
默認值
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
給不同名本地變量賦值
let node = {
type: "Identifier",
name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
嵌套對象解構
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
數(shù)組的解構
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
只取你需要的部分
let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"
注意: 和對象的解構一樣,必須初始化
解構賦值
可以賦值給已經(jīng)定義過的變量:
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
在ECMAScript 5 中交換變量值
let a = 1,
b = 2, tmp;
tmp = a;
a = b;
b = tmp;
console.log(a); // 2
console.log(b); // 1
在ECMAScript 6 中交換變量值
let a = 1,
b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1
默認值
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
嵌套數(shù)組解構
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// later
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
剩余的元素
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"
數(shù)組的第一個值賦給了firstColor,剩下的值組成了一個新的數(shù)組賦給了restColors。
ECMAScript 5克隆一個數(shù)組:
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); // "[red,green,blue]"
ECMAScript 6克隆一個數(shù)組:
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); // "[red,green,blue]"
注意: 剩余的元素必須是解構數(shù)組的最后一個元素,后面不能有逗號。
混合解構
對象與數(shù)組嵌套混合的解構:
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
參數(shù)解構
function setCookie(name, value, { secure, path, domain, expires }) {
// code to set the cookie
}
setCookie("type", "js", {
secure: true,
expires: 60000
});
解構的參數(shù)是必需的
// error!
setCookie("type", "js");
它實際上是這樣運行的:
function setCookie(name, value, options) {
let { secure, path, domain, expires } = options;
// code to set the cookie
}
當解構賦值的右邊是null或者undefined,就會拋出錯誤。
如果你希望解構參數(shù)是可選的,你可以這樣寫:
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// empty }
解構參數(shù)的默認值
function setCookie(name, value,
{
secure = false,
path = "/",
domain = "example.com",
expires = new Date(Date.now() + 360000000)
} = {} ){
// empty }
