為什么需要解構(gòu)賦值

解構(gòu)賦值可以讓我們的代碼更加簡(jiǎn)潔明了，大大減少我們的代碼量
解構(gòu)賦值可以分為數(shù)組解構(gòu)，對(duì)象解構(gòu)，字符串解構(gòu)

1、對(duì)象解構(gòu)

不使用對(duì)象解構(gòu)的情況：

const person = {
  name: 'little bear',
  age: 18,
  sex: '男'
}
let age = person.age
let name = person.name
let sex = person.sex

而使用對(duì)象解構(gòu)之后，以上的代碼就可以變成下面的形式：

const person = {
  name: 'little bear',
  age: 18,
  sex: '男'
}
let { name,age,sex } = person

對(duì)象解構(gòu)的書寫方式：

let {a,b} = {a:'值a',b:'值b'};
console.log(a + '|' + b);    //值a|值b

對(duì)象解構(gòu)沒(méi)有次序之分：

let {a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b);    //值a|值b

如果在對(duì)象解構(gòu)前就已經(jīng)定義了變量，那么解構(gòu)就會(huì)報(bào)錯(cuò)：

let a;
{a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b);    //報(bào)錯(cuò)（Unexpected token =）

上方的代碼如果想不報(bào)錯(cuò)，只要在對(duì)象解構(gòu)的外面加上一個(gè)（）就可以了：

let a;
({a,b} = {b:'值b',a:'值a'});
console.log(a + '|' + b);    //值a|值b

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

以前的變量賦值方式：

let a = 1;
let b = 1;
let c = 1;

用數(shù)組解構(gòu)賦值的方式就可以將上方的代碼變?yōu)椋?/p>

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

數(shù)組解構(gòu)的兩邊格式要一致，如下的形式就會(huì)報(bào)錯(cuò)：

let [a,[b],c] = [1,1,1];
console.log(a + '|' + b + '|' + c);    //報(bào)錯(cuò)( [1,1,1] is not iterable)

將上面的形式改成如下格式就可以了（保證數(shù)組兩邊形式一致）：

let [a,[b],c] = [1,[1],1];
console.log(a + '|' + b + '|' + c);    //1|1|1

數(shù)組解構(gòu)與對(duì)象解構(gòu)不同，數(shù)組解構(gòu)是有次序之分的：
let [a,b] = [1,2];和let [b,a] = [2,1]的a，b的值前后是不一樣的

解構(gòu)是可以有默認(rèn)值的：

let [a,b=1] = [2];
console.log(a + '|' + b);    //2|1

而如果是以下的形式：(與函數(shù)的默認(rèn)參數(shù)類似)

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

默認(rèn)值中undefined和null的區(qū)別：

//undefined相當(dāng)于沒(méi)有寫，所以b是默認(rèn)值
let [a,b=2] = [2,undefined];
console.log(a + '|' + b);    //2|2

//null相當(dāng)于寫值了，值就是null
let [a,b=2] = [2,null];
console.log(a + '|' + b);    //2|null

3、字符串解構(gòu)

let [a,b,c] = 'ES6';
console.log(a + '|' + b + '|' + c);    //E|S|6