ES6+ 解構賦值

1. 前言

本節我們會學習到 ES6 中的解構賦值語法，它是 JavaScript 中的一種表達式。在本節中你可以了解以下內容：

• 什么是解構賦值
• 數組的解構賦值
• 對象的解構賦值
• 如何解構嵌套對象和數組

解構賦值就是分解一個數據的結構，并從這數據解構中提取數據的過程，它可以從數組中取出值賦給變量或是將對象中的屬性提取出來賦給另一個對象的屬性。解構的目的是為了簡化提取數據的過程，增強代碼的可讀性。 把變量放在 [] 或者 {} 中來獲取目標對象上的對應的值。

2. 數組的解構賦值

2.1 基本用法

數組的解構賦值是，通過新建一個數組，數組內的變量和目標數組是一一對應的，按照索引的方式去獲取值，然后賦值給指定索引上的變量。在 ES6 之前，想獲取數組中的值，需要通過 Array[index] 的方式來獲取值，這種方式的好處在于可以獲取數組上指定索引的值，如果我們想把數組的每一項的值都取出來，賦給變量，這樣的寫法就顯得很笨拙：

var arr = [10, 20];
console.log(arr[0]);  // 10
console.log(arr[1]);  // 20

上面的取值方式是 ES6 之前的寫法，有了 ES6 的解構賦值就簡單了很多，下面看 ES6 解構賦值是怎么取數組的對應值的：

var [a, b] = [10, 20];
console.log(a);   // 10
console.log(b);   // 20

上面的例子中先聲明一個數組，分別在數組的 0 和 1 的索引位置上放置變量 a 和 b，對應著需要獲取數組的索引位置，這樣就可以從數組當中取到我們想要的值了。

2.2 默認值

在解構一個未知的數組時，需要對未能取的值的變量賦一個默認值，為了防止從數組中取出一個值為 undefined 的對象，可以在表達式的左邊的數組中為任意變量預設一個默認的值。

let [a=3, b=9] = [1];             // a=1 b=9
let [a, b = 1] = [10, ''];        // a=10, b=''
let [a, b = 1] = [10, undefined]; // a=10, b=1

Tips： 在 ES6 中，判斷一個數組中是否有值，使用嚴格相等運算符（===）來進行判斷，只有當一個數組成員嚴格等于 undefined，默認值才會生效。所以第三個 b 使用了默認值。

let [a = 1] = [null];             // a=null

我們知道 null==undefined 返回的是 true，null===undefined 返回的是 false。所以數組成員是 null，默認值就不會生效。

2.3 交換變量

在 ES6 之前如果我們想交換兩個變量的值時，我們需要借助一個中間的值來過渡，下面是要交換 a、b 值的過程：

var a = 1;
var b = 4;
var m = a;
a = b;
b = m // a=4, b=1

在交換 a、b 值時，需要借助中間的變量來中轉，使用 ES6 解構賦值就很簡單：

var a = 1;
var b = 4;
[a, b] = [b, a] // a=4, b=1

2.4 跳過某項值使用逗號隔開

在解構數組時，可以忽略不需要解構的值，可以使用逗號對解構的數組進行忽略操作，這樣就不需要聲明更多的變量去存值了：

var [a, , , b] = [10, 20, 30, 40];
console.log(a);   // 10
console.log(b);   // 40

上面的例子中，在 a、b 中間用逗號隔開了兩個值，這里怎么判斷間隔幾個值呢，可以看出逗號之間組成了多少間隔，就是間隔了多少個值。如果取值很少的情況下可以使用下標索引的方式來獲取值。

2.5 剩余參數中的使用

通常情況下，需要把剩余的數組項作為一個單獨的數組，這個時候我們可以借助展開語法把剩下的數組中的值，作為一個單獨的數組，如下：

var [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a);     // 10
console.log(b);     // 20
console.log(rest);  // [30, 40, 50]

在 rest 的后面不能有 逗號 不然會報錯，程序會認出你后面還有值。...rest 是剩余參數的解構，所以只能放在數組的最后，在它之后不能再有變量，否則則會報錯。

3. 對象的解構賦值

3.1 基本用法

對象的解構和數組基本類似，對象解構的變量是在 {} 中定義的。對象沒有索引，但對象有更明確的鍵，通過鍵可以很方便地去對象中取值。在 ES6 之前直接使用鍵取值已經很方便了：

var obj = { name: 'imooc', age: 7 };
var name = obj.name;  // imooc
var age = obj.age;    // 7

但是在 ES6 中通過解構的方式，更加簡潔地對取值做了簡化，不需要通過點操作增加額外的取值操作。

var obj = { name: 'imooc', age: 7 };
var { name, age } = obj;  // name: imooc, age: 7

在 {} 直接聲明 name 和 age 用逗號隔開即可得到目標對象上的值，完成聲明賦值操作。

3.2 默認值

對象的默認值和數組的默認值一樣，只能通過嚴格相等運算符（===）來進行判斷，只有當一個對象的屬性值嚴格等于 undefined，默認值才會生效。

var {a = 10, b = 5} = {a: 3};                 // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: undefined};   // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: null};        // a = 3, b = null

所以這里的第二項 b 的值是默認值，第三項的 null === undefined 的值為 false，所以 b 的值為 null。

3.3 重命名屬性

在對象解構出來的變量不是我們想要的變量命名，這時我們需要對它進行重命名。

var {a:x = 8, b:y = 3} = {a: 2};

console.log(x); // 2
console.log(y); // 3

這里把 a 和 b 的變量名重新命名為 x 和 y。

3.4 剩余參數中的使用

在對象的解構中也可以使用剩余參數，對對象中沒有解構的剩余屬性做聚合操作，生成一個新的對象。

var {a, c, ...rest} = {a: 1, b: 2, c: 3, d: 4}
console.log(a);     // 1
console.log(c);     // 3
console.log(rest);  // { b: 2, d: 4 }

對象中的 b、d 沒有被解構，通過剩余參數語法把沒有解構的對象屬性聚合到一起形成新的對象。

4. 解構字符串

當然字符串也是可以被解構的，字符串可以當作數組被解構。

const [a, b, c, d, e] = 'imooc';
console.log(a);   // "i"
console.log(b);   // "m"
console.log(c);   // "o"
console.log(d);   // "o"
console.log(e);   // "c"

字符串可以被看成類數組的東西，類似數組的對象都有一個 length 屬性，字符串也可以被當作對象來解構，但是由于字符串方法只有 length 屬性，所以只能解構出 length 的值。

let {length : len} = 'hello';
console.log(len); // 5

5. 解構復雜的數據結構

了解了數組和對象的解構，下面我們看下對于復雜數據解構應該如何去解構呢？看下面的例子：

var data = {
  a: 1,
  arr: [
    {
      b: 2,
      c: 3
    }
  ]
}

var { 
  a: newA,
  arr: [
    {
      b: newB
    }
  ]
} = data;
console.log(newA, newB) // 1, 2

上面的例子中 data 的數據解構還算是比較復雜的，對于解構這種既有對象又有數組的數據解構，我們要先聲明一個和目標對象有著相同的數據嵌套，才能去拆解目標對象。這里解構的是 data 中的 a 和 b 的值，而且把 a 和 b 重命名為 newA 和 newB。

6. 小結

本節講解了 ES6 解構賦值的使用方法，總結下來一共有以下幾點：

1. 解構賦值一般針對對象和數組，如果解構對象是 undefined 或是 null 都會報錯；
2. 默認值的生效條件是，只有當解構的對象的值是嚴格模式下的 undefined 的情況下，默認值才會生效；
3. 可以不借助中間變量來交換兩個值；
4. 在解構復雜的數據解構時，注意聲明的對象要和目標的對象有著相同的解構形式，才能去解構目標對象。