关于ES6中的解构

  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 {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,当传值时,走传的值

原文地址:https://www.cnblogs.com/AngliaXu/p/7257763.html