
3.2 对象的解构赋值
解构不仅可以用于数组,还可以用于对象。

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。

上面代码的第一个例子中,等号左边的两个变量的次序与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。
如果变量名与属性名不一致,必须写成下面这样。

实际上说明,对象的解构赋值是下面形式的简写(参见第9章)。

也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。

上面的代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
与数组一样,解构也可以用于嵌套结构的对象。

注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。


上面的代码有三次解构赋值,分别是对 loc、start、line 三个属性的解构赋值。需要注意的是,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。
下面是嵌套赋值的例子。

对象的解构也可以指定默认值。

默认值生效的条件是,对象的属性值严格等于undefined。

上面的代码中,如果x属性等于null,就不严格相等于undefined,导致默认值不会生效。
如果解构失败,变量的值等于undefined。

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

上面的代码中,等号左边对象的foo属性对应一个子对象。该子对象的bar属性在解构时会报错。原因很简单,因为 foo 此时等于 undefined,再取子属性就会报错,请看下面的代码。

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。

上面的代码将整个解构赋值语句放在一个圆括号里面,这样就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
解构赋值允许等号左边的模式之中不放置任何变量名。因此,可以写出非常古怪的赋值表达式。

上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。

上面的代码将 Math 对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

上面的代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length-1]就是2键,对应的值是3。方括号这种写法属于“属性名表达式”,参见第9章。