對象與數組的字面量在JS 中是最常用的兩種表示法.
并且感謝流行的 JSON 數據格式。
定義對象與數組，然后從中提取出相關信息。
為了簡化提取信息的任務， ES6 新增了解構（ destructuring ）。
1.對象解構
2.數組解構
在 ES5 及更早版本中，從對象或數組中獲取信息、并將特定數據存入本地變量：
let options = {
????repeat: true,
????save: false
};
// 從對象中提取數據
let repeat = options.repeat,
????save = options.save;
若數據量增大，此方式就不那末好了。
對象解構
對象解構語法在賦值語句的左側使用了對象字面量:
let node = {
? ? type: "Identifier",
? ? name: "foo"
};? ?
let { type, name } = node;
console.log(type); // Identifier
console.log(name); // foo
?node.type 的值被存儲到 type? 本地變量中，node.name? ?的值則存儲到 name 變量中.
簡寫了屬性,本來應該是這樣的：
let {
? ? tyep: type,
? ? name: name
} = node;
對象解構賦值：
注意使用（）圓括號.
參見兩個栗子：
let node = {
? ? type: "Identifier",
? ? name: "foo"
},
type = "Literal",
name = 5;
// 使用解構來分配不同的值
({ type, name } = node);
console.log(type); // Identifier
console.log(name); // foo
let node = {
? ? type: "Identifier",
? ? name: "foo"
},
? ? type = "Literal",
? ? name = 5;
function outputInfo(value) {
? ? console.log(value === node); // true
}
outputInfo({ type, name } = node);
console.log(type); // Identifier
console.log(name); // foo
當你使用解構賦值語句時，如果所指定的本地變量在對象中沒有找到同名屬性，那么該變量 會被賦值為undefined 。
let node = {
? ? type: "Identifier",
? ? name: "foo"
};? ?
let { type, name, value } = node;
console.log(type); // Identifier
console.log(name); // foo
console.log(value); // undefined
你可以選擇性地定義一個默認值，以便在指定屬性不存在時使用該值。
若要這么做，需要在 屬性名后面添加一個等號并指定默認值
let { type, name, value = true } = node;
let { type: localType, name: localName } = node;
let { type: localType, name: localName = "bar" } = node;
主要是結合了對象字面量的語法。
嵌套的對象解構
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
為本地變量使用不同的名稱：
let {
? ? loc: {
? ? ? ? start: localStart
? ? }
} = node;
數組解構
類似于對象解構，將對象字面量替換成了數組字面量。
注意：?數組解構時，解構作用在數組內部的位置上，而不是作用在對象的具名屬性上。
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
數組解構賦值：
(數組不用()圓括號，而對象)
let colors = [ "red", "green", "blue" ],
? ? firstColor = "black",
? ? secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // red
console.log(secondColor); // green
數組解構賦值有一個非常獨特的用例，能輕易地互換兩個變量的值。
互換變量值在排序算法 中十分常用，而在ES5 中需要使用第三個變量作為臨時變量.
// 在 ES5 中互換值
let a = 1,
? ? b = 2,
? ? tmp;
tmp = a;
a = b;
b = tmp;
console.log(a);?// 2
console.log(b);?// 1
// 在 ES6 中互換值
let a = 1,
? ? b = 2;
[ a, b ] = [ b, a ];
console.log(a);?// 2
console.log(b);?// 1
默認值?
數組解構賦值同樣允許在數組任意位置指定默認值。
當指定位置的項不存在其值為 undefined ，
那么該默認值就會被使用。
let colors = [ "red" ];
let [? firstColor,? secondColor = "green",? ?thiredColor? ] = colors;
console.log(firstColor); // red
console.log(secondColor); // green
console.log(thiredColor); // undefined
嵌套的解構
let colors = [
? ? "red",
? ? [ "green", "lightgreen" ],
? ? "blue"
];
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"
剩余項 另一個作用：
克隆數組在 JS 中是個明顯被遺漏的功能。在 ES5 中開發者往往使用的是一個簡單的 方式，也就是用 concat() 方法來克隆數組，
// 在 ES5 中克隆數組
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); // ["red", "green", "blue"]
concat() 方法的本意是合并兩個數組，但不使用任何參數來調用此方法，就會獲得原 數組的一個克隆品
?ES6 中，你可以使用剩余項的語法來達到同樣效果
// 在 ES6 中克隆數組
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); // ["red", "green", "blue"]
注：
剩余項必須是數組解構模式中最后的部分，之后不能再有逗號，
否則就是語法錯誤。
