ES6 解析赋值

来源:互联网 发布:北国知春物业 编辑:程序博客网 时间:2024/04/30 06:50

解析赋值可是解决了之前es5的一大弊端,如果对一个对象取值,需要写好长的代码,现在使用解析赋值可以轻松的获取对应的元素。
解析赋值主要用在可以迭代的变量上。
例如 对象 数组 集合 等具有Iterator接口的变量上,按照一定的格式 位置对应赋值,如果已经有默认值,且值不严格等于 undefined ,则会采取右边的解析赋值给左值。

下面是对数组和对象采用的解析赋值说明一下。

1 数组

1)完全匹配   let [a,b,c] = [10,20,30];   解析赋值的结果就是 a = 10,b = 20,c= 30;按照从左到右的方式赋值。   let [a, , ] = [10,20,30];   只有 a = 10 ,其他的不会得到赋值。   扩展运算符在这里比较好用   let [a,...b] = [10,20,30];   a = 10; b = [20,30];   let [a,b] = [b,a]   扩展运算符会把剩下的变量变成一个数组,所以可以将许多非数组变量变成数组变量   例如 function 中的 arguments 利用 ...arguments可以变成 新的数组,而不用使用之前ES5调用Array.prototype.slice.call(arguments,0);   也可以将字符串 变成 数组   例如 a = "hellojavascript" , ...a 就可以轻松的变成 ['h','e',......'t'];   而不需要使用 a.split("");   (2)不完全匹配   也就是说 左边的变量数与右边的数量不匹配。   [a,b] = [10,20,30];   [a,[b,c],d] = [10,[20,30,40],50];//a = 10,b = 20, c = 30,d = 50;

2 对象的解析赋值

   对象的解析赋值和数组的最不同之处是,数组是按照次序,而对象是按照属性名对应进行赋值。   person = {age:14,id:14011231123,name:"aidim78"};   let {age,id,name} = person;//age = 14,id = 14011231123,name = "aidim78"   如果右值中没有左值中对应的属性名,则左值的这个熟悉赋值味undefinedlet {age:num,id,name}   这样的话。age就不是变量了,而是属性名,按照这个格式,给num赋值,剩下的依旧如上面的赋值。//num = 14,id = 14011231123,name = "aidim78";   最常用的对象解析赋值用在导入模块时从对象中取出 方法和变量  const ReactNative = require('react-native');  const {  Alert,  Button,  View,  } = ReactNative;

3 设定默认值

解析赋值允许对左值变量设定默认值,只有当右值严格为undefined时,才会使用默认值进行赋值,这很大程度上代替了es5中使用 a = a||"somevalue";  [x,y=5] = [10,20]   {x,y=5} = {x:10,y:20} //x = 10,y = 20;  [x,y=5] = [10,,20]  {x,y:y=5} = {x:10,z:20};//x = 10,y = 5;
0 0