// 在 ES5 我们只能直接指定值
var a = 1
var b = 2
var c = 3
// 在 ES6 允许这样为变量赋值
let [a, b, c] = [1, 2, 3]
上面的示例表示,可以从数组中提取值,按照对应位置对变量赋值。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
下面是一些使用嵌套数组进行解构的例子:
let [foo, [[bar], baz]] = [1, [[2], 3]]
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"]
third // "baz"
let [x, , y] = [1, 2, 3]
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a']
x // "a"
y // undefined
z // []
function* gen() {
let a = 0
let b = 1
while (true) {
yield a
;[a, b] = [b, a + b]
}
}
let [first, second, third, fourth, fifth, sixth] = gen()
sixth // 5
2. 默认值
解构赋值允许指定默认值。
let [foo = true] = []
foo // true
let [x, y = 'b'] = ['a']
x // "a"
y // "b"
let [x, y = 'b'] = ['a', undefined]
x // "a"
y // "b"
let { x = 3 } = {}
x // 3
let { x, y = 5 } = { x: 1 }
x // 1
y // 5
let { x: y = 3 } = {}
y // 3
let { x: y = 3 } = { x: 5 }
y // 5
let { message: msg = 'Something went wrong' } = {}
msg // "Something went wrong"
默认值生效的条件是,对象的属性值严格等于 undefined。
let { x = 3 } = { x: undefined }
x // 3
let { x = 3 } = { x: null }
x // null
上面的示例中,属性 x 等于 null,因为null与undefined不严格相等,所以是个有效的赋值,导致默认值3` 不会生效。
3. 注意点
(1) 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法
let x
{ x } = { x: 1 }
// SyntaxError: Unexpected token '='
上面示例的写法会报错,因为 JavaScript 引擎会将 { x } 理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解析为代码块,才能解决这个问题。如下:
// 正确的写法
let x
;({ x } = { x: 1 })
// 注意一下,由于我平常的编程偏向于 semicolon-less 风格,所以我行尾是不写分号的,
// 但是此时需要注意的是,若行首是以 (、[、/、+、- 开头的时候为了避免出现非预期结果或语法错误,需要手动插入分号(;)
// 所以相当于:
let x;
({ x } = { x: 1 });
let { prop: x } = undefined // TypeError: Cannot destructure property 'prop' of 'undefined' as it is undefined.
let { prop: y } = null // TypeError: Cannot destructure property 'prop' of 'null' as it is null.
五、函数参数的解构赋值
函数的参数也可以使用解构赋值。
下面的示例中,函数 add 的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量 x 和 y。对于函数内部的代码拉说,它们能感受到的参数就是 x 和 y。
function add([x, y]) {
return x + y
}
add([1, 2]) // 3
下面是另一个例子。
;[[1, 2], [3, 4]].map(([a, b]) => a + b) // [3, 7]
const map = new Map()
map.set('first', 'hello')
map.set('second', 'world')
for (let [key, value] of map) {
console.log(key + ' is ' + value)
}
// first is hello
// second is world
如果只是想获取键名(或者键值),可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
在 ES6 中,允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这种行为被称为解构(Destructuring)。
解构赋值的规则是,只要被解构的值(等号右边的值)不为对象或者数组(如字符串、数值、布尔值),就先将其转为对象。但
undefined
和null
除外,因为它俩无法转为对象,所以进行解构赋值会报错。本文主要包括:
一、数组的解构赋值
只要某种数据结构具有 Iterator 接口(可遍历结构),都可以采用数组形式的解构赋值。JavaScript 中原生具备 Iterator 接口的数据结构如下:
1. 基本用法
在 JavaScript 中,我们可以这样为变量进行赋值:
上面的示例表示,可以从数组中提取值,按照对应位置对变量赋值。
下面是一些使用嵌套数组进行解构的例子:
如果解构不成功,变量的值就等于
undefined
。以下两种情况都属于解构不成功,foo
的值都会等于undefined
。以下两个例子,都属于不完全解构,但是可以成功。
如果等号右边的值不是数组(或者严格地说,不是可遍历的结果),将会报错。
上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一个表达式)。
上面提到,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。比如 Set 结构,也可以使用数组的解构赋值。
下面示例中,
gen
是一个 Generator 函数,原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。2. 默认值
解构赋值允许指定默认值。
以下示例中,如果一个数组成员是
null
,默认值就不会生效,因为null
不严格等于undefined
。如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。下面示例中,因为
x
能取到值,所以函数fn
根本不会执行。注意,默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
上面示例中,最后一个表达式会报错,是因为将
y
用做x
的默认值时,y
还没有声明。二、对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
1. 基本用法
对象的解构与数组有一个重要的的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性是没有次序的,变量必须与属性同名,才能取到正确的值。
上面的示例中,第一例子等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于
undefined
。如果解构失败,变量的值等于
undefined
。下面的示例中,等号右边的对象中没有foo
属性,所以变量foo
取不到值,所以等于undefined
。对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
如果变量名与属性名不一致,必须写成下面这样:
这实际上说明,对象的解构赋值是下面形式的简写(对象属性的简写形式):
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量。真正被赋值的后者,而不是前者。
上面的示例中,
foo
是匹配的模式,baz
才是变量。真正被赋值的是变量baz
,而不是模式foo
。与数组一样,解构也可以用于嵌套结构的对象。
注意,此时
p
是模式,不是变量,因此也不会被赋值。如果p
也要作为变量赋值,也可以写成下面这样。下面是另一个例子,示例中有三次解构赋值,分别对
loc
、start
、line
三个属性的解构赋值。注意,最后一次对line
属性的结构赋值之中,只有line
是变量,loc
和start
都是模式,不是变量。下面是嵌套赋值的例子。
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。 下面的示例中,等号左边对象的
foo
属性,对应一个子对象。该子对象的bar
属性,解构是会报错。原因很简单,因为foo
这时等于undefined
,再取子属性就会报错。注意,对象的解构赋值可以取到继承的属性。
上面的示例中,对象
obj1
的原型对象是obj2
。foo
属性不是obj1
自身的属性,而是继承自obj2
的属性,解构赋值可以取到这个属性。2. 默认值
对象的解构也可以指定默认值。
默认值生效的条件是,对象的属性值严格等于
undefined
。上面的示例中,属性
x
等于null,因为
null与
undefined不严格相等,所以是个有效的赋值,导致默认值
3` 不会生效。3. 注意点
(1) 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
上面示例的写法会报错,因为 JavaScript 引擎会将
{ x }
理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解析为代码块,才能解决这个问题。如下:上面的示例将整个解构赋值语句,放在一个圆括号里面,就可以正确执行(关于圆括号与解构赋值的关系,下文会提到)。
(2) 解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
以上的表达式虽然毫无意义,但是语法是合法的,可以正常执行。
(3) 由于属性本质是特殊的对象,因此可以对数组进行对象属性的解构。
上面的示例中,对数组进行对象解构。数组
arr
的0
键对应的值是1
,[arr.length - 1]
就是2
键,对应的值是3
。方括号的这种写法属于“属性名表达式”的表达方式。三、字符串的解构赋值
字符串也可以解构赋值,这是因为字符串被转换成了一个类似数组的对象。
类似数组的对象都有一个
length
属性,因此还可以对这个属性解构赋值。四、数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会转为对象。
上面示例中,数值和布尔值的包装对象都有
toString
属性,因此变量s
都能取到值。解构赋值的规则是,只要等号右边的值不是对象或数值,就先其转为对象。由于
undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。五、函数参数的解构赋值
函数的参数也可以使用解构赋值。
下面的示例中,函数
add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x
和y
。对于函数内部的代码拉说,它们能感受到的参数就是x
和y
。下面是另一个例子。
函数参数的解构也可以使用默认值。
上面的示例中,函数
move
的参数是一个对象,通过对这个对象进行解构,得到变量x
和y
的值。如果解构失败,x
和y
等于默认值。注意,下面的写法会得到不一样的结果。
上面的示例,是为函数
move
的参数指定默认值,而不是为变量x
和y
指定默认值,所以会得到与前一种写法不同的结果。undefined
就会触发函数才能上的默认值。六、圆括号的问题
解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。
由此带来的问题是,如果模式中出现圆括号怎么处理?ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。
但是,这条规则实际上不那么容易辨别,处理起来相对麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。
不能使用圆括号的情况:
以下三种解构赋值不得使用圆括号。
1. 变量声明语句
下面 6 个语句都会报错,因为它们都是变量声明语句,模式不能使用圆括号。
2. 函数参数
函数参数也属于变量声明,因此不能带有原括号。
3. 赋值语句的模式
上面的示例将整个模式放在圆括号之中,导致报错。
上面代码将一部分模式放在圆括号之中,导致报错。
可以使用圆括号的情况:
可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
以上三行语句都可以正确执行,因为它们都是赋值语句,而不是声明语句;其次,它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一成员,跟圆括号无关;第二行语句中,模式是
p
,而不是d
;第三行语句与第一行语句的性质一致。(如果到这里对模式没完全弄清楚的,建议往回再细看一下)七、用途
变量的解构赋值用途很多。
1. 交换变量的值
下面示例交换变量
x
和y
的值,这样的写法不仅简洁,而且易读,语义非常清晰。2. 从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里返回。有了结构赋值,取出这些值就非常方便。
3. 函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
4. 提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
5. 函数参数的默认值
指定参数的默认值,就避免了在函数体内部再写
var foo = config.foo || 'default foo';
这样的语句。6. 遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用 for...of 循环遍历。Map 解构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
如果只是想获取键名(或者键值),可以写成下面这样。
7. 输入模块的指定方法
加载模块时,往往需要指定哪些方法。解构赋值使得输入语句非常清晰。
八、参考