摘要：數(shù)組的解構(gòu)賦值規(guī)定允許按照一定模式，從數(shù)組和對象中提取值對變量進行賦值，我們稱之為解構(gòu)。的規(guī)則是，只要有可能導致解構(gòu)的歧義，就不得使用圓括號。

ES6規(guī)定：允許按照一定模式，從數(shù)組和對象中提取值對變量進行賦值，我們稱之為解構(gòu)。
以前賦值只能直接指定值

let a = 1;
let b = 2;
let c = 3;

ES6允許以下這種做法

let [a, b, c] = [1, 2, 3];

上面代碼表示可以從數(shù)組中抽取值賦給對應位置的變量
當然如果解構(gòu)不成功，變量的值就為undefined

let [foo] = [];
let [bar, line] = [1];
//foo是undefined bar是1 line是undefined

如果等號右邊的不是數(shù)組（或者說不可遍歷的解構(gòu)），就會報錯

//以下都會報錯
let [foo] = null;
let [foo] = undefined;
let [foo] = 1;
let [foo] = NaN;
let [foo] = false;
let [foo] = {};

默認值
數(shù)組解構(gòu)可以賦默認值
當數(shù)組解構(gòu)進行賦值的時候會先判斷對應位置上是否有值（判斷規(guī)則是嚴格等于===），如果不存在的話默認值才會生效

let [foo] = [true];//foo = true;
let [x, y = "b"] = ["a"];//x = "a"; y = "b";
let [x, y = "b"] = ["a", undefined];//x = "a"; y = "b";
let [x, y = "b"] = ["a", null];//x = "a"; y = null;

若果默認值是一個表達式，那么這個表達式是惰性的，只有在用到的時候才會求值

function getFoo() {
    console.log("log: doing");
    return "foo";
}
let [x = getFoo()] = [1];//getFoo并未執(zhí)行，因為解構(gòu)的時候發(fā)現(xiàn)有對應的值 x = 1

當然默認值可以取已經(jīng)存在的變量的值，記住是已經(jīng)存在的。

let [x = 0, y = x] = [];//x = 0; y = 0;
let [x = y, y = 0] = [];//報錯因為x需要默認值的時候y還不存在
let [x = y, y = 0] = [1];//x = 1;y = 0;因為x能取到值 所以默認值的賦值操作壓根不會執(zhí)行

第一部分我們知道數(shù)組解構(gòu)賦值是按照順序來的，對象就不一樣了，對象的屬性并沒有順序，對象的解構(gòu)賦值是按照屬性名來的。
變量名與屬性名一樣的情況：

let {foo, bar, line} = {foo: "Hello", bar: "ES6"};
foo //"Hello"
bar //"ES6"
line//undefined

變量名與屬性名不一樣的情況：

let {foo: fooTest} = {foo: "Jason"};
fooTest//"Jason"

當然同名的完全可以理解成

let {foo: foo, bar: bar, line: line} = {foo: "Hello", bar: "ES6"};

對象與數(shù)組結(jié)合后可以組成嵌套模式

let { 
    test: [
        name
    ],
    mod
} = {
    test: ["Jason"],
    mod: "Hello"
}
mod//"Hello"
name//"Jason"
test//報錯 test is not defined

上個例子中如果想要獲取test需要先定義

let {
    test, 
    test: [
        name
    ],
    mod
} = {
    test: ["Jason"],
    mod: "Hello"
}
mod//"Hello"
name//"Jason"
test//["Jason"]

同樣的對象的解構(gòu)也可以設置默認值，默認值生效的條件是，對象的屬性值嚴格等于undefined。

let {x = 0} = {};
let {obj = {}} = {obj: null};
x//0
obj//null

解構(gòu)失敗的話變量被賦予undefined

let { x } = {};
x//undefined

如果解構(gòu)模式是嵌套的對象，子對象所在的父屬性不存在就會報錯。

let {user: { name }} = {foo: "test"};
//報錯 因為name的父屬性不存在

如果對一個已經(jīng)聲明的變量進行解構(gòu)賦值一定要注意

let x;
{ x } = { x: 0 };
//報錯 語法錯誤 JavaScript會把{x}當作代碼塊

為了避免以上的錯誤應該避免大括號位于行首，我們應該將解構(gòu)賦值放在圓括號內(nèi)。

let x;
({ x } = { x: 0 });
x//0

對象的解構(gòu)賦值可以很方便的將已有的方法賦值到變量中方便使用

let {sin,cos,log,PI} = Math;
sin(PI/6)

因為數(shù)組是一種特殊的對象，所以可以對數(shù)組使用對象進行解構(gòu)

let arr = [1, 2, 3];
let {0: test, [arr.length - 1]: name} = arr;
test//1
name//3

字符串也可以解構(gòu)賦值，因為此時字符串會被當做一個類似數(shù)組的對象

let [first, , , ,last] = "12345";
first//"1"
last//"5"

類似數(shù)組的對象都有長度length屬性

let { length } = "12345";
length//5

若果是對數(shù)字或者布爾值進行解構(gòu)，會先將數(shù)字或者布爾值轉(zhuǎn)換成對象

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

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

特別注意undefined與null無法轉(zhuǎn)換為對象，對他們進行解構(gòu)都會報錯

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

function test([x, y]) {
    return x + y;
}
test([1, 2]);//3
參數(shù)傳遞到函數(shù)的那一刻被解構(gòu)成x和y了

解構(gòu)賦值雖然很方便，但是解析起來并不容易。對于編譯器來說，一個式子到底是模式，還是表達式，沒有辦法從一開始就知道，必須解析到（或解析不到）等號才能知道。

由此帶來的問題是，如果模式中出現(xiàn)圓括號怎么處理。ES6 的規(guī)則是，只要有可能導致解構(gòu)的歧義，就不得使用圓括號。

但是，這條規(guī)則實際上不那么容易辨別，處理起來相當麻煩。因此，建議只要有可能，就不要在模式中放置圓括號。
不能使用圓括號的情況
（1）變量聲明語句

// 全部報錯
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

（2）函數(shù)參數(shù)

// 報錯
function f([(z)]) { return z; }
// 報錯
function f([z,(x)]) { return x; }

（3）賦值語句的模式

// 全部報錯
({ p: a }) = { p: 42 };
([a]) = [5];
// 報錯
[({ p: a }), { x: c }] = [{}, {}];

可以使用圓括號的情況
可以使用圓括號的情況只有一種：賦值語句的非模式部分，可以使用圓括號。

[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確

（1）交換變量的值

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

（2）從函數(shù)返回多個值

function getParams() {
    return {name: "Jason", id: 411, age: 24};
}
let {name, id, age} = getParams();

（3）函數(shù)參數(shù)的定義

function test([x, y, z]) {}
test([1, 2, 3]);

function test({ x, y, z }) {}
test({ x: 1, y: 2, z: 3 });

（4）提取 JSON 數(shù)據(jù)

const jsonData = {
    name: "Jason",
    id: 411,
    age: 24
};
let {name, id, age: yearOld} = jsonData;
console.log(name, id, yearOld);//Jason 411 24

（5）函數(shù)參數(shù)的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true
}) {
};

（6）遍歷 Map 結(jié)構(gòu)

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

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

（7）輸入模塊的指定方法

import {mapState, mapGetters, mapMutations, mapActions, createNamespacedHelpers} from "vuex";