ES6 变量的解构赋值
2016-07-25 10:05
661 查看
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应
只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同
如果等号右边的不是数组,确切的说不是可遍历的数组,那么将会报错
解构赋值不仅适用于var 命令,也适用于 let / const 命令
只要是可遍历的数据,都可以使用数组的解构赋值:
let [a,b,c] = new set(["1","2","3"]);
解构赋值同样允许指定默认值 let [a = "1",b] = [2]; //a=1 b=2
默认值可以引用其它变量,但是该变量必须已经声明
对象的解构赋值 var {a,b} = {a: "1", b:"2"} 左边是变量名,右边是给属性赋值的对象列表,变量名必须与属性性名一致,才能取到正确的值,与次序完全没关系。
对象的解构赋值与数组有一个重要的不同,数组元素在解构赋值时,是按照次序排列赋值的,变量的值由位置决定;而对象没有次序,变量必须与属性性同名,才能取到正确的值
如果变量名与属性名不一致,必须把不一致的属性作为属性值赋值给有值的属性:
对象的解构赋值的机制是:先找到同名属性,然后再赋值对应的变量。真正被赋值的是后者,而不是前者。上面的代码中,真正被赋值的是 d,而不是 a
let 在声明变量之后,不可以再重复声明,如果想要重复声明,必须将再次声明的变量与赋值语句用圆括号括起来,否则会报错。使用圆括号的原因是,解析器会将起首的大括号,理解成一个代码块,而不是赋值语句
对象的赋值表达式,也主是赋值语句,如果放在圆括号里,在大部分场景下都可以执行,如果不放在圆括号里,严格模式下是会报错的。
对象的解构赋值同样也可以指定默认值: let {a=""3} = {}
对象的解构赋值,可以很方便的将现有对象的方法,赋值到某个变量
字符串的解构赋值 const [h,e,l,l,o] = 'hello' 字符的解构赋值是把字符串转换成了类似数组的对象,它有length属性值,只是类数组,数组的方法不可以用在类数组上
数值和布尔值的解构赋值:如果等号右边的是数值或布尔值,要先转换为对象再赋值。解构赋值的规则是,只要等号右边的不是对象,就先将其转换为对象(undefined与null无法转为对象,所以无法对它们进行解构赋值)
函数的参数也可以进行解构赋值,函数的参数也可以使用默认值
怎么让解析器判断,一个语句,到底是模式还是表达式,没有办法从一开始就知道,必须解析到等号才能知道。ES6的规则是:只要有可能导致解构歧义,就不要在模式中放置圆括号。建议,只要有可能,就不要在模式中使用圆括号。不能使用圆括号的三种情况:
变量声明语句中,不能带有圆括号,不能给变量添加圆括号
函数参数中使用解构赋值时,不能给函数参数使用圆括号
赋值语句中,不能将模式中的一部分或一层,放入圆括号
可以使用圆括号的情况:首先是赋值语句
可以使用赋值语句的情况只有一种:赋值语的非模式部分,可以使用圆括号
之所以能使用,是因为它们首先是赋值语句,而不是声明语句;
其次,它们的圆括号都不属于模式的一部分
变量的解构赋值的用途
交换变量的值
从函数返回多个值 返回多个数组方法: let [a,b,c] = example(); 返回多个对象方法: let {a,b} = example();
函数参数,可以很方便的将参数与变量名对应起来
提取JSON数据: let {id,status,data:number} = jsonData;
遍历数组结构,很方便的获取键名或键值 for(let [key, value] of map){...} 获取键名: for(let [key] of map){...} 获取键值: for(let [value] of map){...}
加载模块指定, import {render} from 'react-dom';
只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同
如果等号右边的不是数组,确切的说不是可遍历的数组,那么将会报错
解构赋值不仅适用于var 命令,也适用于 let / const 命令
var [a,b,c,...d] = []; let [a,b,c,...d] = []; const [a,b,c,...d] = [];
只要是可遍历的数据,都可以使用数组的解构赋值:
let [a,b,c] = new set(["1","2","3"]);
解构赋值同样允许指定默认值 let [a = "1",b] = [2]; //a=1 b=2
默认值可以引用其它变量,但是该变量必须已经声明
对象的解构赋值 var {a,b} = {a: "1", b:"2"} 左边是变量名,右边是给属性赋值的对象列表,变量名必须与属性性名一致,才能取到正确的值,与次序完全没关系。
对象的解构赋值与数组有一个重要的不同,数组元素在解构赋值时,是按照次序排列赋值的,变量的值由位置决定;而对象没有次序,变量必须与属性性同名,才能取到正确的值
如果变量名与属性名不一致,必须把不一致的属性作为属性值赋值给有值的属性:
let {a: d} = {a:"1",b:"2"}; d //1
对象的解构赋值的机制是:先找到同名属性,然后再赋值对应的变量。真正被赋值的是后者,而不是前者。上面的代码中,真正被赋值的是 d,而不是 a
let 在声明变量之后,不可以再重复声明,如果想要重复声明,必须将再次声明的变量与赋值语句用圆括号括起来,否则会报错。使用圆括号的原因是,解析器会将起首的大括号,理解成一个代码块,而不是赋值语句
let a; ({a} = {a:"1"}); //OK let b: ({c:b} = {c:"2"}); //OK let c: {c} = {c: 1} //error ({c} = {c:1}); //OK
对象的赋值表达式,也主是赋值语句,如果放在圆括号里,在大部分场景下都可以执行,如果不放在圆括号里,严格模式下是会报错的。
对象的解构赋值同样也可以指定默认值: let {a=""3} = {}
对象的解构赋值,可以很方便的将现有对象的方法,赋值到某个变量
function logo(){...} function setData(){...} function list(){...} 可以很方便的将上面的三个方法,赋值给一个变量: let {logo,setData,list} = Match;
字符串的解构赋值 const [h,e,l,l,o] = 'hello' 字符的解构赋值是把字符串转换成了类似数组的对象,它有length属性值,只是类数组,数组的方法不可以用在类数组上
数值和布尔值的解构赋值:如果等号右边的是数值或布尔值,要先转换为对象再赋值。解构赋值的规则是,只要等号右边的不是对象,就先将其转换为对象(undefined与null无法转为对象,所以无法对它们进行解构赋值)
函数的参数也可以进行解构赋值,函数的参数也可以使用默认值
怎么让解析器判断,一个语句,到底是模式还是表达式,没有办法从一开始就知道,必须解析到等号才能知道。ES6的规则是:只要有可能导致解构歧义,就不要在模式中放置圆括号。建议,只要有可能,就不要在模式中使用圆括号。不能使用圆括号的三种情况:
变量声明语句中,不能带有圆括号,不能给变量添加圆括号
var [(a)] = [1] //错
函数参数中使用解构赋值时,不能给函数参数使用圆括号
function([(a)]){return a} //错
赋值语句中,不能将模式中的一部分或一层,放入圆括号
({a:"1"}) = {a:"100"} //错 ({a: "1"} = {a:"100"}) //正确
可以使用圆括号的情况:首先是赋值语句
可以使用赋值语句的情况只有一种:赋值语的非模式部分,可以使用圆括号
[(a)] = [3]; // 正确 ({ a: (b) } = {}); // 正确 [(parseInt.prop)] = [3]; // 正确
之所以能使用,是因为它们首先是赋值语句,而不是声明语句;
其次,它们的圆括号都不属于模式的一部分
变量的解构赋值的用途
交换变量的值
从函数返回多个值 返回多个数组方法: let [a,b,c] = example(); 返回多个对象方法: let {a,b} = example();
函数参数,可以很方便的将参数与变量名对应起来
提取JSON数据: let {id,status,data:number} = jsonData;
遍历数组结构,很方便的获取键名或键值 for(let [key, value] of map){...} 获取键名: for(let [key] of map){...} 获取键值: for(let [value] of map){...}
加载模块指定, import {render} from 'react-dom';
相关文章推荐
- Linux内核学习笔记: uid之ruid,euid,suid
- PAT(B) - 1027. 打印沙漏(20)
- 框架解析
- java调用Http请求 -HttpURLConnection学习
- HDU1798 Tell me the area(两圆的相交面积)
- FFT NNT
- VB.Net中点击按钮(Button)会重复提交两次表单
- python中关于with以及contextlib的使用
- JS仿百度自动下拉框模糊匹配提示
- HDU4826 - Labyrinth(棋盘DP)
- 2016微软探星夏令营在线技术笔试题解(3)
- 深入剖析 redis 数据淘汰策略
- c语言==关键字(13)
- Golang-简洁的并发
- 关于报malformed or corrupted AST file: 'Unable to load module 的错~
- 位运算判断奇偶数
- vs2010为项目添加库文件目录、添加包含文件目录
- Does sentiment analysis work? A tidy analysis of Yelp reviews
- 判断二叉树是否平衡
- 在Docker容器中进行Flask应用的开发