![ES6标准入门(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/811/47378811/b_47378811.jpg)
3.2 对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_1.jpg?sign=1739330438-KI4pqzx89HiV4cAE5IcXwiklJEHsOAJm-0-a336f9904a6631af52b83efcda00d7b2)
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_2.jpg?sign=1739330438-7aBTz8mzAMjufoRhY8uKVism1mvTGeBz-0-150d44b03e35c3d98a670f8869829260)
上面代码的第一个例子中,等号左边的两个变量的次序与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。
如果变量名与属性名不一致,必须写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_3.jpg?sign=1739330438-nURQ8LOB2IdJSg0OGTOlqlp2WI55jspb-0-ad059a2ca942cd2aaadd426bcc657ccc)
实际上说明,对象的解构赋值是下面形式的简写(参见第9章)。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_4.jpg?sign=1739330438-ZIx7HIOHUlsAFoLUr3ap7A8XCVat8BKD-0-6719979e92ad83561f7f415fd9b8c512)
也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_5.jpg?sign=1739330438-mE8AdOnyflBAsqbdVf0pE0pmc4wVnuki-0-0e673f80ac78ef71c5dad4ecdad88418)
上面的代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
与数组一样,解构也可以用于嵌套结构的对象。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_1.jpg?sign=1739330438-bDVXDaSOVnIxShKGW12TFUGBPfuC2hz1-0-34b13cdd07807c46a5cce10bdd4af6b0)
注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_2.jpg?sign=1739330438-I9Ap9BXD1CfO7dXU8xOAMTW4ZGqeY0nd-0-59f36ad08278b17be8692988a39f8870)
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_1.jpg?sign=1739330438-nxxoIrUbpNGVC45TcR0cENOgj9ozkYjU-0-92d4c6ef74e1be4ca5039caf9f52cda3)
上面的代码有三次解构赋值,分别是对 loc、start、line 三个属性的解构赋值。需要注意的是,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。
下面是嵌套赋值的例子。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_2.jpg?sign=1739330438-J1RvZxGuJpm92hlkpftHww673nI6PuZa-0-327dcbe958341038cb6d2078ac02f463)
对象的解构也可以指定默认值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_3.jpg?sign=1739330438-Ow0axkyahMBTLN5eOA9xpSvvaNg2p8iM-0-f1954b58fc0e88e9c5231963881c9a5a)
默认值生效的条件是,对象的属性值严格等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_4.jpg?sign=1739330438-4EPwvEtkJLpIHuhiFW5LkhP3Iwx8JcPD-0-e5966241e51822ef72a25dc88eea33dd)
上面的代码中,如果x属性等于null,就不严格相等于undefined,导致默认值不会生效。
如果解构失败,变量的值等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_1.jpg?sign=1739330438-HEodfkEtpyPESCuapzdDhoEpOcNPd5JE-0-aadd1762f7ba1a4c25c4af3b21882c30)
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_2.jpg?sign=1739330438-qAOfOSlWHGB8htoBCPpDOkBDb6yXA5wf-0-63f610ac03d1b456ddc0d6c69e38616f)
上面的代码中,等号左边对象的foo属性对应一个子对象。该子对象的bar属性在解构时会报错。原因很简单,因为 foo 此时等于 undefined,再取子属性就会报错,请看下面的代码。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_3.jpg?sign=1739330438-DOrRukfitUBklem7pFESNqQfnYrTto1g-0-c4f7813e171d7b2e6f9cef3e0c27a26d)
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_4.jpg?sign=1739330438-NTJedHSXs0ZZgoTJQBdjly97lDHJ4pos-0-c9034a0cd54e8ddf53a479a43c37a080)
上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_5.jpg?sign=1739330438-TpuxWNuKKhCWw0i6eMjB2WHckuqQGDyU-0-85340caf487157863254c35293eb6676)
上面的代码将整个解构赋值语句放在一个圆括号里面,这样就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
解构赋值允许等号左边的模式之中不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_6.jpg?sign=1739330438-wBKq8FOUhAho0HJZ6TA8Flguy0NGKDhH-0-7238fb852035f853043f49f151652f5e)
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_1.jpg?sign=1739330438-980j58zNtMGvPk7iD5so6HQepZCSvm5s-0-a77514bcf49fb42b6baac513894ee122)
上面的代码将 Math 对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_2.jpg?sign=1739330438-G8Lc8EE1RTkxQx9SqQpgK5ZJjKym6XJu-0-48465358aff49bc4151a448e22e7d8dd)
上面的代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length-1]就是2键,对应的值是3。方括号这种写法属于“属性名表达式”,参见第9章。