![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=1739142602-qyNmpE11E0CXcErYRRYXe49aQZQbuFxB-0-9368b9cf22a2468a89498fd1d4fb89de)
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_2.jpg?sign=1739142602-fCRleapm9rwaPATBgk5RJscnGQDlbpHw-0-4b85807069ec283788cb8976a7987d53)
上面代码的第一个例子中,等号左边的两个变量的次序与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。
如果变量名与属性名不一致,必须写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_3.jpg?sign=1739142602-7GJPfGsdaivIjFaIlm2a8DW4DnMDvc06-0-6b36a9832c65c46cc34e7dafcfa4d4f2)
实际上说明,对象的解构赋值是下面形式的简写(参见第9章)。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_4.jpg?sign=1739142602-tFvNH9o0TAHGNk5e4bCBhjO6aSnyscnF-0-6625ef7ab4bf3e23522282308b23739f)
也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/65_5.jpg?sign=1739142602-d6gukErWIazt7Ry1IVn17Gj3kLndukhP-0-88e0963cbebe7a5577e40b2fed12f3d8)
上面的代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
与数组一样,解构也可以用于嵌套结构的对象。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_1.jpg?sign=1739142602-3okAWKbgkSTtyAjmjjwOSXS7RQvfe935-0-bbabe8b32dfe7208fe1c4604bb3d5089)
注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/66_2.jpg?sign=1739142602-WBj3xWBBoCExpj91P95CN5x7O66e8g2j-0-084d428b08e75ce0bab609ec86bc5fb7)
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_1.jpg?sign=1739142602-y9NmHDDNcKhnBqEI5TQAtDoJYNkcj10D-0-4ad7159b69802d58048188295e9510d9)
上面的代码有三次解构赋值,分别是对 loc、start、line 三个属性的解构赋值。需要注意的是,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。
下面是嵌套赋值的例子。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_2.jpg?sign=1739142602-ODdNyg6OKIqgpQ6vlgYsl6crIOCGdKwx-0-99c9df413622dabebe3357d9514e906a)
对象的解构也可以指定默认值。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_3.jpg?sign=1739142602-Sg3j1IrnlwOqFIhhceXBmf8hmpDT8Paa-0-75f1dee704ad2e235c2b5f17ed093f09)
默认值生效的条件是,对象的属性值严格等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/67_4.jpg?sign=1739142602-Jr5uTYlhxQr1RiXxPtt7VLr9wnTQzqLl-0-d00df51ef9c2444eb946826963ec9346)
上面的代码中,如果x属性等于null,就不严格相等于undefined,导致默认值不会生效。
如果解构失败,变量的值等于undefined。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_1.jpg?sign=1739142602-FYpEP1VN1xKUAtho0aKiIu12jNT0E4kM-0-c2955d9afe47da264e8c349aaa6ba23a)
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_2.jpg?sign=1739142602-Ql4d7FZQR4hyJuiiWAxTYEh0OPDxCVTI-0-ef8de6ff983b3c44808d396be179f8e9)
上面的代码中,等号左边对象的foo属性对应一个子对象。该子对象的bar属性在解构时会报错。原因很简单,因为 foo 此时等于 undefined,再取子属性就会报错,请看下面的代码。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_3.jpg?sign=1739142602-3nx4NyMibVlq8r2QuiTf3F2R2erBSaFo-0-1bd1fed793efb0f52e142678b6beffc2)
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_4.jpg?sign=1739142602-GBWk33cldDA8NSBbPLglsjRBcWgOSkec-0-15fe6402aeb02ba088e3de1d24181bf7)
上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_5.jpg?sign=1739142602-guGhoD3Ps1Z989ayxgJZH84pbdbDFp6e-0-51b0737d6342d813d1278d1a19c331a8)
上面的代码将整个解构赋值语句放在一个圆括号里面,这样就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
解构赋值允许等号左边的模式之中不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/68_6.jpg?sign=1739142602-MQ6bbznLtUUi6m5nO8SR34R8UlMNOHhR-0-0a7793f497c8f687cf62a9e39980fd02)
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_1.jpg?sign=1739142602-7fA26Cyd85Z2Lgf4HUuuntOKX5a7FyrW-0-789a887e89e877d887d2cec424a898fc)
上面的代码将 Math 对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
![](https://epubservercos.yuewen.com/F720A1/26763854109471806/epubprivate/OEBPS/Images/69_2.jpg?sign=1739142602-celMFUk5s0g3YHV8YZVmbSTdZQRmjaLh-0-0a957a5cb0e3a8fac74d7b09aecde26c)
上面的代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length-1]就是2键,对应的值是3。方括号这种写法属于“属性名表达式”,参见第9章。