ECMAScript 6 笔记(3)- 变量的解构赋值

原创 乘风逐月 随笔 ES6 214阅读 2018-08-17 11:29:54 举报

阅读原文: 阮一峰:ECMAScript 6 入门

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

一、数组的解构赋值

1.基本用法

上面的代码表示可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。例如:

如果解构不成功,变量的值就等于 undefined。

如果等号的右边不是数组(或者严格说不是可遍历的解构),那么将会报错。例如:

2.默认值

解构赋值允许指定默认值。例如:

注: ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于 undefined ,默认值才会生效。例如:

如果一个数组成员是 null ,默认值就不会生效。
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

这里报错是因为,x 对应的组员是 undefined,x 的默认值生效,但是默认值是 y,此时 y 还没有声明。

二、对象的解构赋值

1.基本用法

对象的解构与数组的解构,一个重要的不同点在于: 数组元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量名与属性同名,才能取到正确的值。
如果没有与变量名对应的属性名,导致取不到值,最后等于undefined。

2.默认值

对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于 undefined。

3.解构失败

如果解构失败,变量的值等于 undefined。如果解构的是嵌套的对象,而子对象所在的父属性不存在会报错。

如果要将一个已经声明的变量用于解构赋值,需要注意:

三、字符串的解构

字符串也可以解构赋值,这是因为字符串被转成一个类似数组的对象。

类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值。

四、 数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值或布尔值,则会先转化为对象。

上面代码中,数值和布尔值的包装对象都有 toString 属性,因此变量 s 都可以取到值。

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转化为对象。 由于 undefined 和 null 无法转化为对象,所以对他们进行解构赋值都会报错。

五、函数参数的解构赋值

函数的参数也可以使用解构赋值。

上面代码中,函数 add 的参数看似是一个数组,但在传入参数时,数组参数就解构为变量 x 和 y。对于函数内部代码来说,参数就是 x 和 y。

函数参数的解构也可以使用默认值。

上例中,函数 move 的参数是一个对象,通过对这个对象进行解构,得到变量 x 和 y 的值。如果解构失败,x 和 y 等于默认值。

注意这种写法:

上面的代码是为函数 move 的参数指定默认值,而不是为变量 x 和 y 指定默认值。

六、解构的用途

1.交换变量的值

2.从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里面返回。有了解构赋值,取出这些值就非常方便。

3.函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来。

4.提取JSON数据

5.遍历 Map 解构

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复