摘要：在可遍歷的量中使用數組模型數組解構使用一個迭代器來獲取數據源中的元素。所以，數組解構能夠在上工作的迭代器總是按照元素插入的順序將元素返回，所以上述的解構返回的結果總是相同的。

解構賦值（destructuring assignment）語法是一個Javascript表達式，這種語法能夠更方便的提取出 Object 或者 Array 中的數據。這種語法可以在接受提取的數據的地方使用，比如一個表達式的左邊。有明確的語法模式來告訴我們如何使用這種語法提取需要的數據值。

解構 Object:

const obj = { first: "Jane", last: "Doe" };
const {first: f, last: l} = obj;
// f = "Jane"; l = "Doe"

// {prop} is short for {prop: prop}
const {first, last} = obj;
// first = "Jane"; last = "Doe"

解構能幫助更好地處理方法返回的對象：

const obj = { foo: 123 };

const {writable, configurable} = Object.getOwnPropertyDescriptor(obj, "foo");

console.log(writable, configurable); // true true

解構數組，對所有可遍歷的值有效。

let foo = ["one", "two", "three"];

let [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

const iterable = ["a", "b"];
const [x, y] = iterable;
// x = "a"; y = "b"

[x, y] = iterable;

// window.x = "a"; window.y = "b";

同樣的，解構數組也能幫助我們更好地處理函數返回值:

const [all, year, month, day] =
    /^(ffffdd)-(dd)-(dd)$/
    .exec("2999-12-31");

而且，你也可以忽略你不感興趣的返回值：

function f() {
  return [1, 2, 3];
}

let [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

你也可以忽略全部返回值，不過似乎沒啥用：

[,,] = f();

當解構一個數組時，可以使用剩余模式（拓展語句，Spread operator），將數組剩余部分賦值給一個變量。

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

解構可以在下面這些情景中使用，只展現了數組模式的演示，對象模式也是如此。

// 變量聲明:
const [x] = ["a"];
let [x] = ["a"];
var [x] = ["a"];

// 賦值: 下面這種情況將會在全局變量上添加一個 x 屬性，值為‘a‘
[x] = ["a"]; 

// 參數的定義:
function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

function f([x]) { ··· }
f(["a"]);

也可以在 for-of 循環中使用：

const arr = ["a", "b"];
for (const [index, element] of arr.entries()) {
    console.log(index, element);
}
// Output:
// 0 a
// 1 b

在解構中，有下面兩部分參與：

Destructuring source: 解構的源，將要被解構的數據，比如解構賦值表達式的右邊部分。

Destructuring target: 解構的目標，比如解構復制表達式的左邊部分。

解構的目標可以是下面三個的任意一個：

賦值對象，Assigment Patterns。例如 x

賦值對象通常來說是一個變量。但是在解構賦值中，你有更多的選擇，稍后會講到。

對象模型，Object Patterns。比如：{ first: ?pattern?, last: ?pattern? }

數組模型，Object Patterns。比如：[ ?pattern?, ?pattern? ]

可以任意嵌套模型，而且是可以非常任性的嵌套。

const obj = { a: [{ foo: 123, bar: "abc" }, {}], b: true };
const { a: [{foo: f}] } = obj; // f = 123

在一個表達式pattern = someValue中，pattern是如何訪問someValue的呢？

在訪問屬性之前，object pattern 將解構的源數據（destructuing source）轉換成對象。

const {length : len} = "abc"; // len = 3
const {toString: s} = 123; // s = Number.prototype.toString

在這個過程中，強制轉換成對象的過程不是通過Object()方法，而是通過內置的操作方法toObject()。這兩個操作處理undefined和null的方式不太一樣。

Object()方法將原始類型值轉換成包裝類型對象（wrapper object），原來的值原封不動。

> typeof Object("abc")
"object"

> var obj = {};
> Object(obj) === obj
true

也會將undefined 和 null 轉換成一個空的對象。

> Object(undefined)
{}
> Object(null)
{}

對比之下，當遇到undefined和null的時候，toObject()方法則會拋出一個錯誤。所以下面的解構是失敗的：

const { prop: x } = undefined; // TypeError
const { prop: y } = null; // TypeError

因此，你可以使用空對象模型{}來檢查一個值是否被強制轉換成了一個對象。正如前面提到的規則，undefined和null將會拋出錯誤

({} = [true, false]); // OK, Arrays are coercible to objects
({} = "abc"); // OK, strings are coercible to objects

({} = undefined); // TypeError
({} = null); // TypeError

表達式兩邊的括號是必須的，因為在 JavaScript 中，聲明不能以花括號開始。

數組解構使用一個迭代器來獲取數據源中的元素。因此，你可以對任何可以遍歷的值使用數組解構。

字符串是可遍歷的：

const [x, ...y] = "abc"; // x="a"; y=["b", "c"]

我們無法通過索引訪問 Set中的元素，但是可以通過迭代器。所以，數組解構能夠在 Sets上工作：

const [x,y] = new Set(["a", "b"]); // x="a"; y="b’;

Set的迭代器總是按照元素插入的順序將元素返回，所以上述的解構返回的結果總是相同的。

如果一個值有一個 key 為Symbol.iterator的方法，這個方法返回的是一個對象，那么這個值是可以遍歷的。如果被解構的值不能遍歷的，那么“數組解構”會拋出一個TypeError錯誤。

let x;
[x] = [true, false]; // OK, Arrays are iterable
[x] = "abc"; // OK, strings are iterable
[x] = { * [Symbol.iterator]() { yield 1 } }; // OK, iterable

[x] = {}; // TypeError, empty objects are not iterable
[x] = undefined; // TypeError, not iterable
[x] = null; // TypeError, not iterable

可以用一個空的數組模型[]來檢查值是不是可遍歷的:

[] = {}; // TypeError, empty objects are not iterable
[] = undefined; // TypeError, not iterable
[] = null; // TypeError, not iterable

默認值是可選的，在數據源中找不到對應的值時，如果設置了默認值，則匹配這個默認值作為匹配結果，否則返回 undefined。

const [x=3, y] = []; // x = 3; y = undefined。
const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

當解構模式有匹配結果，且匹配結果是 undefined 時，也會使用默認值作為返回結果：

const [x=1] = [undefined]; // x = 1
const {prop: y=2} = {prop: undefined}; // y = 2

也就是說下面的解構：

const {prop: y=someFunc()} = someValue;

相當于：

let y;
if (someValue.prop === undefined) {
    y = someFunc();
} else {
    y = someValue.prop;
}

使用console.log()可以觀察到：

> function log(x) { console.log(x); return "YES" }
> const [a=log("hello")] = [];
> a
"YES"
> const [b=log("hello")] = [123];
> b
123

在第二個解構中，默認值沒有觸發，并且log()沒有被調用。

默認值可以引用模式中的任何變量，包括相同模式中的其他變量：

const [x=3, y=x] = [];     // x=3; y=3
const [x=3, y=x] = [7];    // x=7; y=7
const [x=3, y=x] = [7, 2]; // x=7; y=2

但是，變量的順序很關鍵，從左到右，先聲明的變量不能引用后聲明的變量，也就是左邊的不能引用右邊的。

const [x=y, y=3] = []; // ReferenceError

到目前為止，我們所看到的都是模式中變量的默認值，我們也可以為模式設置默認值。

const [{prop: x} = {}] = [];

如果整個模式沒有匹配結果，則使用{}作為數據源來匹配。

const { prop: x } = {}; // x = undefined

上面的例子中，x 為 undefined 可能還是不夠直觀。看下面這個例子：

const [{prop: x} = {props: "abc"}] = []; // x=abc

如果屬性值是一個變量，和屬性的 key相同，就可以忽略這個 key:

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8

// 等價于
const { x: x, y: y } = { x: 11, y: 8 };

如果把表達式放入方括號中，可以用這個表達式聲明屬性的鍵：

const FOO = "foo";
const { [FOO]: f} = {fooL 123}; // f = 123

這也使得可以使用 symbols 來做屬性的鍵：

// Create and destructure a property whose key is a symbol
const KEY = Symbol();
const obj = { [KEY]: "abc" };
const { [KEY]: x } = obj; // x = "abc"

// Extract Array.prototype[Symbol.iterator]
const { [Symbol.iterator]: func } = [];
console.log(typeof func); // function

在解構的過程中可以跳過一些元素：

const [,,x,y] = [1,2,3,4]; // x= 3 y = 4;

剩余運算符可以將一個可遍歷對象中剩余的元素提取到一個數組中。如果這個運算符在數組模式中使用，運算符必須放在最后：

const [x, ...y] = [1,2,3,4]; // x=1; y=[2,3,4];

要注意的時，拓展運算符（spread operator）與剩余操作符有著相同的語法-三個點。但是它們之間有區別：前者將數組變成多個元素；后者則用來解構和提取數據，多個元素壓縮成一個元素。

如果運算符找不到任何元素，將會匹配一個空的數組，永遠不會返回undefined 或者 null。例如：

const [x, y, ...z] = ["a"]; // x="a"; y=undefined; z

操作符不一定非要是一個變量，也可以使用模式：

const [x, ...[y, z]] = ["a", "b", "c"]; // x = "a"; y = "b"; z = "c"

在使用解構的時候，有兩點要考慮清楚：

不能使用大括號作為聲明語句的開頭；

在解構的過程中，可以申明變量或者分配給變量，但是不能同時這么做；

在 for-of 中使用解構：

const map = new Map().set(false, "no").set(true, "yes");
for (const [key, value] of map) {
  console.log(key + " is " + value);
}

使用解構交換兩個變量的值：

[a, b] = [b, a];

或者：

[a, b, c] = [c, a, b];

還可以分割數據：

const [first, ...rest] = ["a", "b", "c"]; // first = "a"; rest = ["b", "c"]

處理方法返回的數組更加方便：

const [all, year, month, day] = /^(ffffdd)-(dd)-(dd)$/.exec("2999-12-31");

const cells = "Jane	Doe	CTO"
const [firstName, lastName, title] = cells.split("	");
console.log(firstName, lastName, title);

要注意的一點是：exec等一些方法可能會返回 null，導致程序拋出錯誤TypeError，此時需要添加一個默認值：

const [, year, month, day] = /^(ffffdd)-(dd)-(dd)$/.exec(someStr) || [];

參考資料：

Exploringjs Destructuring

MDN Destructing assignment