摘要：的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。必須傳值的解構(gòu)參數(shù)如果調(diào)用函數(shù)時(shí)不提供被解構(gòu)的參數(shù)會(huì)導(dǎo)致程序拋出錯(cuò)誤程序報(bào)錯(cuò)缺失的第三個(gè)參數(shù)，其值為。

在編碼過(guò)程中，我們經(jīng)常定義許多對(duì)象和數(shù)組，然后有組織地從中提取相關(guān)的信息片段。ES6的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu)，將其拆分為更小部分的過(guò)程。

let options = {
    repeat: true,
    save: false
};

// 從對(duì)象中提取數(shù)據(jù)
let repeat = options.repeat;
    save = options.save;

這段代碼從options對(duì)象提取了repeat和save的值并將其存儲(chǔ)為同名局部變量。如果要提取的變量更多，甚至還包含嵌套結(jié)構(gòu)，靠遍歷會(huì)夠嗆。

ES6解構(gòu)的實(shí)現(xiàn)，實(shí)際上是利用了我們?cè)缫咽煜さ膶?duì)象和數(shù)字字面量的語(yǔ)法。

let node = {
    type: "Identifier",
    name: "foo"
};

let { type, name } = node;

console.log(type);  // "Identifier"
console.log(name);  // "foo"

可見(jiàn)，只要在賦值操作的左邊放置一個(gè)對(duì)象字面量就可以了。type和name都是局部聲明的變量，也是用來(lái)從options對(duì)象讀取相應(yīng)值的屬性名稱(chēng)。

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;

console.log(firstColor);   // "red"
console.log(secondColor);  // "green"

使用的是數(shù)組字面量。我們從colors數(shù)組中解構(gòu)出了"red"和"green"兩個(gè)值，分別存儲(chǔ)在變量firstColor和secondColor中。

數(shù)組解構(gòu)模式中，也可以直接省略元素，只為感興趣的元素提供變量：

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor] = colors; // 不提供變量的，占位一下就可以

console.log(thirdColor);   // "blue"

我們也可以對(duì)已聲明的變量使用解構(gòu)賦值：

let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;

// 使用解構(gòu)語(yǔ)法為變量賦值，要用小括號(hào)擴(kuò)住
({ type, name } = node);

console.log(type);  // "Identifier"
console.log(name);  // "foo"

JavaScript語(yǔ)法規(guī)定，代碼塊不允許出現(xiàn)在賦值語(yǔ)句左側(cè)，因此添加小括號(hào)將塊語(yǔ)句轉(zhuǎn)化為一個(gè)表達(dá)式，從而實(shí)現(xiàn)解構(gòu)賦值。

解構(gòu)賦值常常用在給函數(shù)傳參數(shù)值的時(shí)候：

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"
consolo.log(name);  // "foo"

數(shù)組解構(gòu)也可以用于賦值上下文：

let colors = [ "red", "green", "blue"];
    firstColor = "black";
    secondColor = "purple";
    
[ firstColor, secondColor ] = colors;

console.log(firstColor);  // "red"
console.log(secondClor);  // "green"

數(shù)組解構(gòu)賦值可以很方便地交換兩個(gè)變量的值。
先看看ES5，我們交換兩個(gè)變量的做法：

let a = 1,
    b = 2,
    tmp;
    
tmp = a;
a = b;
b = tmp;

console.log(a);  // 2
console.log(b);  // 1

使用數(shù)組解構(gòu)賦值：

let a = 1,
    b = 2;

// 左側(cè)是解構(gòu)模式，右側(cè)是為交換過(guò)程創(chuàng)建的臨時(shí)數(shù)字字面量
[ a, b ] = [ b, a ];

console.log(a);  // 2
console.log(b);  // 1

let node = {
    type: "Identifier",
    name: "foo"
};

let { type, name, value1, value2 = true } = node;

console.log(type);    // "Identifier"
console.log(name);    // "foo"
console.log(value1);  // undefined  在解構(gòu)對(duì)象上沒(méi)有對(duì)應(yīng)的值
console.log(value2);  // true

let colors = [ "red" ];

let [ firstColor, secondColor, thirdColor = "blue"] = colors;

console.log(firstColor);   // "red"
console.log(secondColor);  // undefined
console.log(thirdColor);   // "blue"

let node = {
    type: "Identifier",
    name: "foo"
};

let { type: localType, name: localName = "bar" } = node;

console.log(localType);    // "Identifier"
console.log(localName );    // "bar"

type: localType語(yǔ)法的含義是讀取名為type的屬性并將其值存儲(chǔ)在變量localType中。

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            colomn: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};

let { loc: { start }} = node;

console.log(start.line);     // 1
console.log(start.column);   // 1

上面的解構(gòu)示例中，冒號(hào)前的標(biāo)識(shí)符代表在對(duì)象中的檢索位置，其右側(cè)為被賦值的變量名；如果冒號(hào)后面是花括號(hào)，則意味著要賦予的最終值嵌套在對(duì)象內(nèi)部更深的層級(jí)中。

也可以使用與對(duì)象名不同的局部變量：

...

let { loc: { start: localStart }} = node;
console.log(localStart.line);     // 1
console.log(localStart.column);   // 1

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];

let [ firstColor, [ secondColor ] ] = colors;

console.log(firstColor);   // "red"
console.log(secondClor);   // "green"

ES6的函數(shù)引入了不定參數(shù)，而在數(shù)組解構(gòu)語(yǔ)法中有個(gè)相似的概念：不定元素。
在數(shù)組中，可以通過(guò)...語(yǔ)法將數(shù)組中剩余的元素賦值給一個(gè)指定的變量：

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"

通過(guò)不定元素來(lái)實(shí)現(xiàn)數(shù)組克隆：

// 在ES5中克隆數(shù)組
var colors = [ "red", "green", "blue" ];
// concat()方法的設(shè)計(jì)初衷是連接兩個(gè)數(shù)組，不傳參數(shù)會(huì)返回當(dāng)前數(shù)組的副本
var clonedColors = colors.concat();

console.log(clonedColors);   // "[red,green,blue]"


// ES6通過(guò)不定元素來(lái)實(shí)現(xiàn)相同功能
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;

console.log(clonedColors);   // "[red,green,blue]"

不定元素必須為最后一個(gè)條目，在后面繼續(xù)添加逗號(hào)會(huì)導(dǎo)致程序拋出語(yǔ)法錯(cuò)誤。

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            colomn: 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

這種方法極為有效，尤其是當(dāng)你從JSON配置中提取信息時(shí)，不再需要遍歷整個(gè)結(jié)構(gòu)了。
請(qǐng)記住，解構(gòu)模式中l(wèi)oc:和range:僅代表它們?cè)?b>node對(duì)象中所處的位置（也就是該對(duì)象的屬性）。

當(dāng)定義一個(gè)接受大量可選參數(shù)的JavaScript函數(shù)時(shí)，我們通常會(huì)創(chuàng)建一個(gè)可選對(duì)象：

// 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
});

許多JavaScript庫(kù)中都有類(lèi)似的setCookie()函數(shù)，而在示例函數(shù)中，name和value是必需參數(shù)，而secure、path、domain和expires則不然，這些參數(shù)相對(duì)而言沒(méi)有優(yōu)先級(jí)順序，將它們列為額外的命名參數(shù)也不合適，此時(shí)為options對(duì)象設(shè)置同名的命名屬性是一個(gè)很好的選擇?，F(xiàn)在的問(wèn)題是，僅查看函數(shù)的聲明部分，無(wú)法辨別函數(shù)的預(yù)期參數(shù)，必須通過(guò)閱讀函數(shù)體才可以確定所有參數(shù)的情況。

如果將options定義為解構(gòu)參數(shù)，則可以更清晰地了解函數(shù)預(yù)期傳入的參數(shù)：

function setCookie(name, value, { secure, path, domain, expires }) {
    // 設(shè)置cookie的代碼
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
});

對(duì)于調(diào)用setCookie()函數(shù)的使用者而言，解構(gòu)參數(shù)變得更清晰了。

如果調(diào)用函數(shù)時(shí)不提供被解構(gòu)的參數(shù)會(huì)導(dǎo)致程序拋出錯(cuò)誤：

// 程序報(bào)錯(cuò)
setCookie("type", "js");

缺失的第三個(gè)參數(shù)，其值為undefined。而解構(gòu)參數(shù)只是將解構(gòu)聲明應(yīng)用在函數(shù)參數(shù)的一個(gè)簡(jiǎn)寫(xiě)方法，會(huì)導(dǎo)致程序拋出錯(cuò)誤。當(dāng)調(diào)用setCookie()函數(shù)時(shí)，JavaScript引擎實(shí)際上做了下面的事情：

function setCookie(name, value, options) {
    let { secure, path, domain, expires } = options;
    // 設(shè)置cookie的代碼
}

如果解構(gòu)賦值表達(dá)式右值為null或undefined，則程序會(huì)報(bào)錯(cuò)。因此若調(diào)用setCookie()函數(shù)時(shí)不傳入第3個(gè)參數(shù)，程序會(huì)報(bào)錯(cuò)。

如果解構(gòu)參數(shù)是必需的，大可忽略掉這個(gè)問(wèn)題；但如果希望將解構(gòu)參數(shù)定義為可選的，那就必須為其提供默認(rèn)值來(lái)解決這個(gè)問(wèn)題：

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

示例中為解構(gòu)參數(shù)添加一個(gè)新的對(duì)象作為默認(rèn)值，secure、path、domain及expires這些變量的值全部為undefined，這樣即使在調(diào)用setCookie()時(shí)未傳遞第3個(gè)參數(shù)，程序也不會(huì)報(bào)錯(cuò)。

當(dāng)然，我們也可以直接為解構(gòu)參數(shù)指定默認(rèn)值，就像在解構(gòu)賦值語(yǔ)句中做的那樣：

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

這種方法也有缺點(diǎn)：首先，函數(shù)聲明變得比以前復(fù)雜了其次，如果解構(gòu)參數(shù)是可選的，那么仍然要給它添加一個(gè)空對(duì)象作為參數(shù)，否則像setCookie("type", "js")這樣的調(diào)用會(huì)導(dǎo)致程序拋錯(cuò)。建議對(duì)于對(duì)象類(lèi)型的解構(gòu)參數(shù)，為其賦予相同解構(gòu)的默認(rèn)參數(shù)：

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

現(xiàn)在函數(shù)變得完整了，第一個(gè)對(duì)象字面量是解構(gòu)參數(shù)，第二個(gè)為默認(rèn)值。但這會(huì)造成非常多的代碼冗余，我們可以將默認(rèn)值提取到一個(gè)獨(dú)立對(duì)象中，從而消除這些冗余：

const setCookieDefaults = {
    secure = false,
    path = "/",
    domain = "example.com",
    expires = new Date(Date.now() + 360000000)
};

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

使用解構(gòu)參數(shù)后，不得不面對(duì)處理默認(rèn)參數(shù)的復(fù)雜邏輯，但它也有好的一面，如果改變默認(rèn)值，可以立即在setCookieDefaults中修改，改變的數(shù)據(jù)將自動(dòng)同步到所有出現(xiàn)過(guò)的地方。