摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。

1、解構賦值簡介

官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。

舉個例子，想獲取數組中的前三個元素，通常會這么寫：

var arr =[111,222,333];
var first = arr[0];
var second = arr[1];
var third = arr[2];

如果使用解構賦值的特性，將會使等效的代碼變得更加簡潔并且可讀性更高：

let [first, second, third] = arr;

本質上，這種寫法屬于“模式匹配”、“映射關系”。

只要等號兩邊的模式相同，一一對應，左邊的變量就會被賦予右邊對應的值。

這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更為條理清晰。

當然，世間萬物并不是完美的，例如下面的例子：

let [x, y] = ["a"];
x // "a"
y // undefined

注意：左邊數組中的 y 沒有找到右邊數組中對應值，解構不成功，變量 y 的值就等于undefined。

我們也可以給解構的對象設置一個默認值

let [x, y="b"] = ["a"];
x // "a"
y // "b"

左邊數組中的 y 的有了默認值 “b”。

把解構賦值說的更通俗點，有點類似于“庖丁解牛” 。庖丁心里先設想把牛（Array、Object等）分解成很多塊，然后按照規劃好的想法，一刀刀對應起來，就把牛分解了。

2、數組的解構賦值

2.1 數組解構賦值特點

// ES6 之前
var a=1; 
var b=2; 
var c=3;

// ES6 之后
let [a,b,c] = [1,2,3];

這樣可以用簡單的方式將數組的值分別賦值到多個變量中。

數組的解構賦值特點：根據數據的下標來賦值的，有次序。

本質上，只要等號兩邊模式一致，左邊變量即可獲取右邊對應位置的值。

2.2 可以對任意深度的嵌套數組進行解構

能夠非常迅速的獲取二維數組、三維數組，甚至多維數組中的值

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz);  // 3

2.3 不需要匹配的位置可以置空

[,,third] = [1, 2, 3];
 console.log(third);  // 3

2.4 使用...擴展運算符，匹配余下的所以值，形成一個數組

var [head, ...body] = [1, 2, 3, 4];
 console.log(body);  // [2, 3, 4]

這個"三點式"運算符我們用的比較多，比如用在數組合并上，

//ES5
var arr1 = [8]
var arr2 = [9,11,12,13]
arr1.push(arr2);
//[8,[9,11,12,13]]
Array.prototype.push.apply(arr1,arr2);
//[8,9,11,12,13]

// ES6
arr1.push(...arr2);
console.log(arr1)
//[8,9,11,12,13]

大家可以看到ES6明顯寫起來簡潔很多。

3、對象的解構賦值

3.1 對象的解構賦值特點

數組的元素是按次序排列的，變量的取值由它的位置決定；

而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

let { a, b } = { a: "111", z: "222" };
a // "111"
b // undefined

上面的例子中，變量名與屬性名不一致，可以改寫成下面這樣：

let { a, z:b } = { a: "111", z: "222" };
a // "111"
b // "222"

對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。

3.2 可以對任意深度的嵌套對象進行解構

let itemObj = {
   arr: [
      "aaa",
      { secondLevel: "bbb" }
    ]
 };
 let { arr: [firstLevel, { secondLevel }] } = itemObj;
 console.log(firstLevel); // "aaa"
 console.log(secondLevel); // "bbb"

3.3 可以自定義屬性名稱

var {name, id: ID} = { name: "jack", id: 1    };

ID // 1
id // Uncaught ReferenceError: id is not defined

但要注意的是被賦值的只是我們自定義的屬性名稱，匹配的模式（項）并未被賦值

4、字符串解構

字符串也可以解構賦值，字符串被轉換成了一個類似數組的對象。模式能夠匹配起來，如：

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let { length：len } = "hello";
console.log(len);  //5 (長度為5)

5、數值和布爾值的解構賦值

解構賦值的規則是：只要等號右邊的值不是對象或數組，就先將其轉為對象。如果轉換之后的對象或原對象擁有Iterator接口，則可以進行解構賦值，否則會報錯。

// 數值和布爾值的包裝對象都有toString屬性
let {toString: str} = 111;
str === Number.prototype.toString // true

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

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

以上的數組和布爾值會轉換成對象，toString模式匹配上了對象的toString屬性，所以解構成功。

而null或undefined卻不能轉換成此類對象，所以報錯。

ES6中引入了Iterator迭代器，集合Set或Generator生成器函數等都部署了這個Iterator接口，所以也可以用來進行解構賦值。Set的解構賦值例子如下：

var [a, b, c] = new Set([1, 2, 3]);
a // 1
b // 2
c // 3

6、圓括號的用法

如果在解構之前就已經定義了對象

let obj;
{obj}={obj:"James"};
console.log("James");  //報錯

原因：

大括號{位于行首，匹配了}之后 JS引擎 就會認為 { obj } 是一個代碼塊，所以等號就出問題了，解決方式是在行首放個括號(，即外包裹一層括號（）

let obj;
（{obj}={obj:"James"}）;
console.log("James");  //James

括號的出現，讓整個解構賦值的結構被看做一個代碼塊，而內部的 { obj } 模式則可以正常匹配到。

7、實際用途

7.1 交換變量的值

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x);  //2
console.log(y);  //1

7.2 函數參數定義

// 參數是一組有次序的值
function foo([width,height,left,right]) { 
    //... 
}
foo([100, 200, 300, 300])

// 參數是一組無次序的值
function foo({width,height,left,right}){
     // ...
}
foo([left:300, width:100, right:300, height:200,])

為了實現設計良好的 API，通常的做法是為函數為函數設計一個對象作為參數，然后將不同的實際參數作為對象屬性，以避免讓 API 使用者記住多個參數的使用順序。

我們可以使用解構特性來避免這種問題，當我們想要引用它的其中一個屬性時，大可不必反復使用這種單一參數對象。

7.3 配置對象參數

jQuery.ajax = function (url, {
      async = true,
      beforeSend = noop,
      cache = true,
      complete = noop,
      crossDomain = false,
      global = true,
      // ... 更多配置 
 }) {
      // ... 
 };

如此一來，我們可以避免對配置對象的每個屬性都重復var foo = config.foo || theDefaultFoo;這樣的操作。

7.4從函數返回多個值

// 返回一個數組
function foo() {
  return [1, 2, 3];
}
let [a, b, c] = foo();

// 返回一個對象
function foo2() {
  return {
    a: 1,
    b: 2
  };
}
let { a, b } = foo2();

7.5 引入模塊的指定方法

加載模塊時，往往需要指定輸入那些方法。解構賦值使得輸入語句非常清晰。

如果項目中只用到了element-ui中的Loading模塊，可以這么寫：

import { Loading} from "element-ui"

8、總結

8.1 解構賦值的定義

解構賦值，即對某種結構進行解析，然后將解析出來的值賦值給相關的變量，常見的有數組、對象、字符串的解構賦值等。

在語法上，就是賦值的作用，解構為（左邊一種解構。右邊一種解構，左右一一對應進入賦值）。

8.2 解構賦值的分類

1.左右為數組即為數組解構賦值。

2.左右為對象即為對象解構賦值。

3.左邊是數組，右邊是字符串，為字符串解構賦值。

4.布爾值解構賦值為字符串的一種。

5.函數參數解構賦值即為數組解構賦值在函數參數的一種應用。

6.數值解構賦值為字符串解構賦值的一種。

8.3 解構賦值的優勢

變量的解構賦值就是一種寫法，掌握了這種寫法可以讓我們在書寫 javascript 代碼時可以更加的簡單，迅捷。

在很多獨立細小的方面，解構賦值都非常有用。這些新的特性和微小的改進結合起來，它終將會影響你工作中的

每一個項目。