摘要：當(dāng)冒號(hào)右側(cè)存在花括號(hào)時(shí)，表示目標(biāo)被嵌套在對(duì)象的更深一層中。在對(duì)象的嵌套解構(gòu)中同樣能為本地變量使用不同的名稱(chēng)提取數(shù)組解構(gòu)結(jié)構(gòu)賦值基本忽略一些選項(xiàng)重新賦值默認(rèn)值數(shù)組解構(gòu)賦值同樣允許在數(shù)組任意位置指定默認(rèn)值。

主要知識(shí)點(diǎn)：對(duì)象解構(gòu)、數(shù)組解構(gòu)、混合解構(gòu)以及參數(shù)解構(gòu)

《深入理解ES6》筆記 目錄

對(duì)象解構(gòu)簡(jiǎn)單的例子

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;
//使用解構(gòu)來(lái)分配不同的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"

在函數(shù)中使用解構(gòu)賦值

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"

當(dāng)你使用解構(gòu)賦值語(yǔ)句時(shí)，如果所指定的本地變量在對(duì)象中沒(méi)有找到同名屬性，那么該變量會(huì)被賦值為 undefined 。

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

可以選擇性地定義一個(gè)默認(rèn)值，以便在指定屬性不存在時(shí)使用該值:

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

也可以給變量別名添加默認(rèn)值，依然是在本地變量名稱(chēng)后添加等號(hào)與默認(rèn)值，例如：

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

使用類(lèi)似于對(duì)象字面量的語(yǔ)法，可以深入到嵌套的對(duì)象結(jié)構(gòu)中去提取你想要的數(shù)據(jù):

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
//每當(dāng)有一個(gè)冒號(hào)在解構(gòu)模式中出現(xiàn)，就意味著冒號(hào)之前的標(biāo)識(shí)符代表需要檢查的位置，而冒號(hào)右側(cè)則是賦值的目標(biāo)。當(dāng)冒號(hào)右側(cè)存在花括號(hào)時(shí)，表示目標(biāo)被嵌套在對(duì)象的更深一層中。
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

在對(duì)象的嵌套解構(gòu)中同樣能為本地變量使用不同的名稱(chēng)：

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"

忽略一些選項(xiàng)

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"

數(shù)組解構(gòu)賦值同樣允許在數(shù)組任意位置指定默認(rèn)值。當(dāng)指定位置的項(xiàng)不存在、或其值為undefined ，那么該默認(rèn)值就會(huì)被使用:

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

在整個(gè)解構(gòu)模式中插入另一個(gè)數(shù)組模式，解構(gòu)操作就會(huì)下行到嵌套的數(shù)組中，就像這樣：

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

數(shù)組解構(gòu)有個(gè)名為剩余項(xiàng)（ rest items ）的概念，它使用 ... 語(yǔ)法來(lái)將剩余的項(xiàng)目賦值給一個(gè)指定的變量:
三個(gè)點(diǎn)的解構(gòu)賦值必須放在所有解構(gòu)元素的最末尾，否則報(bào)錯(cuò)。

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"

也可以進(jìn)行數(shù)組的克隆操作：

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

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

混合解構(gòu)指的是對(duì)象和數(shù)組混合起來(lái)，執(zhí)行解構(gòu)操作

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ù)寫(xiě)法：

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

問(wèn)題：無(wú)法僅通過(guò)查看函數(shù)定義就判斷出函數(shù)所期望的輸入，必須閱讀函數(shù)體的代碼。

重寫(xiě)函數(shù)：

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

參數(shù)解構(gòu)有一個(gè)怪異點(diǎn)：默認(rèn)情況下調(diào)用函數(shù)時(shí)未給參數(shù)解構(gòu)傳值會(huì)拋出錯(cuò)誤：

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

可以這樣寫(xiě)避免錯(cuò)誤：

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

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