ES6-解构赋值（数组和对象）

解构赋值，也称“模式匹配”，即赋值的左右两边模式相同，则等号右边的值赋给左边的变量。

解构赋值 适用 let var const声明变量/常量；

在解构赋值前，声明多个变量：

var a=1;

var b=2;

var c=3;

解构赋值：var [a,b,c] = [1,2,3];

解构赋值不成功：

var [a] = [];    //a undefined

解构赋值不完全成功：

var [a,b] = [1] ;  //a=1;b undefined;

数组的解构赋值：严格按照顺序；

嵌套的数组解构赋值：

var [a,[b],c] = [1,[2],3];  // a=1;b=2;c=3;

不完全解构的嵌套数组赋值：

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

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

解构赋值报错：若等号右侧的值不是数组形式，则赋值报错：

var [a] = 1; //报错

var [b] = null; //报错

var [c] = undefined; //报错

var [d] = false; //报错

var [e]  = {}; //报错

解构赋值默认值：

默认值仅在等号右侧的值严格等于undefined时，默认值才生效：

var [a=1,b=2] = [];  //a=1;b=2;

var [a=1] = [null] ; // a=1;  null !==undefined

var [a=1] = [undefined] ;  // a=1;

默认值可以是表达式：表达式是惰性求值，仅在用到的时候才求值；

function fn(){alert(1)};

var [a=fn()] = []; // fn会执行；

var [b=fn()] = [1] ; //fn不会执行； b=1;

默认值也可引用解构赋值的其他变量，前提是该变量已经声明：

var [a=1,b=a] = []; //a=1;b=1;

var [a=b,b=1] = []; //报错 referenceError；

对象的解构赋值：找同名属性，顺序不重要：

var {b,a} = {a:1,b:2}; //  a=1;b=2;

赋值的变量名与属性名不一致：

var {color: pink,b} = {color:'#ccc',b:3};  //pink='#ccc'; b=3;

对象的解构赋值，找同名的属性，找到后将值赋给变量。（实际赋值的是后者）。

var {abc:car,bcd:color} = {abc:'丰田',bcd:'green'};  //car = '丰田' ；color='green'; 其中abc和bcd都是模式，不是变量。

var obj={a:1,b:2,c:3};    var {a,b,c}=obj;  //a=1;b=2;c=3;

var obj={a:1,b:2,c:3} ;   var {a:first,b:second,c:third}=obj;  //first=1;second=2;third=3;  a undefined,b undefined ,c undefined; a,b,c都是模式不是实际的变量；

解构失败的值是undefined；

对象的解构赋值中，变量的声明和赋值是一体的，对于let和const来说，仅能声明一次，若重复声明则报错。

let a;let {a} = {a:1}; // 报错，重复声明变量。

解决：let a;  (let {a} = {a:1}) // a=1; javascript会将两次声明区分成两个代码块，不会报错。（容易乱，还是少用）

解构赋值的默认值：(解构赋值生效的条件是属性值严格等于undefined)

var {a:b=1} = {};  //b=1;

var {a:b=2} = {a:null}; //b=null ,null !==undefined

作者：jingzizi
链接：https://www.jianshu.com/p/d8b9406188b9
來源：简书