ES6中的解构赋值主要遵循的规则是，先看等号右边，右边有值走赋值，右边无值走左边默认。下面列出几个小栗子介绍它的主要运用。

1 function fn(){2         return 3;3 }4 let [x=fn()]=[1];5 console.log(x);     //x=1

     上面的列子看出，尽管x=一个立即执行的函数，但还是先走右边的赋值。如果把等号右边变成一个空数组，那么x=3，走左边的默认赋值。

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

　　解构赋值时，等号左边格式要和右边的格式相等,不然会报错

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

 

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

　　上面两个demo大致上看起来一样，但是为什么后者会报错呢？那是因为在ES6解构赋值中，使用的是严格模式的===，如右边的数组成员严格===undefined为true时，就会走默认的赋值，在这里，第二个的undefined===undefined（true），走左边的默认赋值，b未定义，因此报错。

 

 

　　关于对象的结构赋值，同理，左右结构要相同

1 let {x,y} = {x:1,y:2};   3 console.log(x,y); // x=1  y=2

　　如果要给左边的变量名重命名，可以这样写

 

1 let {b:x,a:y} = {a:1,b:2};2 console.log(x,y);  // x=2 y=1　　　

 

　　在右边的对象里没有找到值，返回undefined

1 let {x,y} = {a:1,b:2};2 console.log(x,y);   //undefined,undefined

　　对象赋值也是一样，如果右边的对象属性值严格===undefined，那么就走左边的默认赋值

　　var {x=3} = {x: undefined}; // x=3

　　var {x=3} = {x: null};     // x=null

 

　　解构赋值的运用场景，获取div的样式对象集合，通过左边的值去匹配右边并找出相应的属性值

　　let {width:w,height:h,border:b,margin:m} = getComputedStyle(div);

因此可以得出div的宽w，高h，边框b，外边距m。

　　解构赋值在函数中的运用：

 

1     function fn(a=1,b=2){2         alert(a+b);3     }4     5     fn(4,5);

 

　　　　当不传值时，a=1，b=2，当传值时，走传的值