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

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

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

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

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

ES6解構(gòu)的實(shí)現(xiàn)，實(shí)際上是利用了我們早已熟悉的對象和數(shù)字字面量的語法。

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

let { type, name } = node;

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

可見，只要在賦值操作的左邊放置一個對象字面量就可以了。type和name都是局部聲明的變量，也是用來從options對象讀取相應(yī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"兩個值，分別存儲在變量firstColor和secondColor中。

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

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

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

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

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

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

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

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

解構(gòu)賦值常常用在給函數(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)賦值可以很方便地交換兩個變量的值。
先看看ES5，我們交換兩個變量的做法：

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è)是為交換過程創(chuàng)建的臨時數(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)對象上沒有對應(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語法的含義是讀取名為type的屬性并將其值存儲在變量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)示例中，冒號前的標(biāo)識符代表在對象中的檢索位置，其右側(cè)為被賦值的變量名；如果冒號后面是花括號，則意味著要賦予的最終值嵌套在對象內(nèi)部更深的層級中。

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

...

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)語法中有個相似的概念：不定元素。
在數(shù)組中，可以通過...語法將數(shù)組中剩余的元素賦值給一個指定的變量：

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"

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

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

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


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

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

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

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配置中提取信息時，不再需要遍歷整個結(jié)構(gòu)了。
請記住，解構(gòu)模式中l(wèi)oc:和range:僅代表它們在node對象中所處的位置（也就是該對象的屬性）。

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

// options的屬性表示其他參數(shù)
function setCookie(name, value, options) {
    options = options || {};
    
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
        
    // 設(shè)置cookie的代碼
}

// 第三個參數(shù)映射到options中
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

許多JavaScript庫中都有類似的setCookie()函數(shù)，而在示例函數(shù)中，name和value是必需參數(shù)，而secure、path、domain和expires則不然，這些參數(shù)相對而言沒有優(yōu)先級順序，將它們列為額外的命名參數(shù)也不合適，此時為options對象設(shè)置同名的命名屬性是一個很好的選擇?，F(xiàn)在的問題是，僅查看函數(shù)的聲明部分，無法辨別函數(shù)的預(yù)期參數(shù)，必須通過閱讀函數(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
});

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

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

// 程序報錯
setCookie("type", "js");

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

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

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

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

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

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

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

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

這種方法也有缺點(diǎn)：首先，函數(shù)聲明變得比以前復(fù)雜了其次，如果解構(gòu)參數(shù)是可選的，那么仍然要給它添加一個空對象作為參數(shù)，否則像setCookie("type", "js")這樣的調(diào)用會導(dǎo)致程序拋錯。建議對于對象類型的解構(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òu)參數(shù)，第二個為默認(rèn)值。但這會造成非常多的代碼冗余，我們可以將默認(rèn)值提取到一個獨(dú)立對象中，從而消除這些冗余：

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ù)后，不得不面對處理默認(rèn)參數(shù)的復(fù)雜邏輯，但它也有好的一面，如果改變默認(rèn)值，可以立即在setCookieDefaults中修改，改變的數(shù)據(jù)將自動同步到所有出現(xiàn)過的地方。