![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=1739293451-LdgNaUCV1fTimapwwhiVpTy0TF2rWgwh-0-68c75df37d34dc4733fc517792ca0965)
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_2.jpg?sign=1739293451-BifXxTvHsO4GiTPXqLs8lM8Xb5ggLhWi-0-175613e77651a739ad4d88d63a566d8a)
上面代码的第一个例子中,等号左边的两个变量的次序与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。
如果变量名与属性名不一致,必须写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_3.jpg?sign=1739293451-80P3ULml7J8Uloe0n0YlFPGISra3igdA-0-74c2b1fa31cc7ce90348c06c0babc1d4)
实际上说明,对象的解构赋值是下面形式的简写(参见第9章)。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_4.jpg?sign=1739293451-1dNlI7JDZMmSencBqhS0eRcH2nBWv6P0-0-75430bffe1bde9249cca9aa7da732c1a)
也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_5.jpg?sign=1739293451-DddaCJ7KuLWc4v4fLWsv4suHKmzHu1b5-0-764ff235184562aee2a41e96836074b3)
上面的代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
与数组一样,解构也可以用于嵌套结构的对象。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_1.jpg?sign=1739293451-Dg9KevI9aCrROZOE0VnFF14rzGuF8YGu-0-7ed0e6f09602287c921c13f6a050bfb9)
注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_2.jpg?sign=1739293451-EKrUcPgEwAlNQU1WRO8h6OBe0GHcz8Qh-0-43ec23a34cae53f072992235e987daa4)
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_1.jpg?sign=1739293451-9z7ZdwaxEtEKjcxcNtV8TcX2YbOlqeqk-0-108aa9ff65d8a4332aa924e6231c0865)
上面的代码有三次解构赋值,分别是对 loc、start、line 三个属性的解构赋值。需要注意的是,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。
下面是嵌套赋值的例子。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_2.jpg?sign=1739293451-uofMJvXxQNtUKThwZc2LoVQRpI177zgE-0-07f98f3b4263f9301d0f0c126c278e75)
对象的解构也可以指定默认值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_3.jpg?sign=1739293451-HXuAaXWmGechznFMPeJKh65nElvqMjJ2-0-172684f48a3bc4c5367cb706ebdad611)
默认值生效的条件是,对象的属性值严格等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_4.jpg?sign=1739293451-EsDjwc55uN5GlRxDf5yzpkm6eVBprdtJ-0-09f5c068b35b1afeb150eabc109c8aa9)
上面的代码中,如果x属性等于null,就不严格相等于undefined,导致默认值不会生效。
如果解构失败,变量的值等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_1.jpg?sign=1739293451-iAKjMJSexBKiUczwSf4JFRMqYZd0YE9y-0-d3db975f6f2f90d0d468e4cf13d858dc)
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_2.jpg?sign=1739293451-KUbvNA8Gy9wMEUfdjtTnb1ZgGfIxSdxG-0-ead793fa1ff7a022ae29d19f1e2c80ac)
上面的代码中,等号左边对象的foo属性对应一个子对象。该子对象的bar属性在解构时会报错。原因很简单,因为 foo 此时等于 undefined,再取子属性就会报错,请看下面的代码。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_3.jpg?sign=1739293451-YB5hvXEQRL28Y39PEofCgOtpbjqi5n8G-0-58e5460a4744d095340af0abd54fe130)
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_4.jpg?sign=1739293451-yr5I3ULDBIZjRyp7sV98hr4ntWT7ttxg-0-c1efa040c2e6dbc2255cb2be1d625949)
上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_5.jpg?sign=1739293451-cJIImOezOFEKWDSgHrBdPYsKaY3uaS0Z-0-49f2a7fa28dc6df5dc6986e016edae7c)
上面的代码将整个解构赋值语句放在一个圆括号里面,这样就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
解构赋值允许等号左边的模式之中不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_6.jpg?sign=1739293451-tNisTnXC7sHYurnC9VUVQH7boIFFyT8A-0-867c8faef0cab771bc6ac15f3e0e167a)
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_1.jpg?sign=1739293451-AEqG97gaJbIiBIHbmPibbryCRtYDYDDM-0-578e637336fd199e24bf4a02dba06211)
上面的代码将 Math 对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_2.jpg?sign=1739293451-HS5LNCJhegAzz7u3BWtMJKPfYxBeIN9h-0-fc1724ed491ef69e845b82cff8114bd7)
上面的代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length-1]就是2键,对应的值是3。方括号这种写法属于“属性名表达式”,参见第9章。