摘要：基本原理解構(gòu)是提供的語(yǔ)法糖，其實(shí)內(nèi)在是針對(duì)可迭代對(duì)象的接口，通過(guò)遍歷器按順序獲取對(duì)應(yīng)的值進(jìn)行賦值。屬性值返回一個(gè)對(duì)象的無(wú)參函數(shù)，被返回對(duì)象符合迭代器協(xié)議。迭代器協(xié)議定義了標(biāo)準(zhǔn)的方式來(lái)產(chǎn)生一個(gè)有限或無(wú)限序列值。

更多系列文章請(qǐng)看

// 基礎(chǔ)類(lèi)型解構(gòu)
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3

// 對(duì)象數(shù)組解構(gòu)
let [a, b, c] = [{name: "1"}, {name: "2"}, {name: "3"}]
console.log(a, b, c) // {name: "1"}, {name: "2"}, {name: "3"}

// ...解構(gòu)
let [head, ...tail] = [1, 2, 3, 4]
console.log(head, tail) // 1, [2, 3, 4]

// 嵌套解構(gòu)
let [a, [b], d] = [1, [2, 3], 4]
console.log(a, b, d) // 1, 2, 4

// 解構(gòu)不成功為undefined
let [a, b, c] = [1]
console.log(a, b, c) // 1, undefined, undefined

// 解構(gòu)默認(rèn)賦值
let [x = 1] = [undefined];// x=1;
let [x = 1] = [null];// x=null; // 數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined 因?yàn)閤用y做默認(rèn)值時(shí)，y還沒(méi)有聲明

// 對(duì)象屬性解構(gòu)
let { f1, f2 } = { f1: "test1", f2: "test2" }
console.log(f1, f2) // test1, test2

// 可以不按照順序，這是數(shù)組解構(gòu)和對(duì)象解構(gòu)的區(qū)別之一
let { f2, f1 } = { f1: "test1", f2: "test2" }
console.log(f1, f2) // test1, test2

// 解構(gòu)對(duì)象重命名
let { f1: rename, f2 } = { f1: "test1", f2: "test2" }
console.log(rename, f2) // test1, test2

// 嵌套解構(gòu)
let { f1: {f11}} = { f1: { f11: "test11", f12: "test12" } }
console.log(f11) // test11

// 默認(rèn)值
let { f1 = "test1", f2: rename = "test2" } = { f1: "current1", f2: "current2"}
console.log(f1, rename) // current1, current2

// String
let [ a, b, c, ...rest ] = "test123"
console.log(a, b, c, rest) // t, e, s, [ "t", "1", "2", "3" ]
let {length : len} = "hello"; // en // 5

// number
let {toString: s} = 123;
s === Number.prototype.toString // true

// boolean
let {toString: s} = true;
s === Boolean.prototype.toString // true

// Map
let [a, b] = new Map().set("f1", "test1").set("f2", "test2")
console.log(a, b) // [ "f1", "test1" ], [ "f2", "test2" ]

// Set
let [a, b] = new Set([1, 2, 3])
console.log(a, b) // 1, 2

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

注意這里是淺拷貝

let x = 1;
let y = 2;
[x, y] = [y, x];

var map = new Map();
map.set("first", "hello");
map.set("second", "world");

for (let [key, value] of map) {
    console.log(key + " is " + value);
}

function add(a,b,{c,d}){
    // ...
}
add(1,2,{});
add(1,2)//Uncaught TypeError: Cannot destructure property `c` of "undefined" or "null"

解構(gòu)賦值的規(guī)則是，若等號(hào)右邊的值不是對(duì)象或者數(shù)組，就會(huì)先將其轉(zhuǎn)化成對(duì)象。由于undefined和null無(wú)法轉(zhuǎn)化成對(duì)象，所以對(duì)其進(jìn)行解構(gòu)賦值時(shí)會(huì)報(bào)錯(cuò)。

它實(shí)際上是這樣運(yùn)行的:

function add(a, b, options) {
    let { c,d } = options;
    // ...
}

由于add(1,2)沒(méi)有傳options導(dǎo)致異常，如果我們options是選填的那么可以像下面這樣

function add(a,b,{c,d}={}){
    // ...
}

當(dāng)然大部分情況我們可以給默認(rèn)值

function move ({x:0,y:0}={}){}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move ({x,y}={x:0,y:0}){}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代碼是為函數(shù)move的參數(shù)指定默認(rèn)值，而不是為變量x和y指定默認(rèn)值，所以會(huì)得到與前一種寫(xiě)法不同的結(jié)果。
undefined就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值。

[1, undefined, 3].map((x = "yes") => x);

解構(gòu)是ES6提供的語(yǔ)法糖，其實(shí)內(nèi)在是針對(duì)可迭代對(duì)象的Iterator接口，通過(guò)遍歷器按順序獲取對(duì)應(yīng)的值進(jìn)行賦值。這里需要提前懂得ES6的兩個(gè)概念：

Iterator

可迭代對(duì)象

Iterator是一種接口，為各種不一樣的數(shù)據(jù)解構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)解構(gòu)只要有Iterator接口，就能通過(guò)遍歷操作，依次按順序處理數(shù)據(jù)結(jié)構(gòu)內(nèi)所有成員。ES6中的for of的語(yǔ)法相當(dāng)于遍歷器，會(huì)在遍歷數(shù)據(jù)結(jié)構(gòu)時(shí)，自動(dòng)尋找Iterator接口。
Iterator作用：

為各種數(shù)據(jù)解構(gòu)提供統(tǒng)一的訪問(wèn)接口

使得數(shù)據(jù)解構(gòu)能按次序排列處理

可以使用ES6最新命令 for of進(jìn)行遍歷

function makeIterator(array) {
    var nextIndex = 0
    return {
      next: function() {
        return nextIndex < array.length ?
            {value: array[nextIndex++]} :
            {done: true}
        }
    };
  }

var it = makeIterator([0, 1, 2])
console.log(it.next().value) // 0
console.log(it.next().value) // 1
console.log(it.next().value) // 2

可迭代對(duì)象是Iterator接口的實(shí)現(xiàn)。這是ECMAScript 2015的補(bǔ)充，它不是內(nèi)置或語(yǔ)法，而僅僅是協(xié)議。任何遵循該協(xié)議點(diǎn)對(duì)象都能成為可迭代對(duì)象?？傻鷮?duì)象得有兩個(gè)協(xié)議：可迭代協(xié)議和迭代器協(xié)議。

可迭代協(xié)議：對(duì)象必須實(shí)現(xiàn)@@iterator方法。即對(duì)象或其原型鏈上必須有一個(gè)名叫Symbol.iterator的屬性。該屬性的值為無(wú)參函數(shù)，函數(shù)返回迭代器協(xié)議。

迭代器協(xié)議：定義了標(biāo)準(zhǔn)的方式來(lái)產(chǎn)生一個(gè)有限或無(wú)限序列值。其要求必須實(shí)現(xiàn)一個(gè)next()方法，該方法返回對(duì)象有done(boolean)和value屬性。

通過(guò)以上可知，自定義數(shù)據(jù)結(jié)構(gòu)，只要擁有Iterator接口，并將其部署到自己的Symbol.iterator屬性上，就可以成為可迭代對(duì)象，能被for of循環(huán)遍歷。

String、Array、Map、Set等原生數(shù)據(jù)結(jié)構(gòu)都是可迭代對(duì)象，可以通過(guò)for of循環(huán)遍歷它。故可以通過(guò)ES6解構(gòu)語(yǔ)法糖依次獲取對(duì)應(yīng)的值。

// String
let str = "test"
let iterFun = str[Symbol.iterator]
let iterator = str[Symbol.iterator]()
let first = iterator.next() // 等效于 let [first] = "test"
console.log(iterFun, iterator, first)
// 打印
// [Function: [Symbol.iterator]], {}, { value: "t", done: false }

// Array
let arr = ["a", "b", "c"];
let iter = arr[Symbol.iterator]();

// 以下等效于 let [first, second, third, four] = ["a", "b", "c"]
let first = iter.next() // { value: "a", done: false }
let second = iter.next() // { value: "b", done: false }
let third = iter.next() // { value: "c", done: false }
let four = iter.next() // { value: undefined, done: true }

當(dāng)我們有解構(gòu)賦值的形式來(lái)做函數(shù)參數(shù)時(shí)，執(zhí)行的時(shí)候會(huì)增加很多中間變量，內(nèi)存也會(huì)比之前高。但是業(yè)務(wù)代碼還是更加關(guān)注可讀性和可維護(hù)性。如果你寫(xiě)的是庫(kù)代碼，可以嘗試這種優(yōu)化，把參數(shù)展開(kāi)后直接傳遞，到底能帶來(lái)多少性能收益還得看最終的基準(zhǔn)測(cè)試。

ES6 的解構(gòu)賦值前每次都創(chuàng)建一個(gè)對(duì)象嗎？會(huì)加重 GC 的負(fù)擔(dān)嗎？