深刻理解ES6筆記（五）解構：使訪問數據更便捷

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

《深刻理解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)
} = {}
) {
// ...
}