@@ -45,7 +45,6 @@ tail // [2, 3, 4]
4545``` javascript
4646var [foo] = [];
4747var [foo] = 1 ;
48- var [foo] = ' Hello' ;
4948var [foo] = false ;
5049var [foo] = NaN ;
5150var [bar, foo] = [1 ];
@@ -133,36 +132,14 @@ sixth // 5
133132
134133上面代码中,fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。
135134
136- ## 字符串的解构赋值
137-
138- 由于JavaScript引擎内部,某些场合时,字符串会被转为类似数组的对象。因此,字符串也可以解构赋值。
139-
140- ``` javascript
141- const [a , b , c , d , e ] = ' hello' ;
142- a // "h"
143- b // "e"
144- c // "l"
145- d // "l"
146- e // "o"
147- ```
148-
149- 类似数组的对象都有一个length属性,因此还可以对这个属性结构赋值。
150-
151- ``` javascript
152- let {length : len} = ' hello' ;
153- len // 5
154- ```
155-
156135## 对象的解构赋值
157136
158137解构不仅可以用于数组,还可以用于对象。
159138
160139``` javascript
161-
162140var { foo, bar } = { foo: " aaa" , bar: " bbb" };
163141foo // "aaa"
164142bar // "bbb"
165-
166143```
167144
168145对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
@@ -244,12 +221,11 @@ var x;
244221
245222``` javascript
246223// 正确的写法
247-
248- ({x}) = {x: 1 };
249- // 或者
250224({x} = {x: 1 });
251225```
252226
227+ 上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
228+
253229对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
254230
255231``` javascript
@@ -258,6 +234,26 @@ let { log, sin, cos } = Math;
258234
259235上面代码将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
260236
237+ ## 字符串的解构赋值
238+
239+ 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
240+
241+ ``` javascript
242+ const [a , b , c , d , e ] = ' hello' ;
243+ a // "h"
244+ b // "e"
245+ c // "l"
246+ d // "l"
247+ e // "o"
248+ ```
249+
250+ 类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
251+
252+ ``` javascript
253+ let {length : len} = ' hello' ;
254+ len // 5
255+ ```
256+
261257## 函数参数的解构赋值
262258
263259函数的参数也可以使用解构。
@@ -302,6 +298,67 @@ move(); // [0, 0]
302298
303299上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。
304300
301+ ## 圆括号问题
302+
303+ 解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。
304+
305+ 由此带来的问题是,如果模式中出现圆括号怎么处理。解构赋值的规则是,只要有可能导致解构的歧义,就不得使用圆括号。
306+
307+ 但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。
308+
309+ ### 不能使用圆括号的情况
310+
311+ 以下三种解构赋值不得使用圆括号。
312+
313+ (1)变量声明语句中,模式不能带有圆括号。
314+
315+ ``` javascript
316+ // 全部报错
317+ var [(a)] = [1 ];
318+ var { x: (c) } = {};
319+ var { o: ({ p: p }) } = { o: { p: 2 } };
320+ ```
321+
322+ 上面三个语句都会报错,因为它们都是变量声明语句,模式不能使用圆括号。
323+
324+ (2)函数参数中,模式不能带有圆括号。
325+
326+ 函数参数也属于变量声明,因此不能带有圆括号。
327+
328+ ``` javascript
329+ // 报错
330+ function f ([(z)]) { return z; }
331+ ```
332+
333+ (3)不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
334+
335+ ``` javascript
336+ // 全部报错
337+ ({ p: a }) = { p: 42 };
338+ ([a]) = [5 ];
339+ ```
340+
341+ 上面代码将整个模式放在模式之中,导致报错。
342+
343+ ``` javascript
344+ // 报错
345+ [({ p: a }), { x: c }] = [{}, {}];
346+ ```
347+
348+ 上面代码将嵌套模式的一层,放在圆括号之中,导致报错。
349+
350+ ### 可以使用圆括号的情况
351+
352+ 可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
353+
354+ ``` javascript
355+ [(b)] = [3 ]; // 正确
356+ ({ p: (d) } = {}); // 正确
357+ [(parseInt .prop )] = [3 ]; // 正确
358+ ```
359+
360+ 上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
361+
305362## 用途
306363
307364变量的解构赋值用途很多。
0 commit comments