2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: 587d7b89367417b2b2512b48
|
2020-12-16 07:37:30 +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--
|
|
|
|
|
2020-08-04 07:13:35 +00:00
|
|
|
ES6 允许我们使用 <dfn>展开操作符</dfn> 来展开数组,以及需要多个参数或元素的表达式。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
下面的 ES5 代码使用了`apply()`来计算数组的最大值:
|
2020-08-04 07:13:35 +00:00
|
|
|
|
|
|
|
```js
|
|
|
|
var arr = [6, 89, 3, 45];
|
|
|
|
var maximus = Math.max.apply(null, arr); // returns 89
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
我们必须使用`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];
|
|
|
|
const maximus = Math.max(...arr); // returns 89
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
`...arr`返回了一个“打开”的数组。或者说它 *展开* 了数组。 然而,展开操作符只能够在函数的参数中,或者数组之中使用。下面的代码将会报错:
|
2020-08-04 07:13:35 +00:00
|
|
|
|
|
|
|
```js
|
|
|
|
const spreaded = ...arr; // will throw a syntax error
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +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
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
`arr2`的值是由`arr1`拷贝而来的。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert(arr2.every((v, i) => v === arr1[i]));
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +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
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +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];
|
|
|
|
```
|