出差了一个月,所以这么久未更博,期间的学习笔记都是记录在纸质笔记本上,由此可见,不管去哪里,带上一支笔和一个笔记本的重要性。今天起会把纸质笔记本上记录的ES6知识点一点点搬到这里。今天先搬移变量的解构赋值。
解构的定义:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
变量的解构赋值主要学习了以下五个部分:
- 数组的解构赋值
- 对象的解构赋值
- 字符串的解构赋值
- 函数参数的解构赋值
- 解构的用途
1.数组的解构赋值
es6的数组解构赋值写法如下:
本质上,这种写法属于“模式匹配”。
等号两边的模式要相同,左边的变量才会被赋给对应的值。
如果解构不成功,变量的值就等于undefined。如下:
- 1.不完全解构:
等号左边的模式,只匹配一部分等号右边的数组。这种情况,解构依然可以成功,如下:
- 2.指定默认值:
1.ES6内部使用严格相等运算符(===)判断一个位置是否有值。所以,如果一个数组成员不严格相等于undefined,默认值是不会生效的。
上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。
2.解构赋值允许指定默认值。
3.如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
4.默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
- 3.哪些可以使用数组的解构赋值?(let和const命令):
1.只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
2.对于set和map结构也乐意使用数组的解构。
3.不是可遍历结构,将会报错。
2.对象的解构赋值
对象的解构与数组不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
- 1.实质上,对象的解构赋值是下面形式的简写。
上面代码可以看出:对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
- 2.避免变量名与属性名不一致时出错,可写成下面这样:
-
3.对象的解构也可以设置默认值,同数组。
-
4.默认值生效的条件是,对象的属性值严格等于undefined。
-
5.由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
3.字符串的解构
1.字符串解构赋值时,字符串被转换成了一个类似数组的对象。
如下:
2.类似数组的对象都有一个length属性,可以对这个属性解构赋值。
如下:
4.函数参数的解构
1.函数的参数也可以使用解构。
用法如下:
在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。
2.函数参数的解构也可以使用默认值。
如下:
3.是对函数参数指定默认值,而不是为变量x和y指定默认值。
5.解构的用途
变量的解构用途很多,详细参考阮一峰老师的ES6入门中的变量的解构一节。
-
1.交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
-
2.从函数返回多个值。
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值很方便。
- 3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
-
4.提取JSON数据
-
5.函数参数的默认值
-
6.遍历map结构
任何部署了 Iterator 接口的对象,都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便
- 7.输入模块的指定方法