第三节:变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。下面我们看实际的例子:

一、数组解构:

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

//从上面的例子看出,左边的数组一一对应右边进行拆解并赋值,左边3个,右边就是3个,如果不对等就会报错,大家可以尝试下

     • 解构的默认值:

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

//右边我们并没有给c赋值,但左边已经声明了一个默认值,它也会按照默认值输出,但默认赋值有一个特殊的情况,就是undefined和null
let [a,b="B"] = [1,undefind];
console.log(a); //a
console.log(b); //B undefined并没有赋给b,undefined相当于什么都没有
我们来看null的情况
let [a,b="B"] = [1,null];
console.log(a); //a
console.log(b); //null 这时的null赋给了b,null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。

二、对象的解构赋值:

1 let {a,b,c} = {a:"A",c:"C",b:"BB"};
2 console.log(a);   //A
3 console.log(b);   //BB
4 console.log(c);   //C

//注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

     •圆括号 ( ) 的使用:

1 let a;
2 {a} = {a:"ES6"};
3 console.log(a);     //如果在解构之前就定义了变量,这时候去解构会出现问题,编译报错,我们在解构的外层加一个圆括号就正常了

let a;
({a} = {a:"ES6"});
console.log(a); //ES6 在外层加了 ( ) 后就可以正常编译输出了

三、字符串解构:

1 let [a,b,c,d,e] = "hello";
2 console.log(a);    //h
3 console.log(b);    //e
4 console.log(c);    //l
5 console.log(d);    //l
6 console.log(e);    //o

//此时字符串被转换成了一个类似数组的对象。

总结:

      1数组解构         • 有一个默认值情况

      2对象的解构     • 有一个圆括号情况

      3字符串解构

猜你喜欢

转载自www.cnblogs.com/herxondon/p/10302576.html