說(shuō)明

1. 按照一定模式從 數(shù)組或者對(duì)象中提取值，然后對(duì)變量進(jìn)行賦值
   規(guī)則
2. 數(shù)組、按照順序足以賦值給左邊
3. 對(duì)象、按照模式匹配右邊的值，然后賦值給左邊。如果找不到則為 undefided
4. 如果右邊之不是 數(shù)組或?qū)ο?，則先轉(zhuǎn)換為對(duì)象在進(jìn)行匹配。由于undefined和null無(wú)法轉(zhuǎn)換為對(duì)象，所以程序會(huì)報(bào)錯(cuò)
   數(shù)組解構(gòu)賦值
   1、基本用法

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

2、嵌套

let [a, [b1, b2], c] = [1, [21, 22], 3];
console.log(a); // 1
console.log(b1); // 21
console.log(b2); // 22
console.log(c); // 3

3、剩余值

let [a, b, ...c] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4]

4、匹配不成功

let [a, b, c] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined

5、默認(rèn)值

let [a=0, b] = [undefided, 2];
console.log(a); // 0
console.log(b); // 2

let [a=0, b] = [null, 2];
console.log(a); // null
console.log(b); // 2

// 注：ES6內(nèi)部使用 `===` 來(lái)判斷是否有值，只有值 嚴(yán)格等于`undefined`時(shí)才會(huì)去匹配 默認(rèn)值

對(duì)象解構(gòu)賦值
1、基礎(chǔ)用法

let {a, b, c} = {a:'1', b:'2'};
console.log(a); // '1'
console.log(b); // '2'
console.log(c); // undefined 匹配不到 則為 undefined

2、模式

let {a:a1, b:b1, c:c1} = {a:'1', b:'2', c1:'3'};
console.log(a1); // '1'
console.log(b1); // '2'
console.log(c1); // undefined 匹配不到 則為 undefined
console.log(a); // 報(bào)錯(cuò)
console.log(b); // 報(bào)錯(cuò)
console.log(c); // 報(bào)錯(cuò)

// 注：在 `:` 左邊'a' 是要去匹配的模式（key值）。`:`右邊'a1'才是真正要被賦值的變量

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]

// 注： 這里要用 `()` 給包起來(lái) 因?yàn)?obj 和 arr 已經(jīng)聲明了 不能重復(fù)聲明

3、嵌套

let {a, {b1, b2}, c} = {a:'1', {b1:'21', b2:'22'}, c:'3'};
console.log(a); // '1'
console.log(b1); // '21'
console.log(b2); // '22'
console.log(c); // '3'

4、默認(rèn)值

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

5、注意點(diǎn)
如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值，便會(huì)報(bào)錯(cuò)

// 錯(cuò)誤的寫法
let x;
{x} = {x: 1};

下面代碼將整個(gè)解構(gòu)賦值語(yǔ)句，放在一個(gè)圓括號(hào)里面，就可以正確執(zhí)行

// 正確的寫法
let x;
({x} = {x: 1});

字符串解構(gòu)賦值
字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)，字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象。

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

類似數(shù)組的對(duì)象都有一個(gè)length屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。

let {length : len} = 'hello';
len // 5

數(shù)值和布爾類型解構(gòu)賦值
解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。

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

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

上面代碼中，數(shù)值和布爾值的包裝對(duì)象都有toString屬性，因此變量s都能取到值。
解構(gòu)賦值的規(guī)則是，只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。由于undefined和null無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。

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

函數(shù)解構(gòu)賦值
函數(shù)的參數(shù)也可以使用解構(gòu)賦值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3