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" 如果右值中没有左值中对应的属性名,则左值的这个熟悉赋值味undefined。 let {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
- ES6 解析赋值
- es6学习--变量解析赋值
- ES6 语法---变量的赋值与解析
- 【ES6系列】解构赋值
- ES6 destructuring 解构赋值
- es6 chapter3 解构赋值
- ES6 解构赋值用途
- ES6:解构赋值
- ES6 解构赋值
- 【es6】解构赋值
- es6-变量解构赋值
- ES6-变量解构赋值
- ES6变量解构赋值
- ES6解构赋值详解
- ES6解构赋值
- ES6之解构赋值
- ES6之-解构赋值
- ES6之解构赋值
- FUEL9编译指导
- STL源码——特殊的空间配置器
- linear-gradient 用法小结,不做渐变,做斜型背景。
- CodeIgniter(1)简单入门---使用mvc来完成对新闻的一组操作----增删改查
- i2cdetect i2cdump i2cget i2cset用法
- ES6 解析赋值
- C++ STL set集合容器常用用法
- javascript (function(){})()
- ssh三框架整合
- 安卓webwiew使用
- 服务器宕机记录16.12.14
- 自定义标签
- Android StepView物流进度
- Retrofit -网络请求