摘要：當冒號右側存在花括號時，表示目標被嵌套在對象的更深一層中。在對象的嵌套解構中同樣能為本地變量使用不同的名稱提取數組解構結構賦值基本忽略一些選項重新賦值默認值數組解構賦值同樣允許在數組任意位置指定默認值。

主要知識點：對象解構、數組解構、混合解構以及參數解構

《深入理解ES6》筆記 目錄

對象解構簡單的例子

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"

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 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"
};
//讀取名為  type  的屬性，并把它的值存儲在變量  localType  上
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"

也可以給變量別名添加默認值，依然是在本地變量名稱后添加等號與默認值，例如：

let node = {
    type: "Identifier"
};
//該語法實際上與傳統對象字面量語法相反，傳統語法將名稱放在冒號左邊、值放在冒號右邊；而在本例中，則是名稱在右邊，需要進行值讀取的位置則被放在了左邊。
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"

使用類似于對象字面量的語法，可以深入到嵌套的對象結構中去提取你想要的數據:

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 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

基本

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"

數組解構賦值同樣允許在數組任意位置指定默認值。當指定位置的項不存在、或其值為undefined ，那么該默認值就會被使用:

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

在整個解構模式中插入另一個數組模式，解構操作就會下行到嵌套的數組中，就像這樣：

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 隨后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

數組解構有個名為剩余項（ rest items ）的概念，它使用 ... 語法來將剩余的項目賦值給一個指定的變量:
三個點的解構賦值必須放在所有解構元素的最末尾，否則報錯。

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"

也可以進行數組的克隆操作：

/ 在 ES5 中克隆數組
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

// 在 ES6 中克隆數組
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

混合解構指的是對象和數組混合起來，執行解構操作

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

原函數寫法：

// options 上的屬性表示附加參數
function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
    path = options.path,
    domain = options.domain,
    expires = options.expires;
// 設置 cookie 的代碼
}
// 第三個參數映射到 options
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

問題：無法僅通過查看函數定義就判斷出函數所期望的輸入，必須閱讀函數體的代碼。

重寫函數：

function setCookie(name, value, { secure, path, domain, expires }) {
// 設置 cookie 的代碼
}
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

參數解構有一個怪異點：默認情況下調用函數時未給參數解構傳值會拋出錯誤：

// 出錯！
setCookie("type", "js");

可以這樣寫避免錯誤：

function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

function setCookie(name, value,
{
    secure = false,
    path = "/",
    domain = "example.com",
    expires = new Date(Date.now() + 360000000)
} = {}
) {
// ...
}