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

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

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

ES6允許以下這種做法

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

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

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

如果等號(hào)右邊的不是數(shù)組（或者說(shuō)不可遍歷的解構(gòu)），就會(huì)報(bào)錯(cuò)

//以下都會(huì)報(bào)錯(cuò)
let [foo] = null;
let [foo] = undefined;
let [foo] = 1;
let [foo] = NaN;
let [foo] = false;
let [foo] = {};

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

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;

若果默認(rèn)值是一個(gè)表達(dá)式，那么這個(gè)表達(dá)式是惰性的，只有在用到的時(shí)候才會(huì)求值

function getFoo() {
    console.log("log: doing");
    return "foo";
}
let [x = getFoo()] = [1];//getFoo并未執(zhí)行，因?yàn)榻鈽?gòu)的時(shí)候發(fā)現(xiàn)有對(duì)應(yīng)的值 x = 1

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

let [x = 0, y = x] = [];//x = 0; y = 0;
let [x = y, y = 0] = [];//報(bào)錯(cuò)因?yàn)閤需要默認(rèn)值的時(shí)候y還不存在
let [x = y, y = 0] = [1];//x = 1;y = 0;因?yàn)閤能取到值 所以默認(rèn)值的賦值操作壓根不會(huì)執(zhí)行

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

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

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

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

當(dāng)然同名的完全可以理解成

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

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

let { 
    test: [
        name
    ],
    mod
} = {
    test: ["Jason"],
    mod: "Hello"
}
mod//"Hello"
name//"Jason"
test//報(bào)錯(cuò) test is not defined

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

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

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

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

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

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

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

let {user: { name }} = {foo: "test"};
//報(bào)錯(cuò) 因?yàn)閚ame的父屬性不存在

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

let x;
{ x } = { x: 0 };
//報(bào)錯(cuò) 語(yǔ)法錯(cuò)誤 JavaScript會(huì)把{x}當(dāng)作代碼塊

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

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

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

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

因?yàn)閿?shù)組是一種特殊的對(duì)象，所以可以對(duì)數(shù)組使用對(duì)象進(jìn)行解構(gòu)

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

字符串也可以解構(gòu)賦值，因?yàn)榇藭r(shí)字符串會(huì)被當(dāng)做一個(gè)類似數(shù)組的對(duì)象

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

類似數(shù)組的對(duì)象都有長(zhǎng)度length屬性

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

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

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

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

特別注意undefined與null無(wú)法轉(zhuǎn)換為對(duì)象，對(duì)他們進(jìn)行解構(gòu)都會(huì)報(bào)錯(cuò)

let { prop: x } = undefined; // 報(bào)錯(cuò)
let { prop: y } = null; // 報(bào)錯(cuò)

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

解構(gòu)賦值雖然很方便，但是解析起來(lái)并不容易。對(duì)于編譯器來(lái)說(shuō)，一個(gè)式子到底是模式，還是表達(dá)式，沒(méi)有辦法從一開(kāi)始就知道，必須解析到（或解析不到）等號(hào)才能知道。

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

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

// 全部報(bào)錯(cuò)
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ù)

// 報(bào)錯(cuò)
function f([(z)]) { return z; }
// 報(bào)錯(cuò)
function f([z,(x)]) { return x; }

（3）賦值語(yǔ)句的模式

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

可以使用圓括號(hào)的情況
可以使用圓括號(hào)的情況只有一種：賦值語(yǔ)句的非模式部分，可以使用圓括號(hào)。

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

（1）交換變量的值

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

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

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ù)的默認(rèn)值

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";