2018-10-10 18:03:03 -04:00
---
id: 587d78b3367417b2b2512b11
title: Add Items Using splice()
challengeType: 1
2020-08-04 15:14:21 +08:00
forumTopicId: 301152
localeTitle: 使用 splice() 增加项目
2018-10-10 18:03:03 -04:00
---
## Description
2020-08-04 15:14:21 +08:00
< section id = 'description' >
你还记得在上个挑战中我们提到< code > splice()< / code > 方法可以接受最多 3 个参数吗?我们现在可以进一步了解< code > splice()< / code > 。除了移除元素,我们还可以利用它的第三个参数来向数组中< em > 添加< / em > 元素。第三个参数可以是一个或多个元素,这些元素会被添加到数组中。这使我们能够便捷地将数组中的一个或一系列元素换成其他的元素。例如:
```js
const numbers = [10, 11, 12, 12, 15];
const startIndex = 3;
const amountToDelete = 1;
numbers.splice(startIndex, amountToDelete, 13, 14);
// 第二个 12 被移除,在第二个 12 的索引处添加 13、14。
console.log(numbers);
// 返回 [ 10, 11, 12, 13, 14, 15 ]
```
以一个数字数组开始。接着调用 < code > splice()< / code > 方法,在 (3) 的索引位置开始删除元素,删除的元素数量是 (1), (13, 14) 是在删除位置插入的元素,可以在 < code > amountToDelete< / code > 后面插入任意数量的元素(以逗号分隔),每个都会被插入。
< / section >
2018-10-10 18:03:03 -04:00
## Instructions
2020-08-04 15:14:21 +08:00
< section id = 'instructions' >
我们已经定义了一个< code > htmlColorNames< / code > 函数,它以一个 HTML 颜色的数组作为输入参数。请修改这个函数,利用< code > splice()< / code > 来移除数组中的前两个元素,并在对应的位置上添加< code > 'DarkSalmon'< / code > 和< code > 'BlanchedAlmond'< / code > 。
< / section >
2018-10-10 18:03:03 -04:00
## Tests
< section id = 'tests' >
```yml
tests:
- text: '< code > htmlColorNames</ code > 应该返回< code > [" DarkSalmon" , " BlanchedAlmond" , " LavenderBlush" , " PaleTurqoise" , " FireBrick" ]</ code > '
2020-02-18 01:40:55 +09:00
testString: assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']);
2018-10-10 18:03:03 -04:00
- text: < code > htmlColorNames</ code > 函数应该使用< code > splice()</ code > 方法
2020-02-18 01:40:55 +09:00
testString: assert(/.splice/.test(code));
2018-10-10 18:03:03 -04:00
- text: 你不应该使用< code > shift()</ code > 或< code > unshift()</ code > 。
2020-02-18 01:40:55 +09:00
testString: assert(!/shift|unshift/.test(code));
2018-10-10 18:03:03 -04:00
- text: 您不应该使用数组括号表示法。
2020-02-18 01:40:55 +09:00
testString: assert(!/\[\d\]\s*=/.test(code));
2018-10-10 18:03:03 -04:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'js-seed' >
```js
function htmlColorNames(arr) {
// change code below this line
// change code above this line
return arr;
}
// do not change code below this line
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
2020-08-04 15:14:21 +08:00
function htmlColorNames(arr) {
arr.splice(0,2,'DarkSalmon', 'BlanchedAlmond');
return arr;
}
2018-10-10 18:03:03 -04:00
```
2020-08-04 15:14:21 +08:00
2018-10-10 18:03:03 -04:00
< / section >