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