| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | id: 587d7b89367417b2b2512b48 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | title: 使用 spread 运算符展开数组项 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | challengeType: 1 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | forumTopicId: 301222 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | dashedName: use-the-spread-operator-to-evaluate-arrays-in-place | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --description--
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | ES6 引入了<dfn>展开操作符</dfn>,可以展开数组以及需要多个参数或元素的表达式。 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 下面的 ES5 代码使用了 `apply()` 来计算数组的最大值: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var arr = [6, 89, 3, 45]; | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | var maximus = Math.max.apply(null, arr); | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `maximus` 的值为 `89`。 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 我们必须使用 `Math.max.apply(null, arr)`,因为 `Math.max(arr)` 返回 `NaN`。 `Math.max()` 函数中需要传入的是一系列由逗号分隔的参数,而不是一个数组。 展开操作符可以提升代码的可读性,使代码易于维护。 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const arr = [6, 89, 3, 45]; | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | const maximus = Math.max(...arr); | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `maximus` 的值应该是 `89`。 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `...arr` 返回一个解压的数组。 也就是说,它*展开*数组。 然而,展开操作符只能够在函数的参数中或者数组中使用。 下面的代码将会报错: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | const spreaded = ...arr; | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --instructions--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 使用展开操作符将 `arr1` 中的内容都复制到 `arr2` 中去。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `arr2` 应该是从 `arr1` 复制而来。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-02-06 04:42:36 +00:00
										 |  |  | assert(arr2.every((v, i) => v === arr1[i]) && arr2.length); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 应使用展开操作符 `...` 来复制 `arr1`。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/)); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 当 `arr1` 改变的时候,`arr2` 应保持不变。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | assert((arr1, arr2) => { | 
					
						
							|  |  |  |   arr1.push('JUN'); | 
					
						
							|  |  |  |   return arr2.length < arr1.length; | 
					
						
							|  |  |  | }); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2020-08-04 15:13:35 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | # --seed--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## --seed-contents--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY']; | 
					
						
							|  |  |  | let arr2; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | arr2 = [];  // Change this line | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | console.log(arr2); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --solutions--
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY']; | 
					
						
							|  |  |  | let arr2; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | arr2 = [...arr1]; | 
					
						
							|  |  |  | ``` |