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

1、解構(gòu)賦值簡介

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

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

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

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

let [first, second, third] = arr;

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

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

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

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

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

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

我們也可以給解構(gòu)的對象設置一個默認值

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

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

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

2、數(shù)組的解構(gòu)賦值

2.1 數(shù)組解構(gòu)賦值特點

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

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

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

數(shù)組的解構(gòu)賦值特點：根據(jù)數(shù)據(jù)的下標來賦值的，有次序。

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

2.2 可以對任意深度的嵌套數(shù)組進行解構(gòu)

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

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 使用...擴展運算符，匹配余下的所以值，形成一個數(shù)組

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

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

//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、對象的解構(gòu)賦值

3.1 對象的解構(gòu)賦值特點

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

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

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

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

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

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

3.2 可以對任意深度的嵌套對象進行解構(gòu)

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、字符串解構(gòu)

字符串也可以解構(gòu)賦值，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。模式能夠匹配起來，如：

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、數(shù)值和布爾值的解構(gòu)賦值

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

// 數(shù)值和布爾值的包裝對象都有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

以上的數(shù)組和布爾值會轉(zhuǎn)換成對象，toString模式匹配上了對象的toString屬性，所以解構(gòu)成功。

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

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

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

6、圓括號的用法

如果在解構(gòu)之前就已經(jīng)定義了對象

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

原因：

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

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

括號的出現(xiàn)，讓整個解構(gòu)賦值的結(jié)構(gòu)被看做一個代碼塊，而內(nèi)部的 { obj } 模式則可以正常匹配到。

7、實際用途

7.1 交換變量的值

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

7.2 函數(shù)參數(shù)定義

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

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

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

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

7.3 配置對象參數(shù)

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

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

7.4從函數(shù)返回多個值

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

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

7.5 引入模塊的指定方法

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

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

import { Loading} from "element-ui"

8、總結(jié)

8.1 解構(gòu)賦值的定義

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

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

8.2 解構(gòu)賦值的分類

1.左右為數(shù)組即為數(shù)組解構(gòu)賦值。

2.左右為對象即為對象解構(gòu)賦值。

3.左邊是數(shù)組，右邊是字符串，為字符串解構(gòu)賦值。

4.布爾值解構(gòu)賦值為字符串的一種。

5.函數(shù)參數(shù)解構(gòu)賦值即為數(shù)組解構(gòu)賦值在函數(shù)參數(shù)的一種應用。

6.數(shù)值解構(gòu)賦值為字符串解構(gòu)賦值的一種。

8.3 解構(gòu)賦值的優(yōu)勢

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

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

每一個項目。