70 lines
4.3 KiB
Markdown
70 lines
4.3 KiB
Markdown
---
|
||
id: 587d78b3367417b2b2512b11
|
||
title: Add Items Using splice()
|
||
challengeType: 1
|
||
forumTopicId: 301152
|
||
localeTitle: Добавление элементов с помощью splice ()
|
||
---
|
||
|
||
## Description
|
||
<section id='description'>
|
||
Помните, что в последнем вызове мы упоминали, что <code>splice()</code> может принимать до трех параметров? Ну, мы можем сделать еще один шаг с помощью <code>splice()</code> - в дополнение к удалению элементов, мы можем использовать этот третий параметр, который представляет один или несколько элементов, чтобы <em>добавить</em> их также. Это может быть невероятно полезно для быстрого переключения элемента или набора элементов для другого. Например, предположим, что вы храните цветовую схему для набора элементов DOM в массиве и хотите динамически изменять цвет на основе некоторых действий: <blockquote> function colorChange (arr, index, newColor) { <br> arr.splice (индекс, 1, newColor); <br> return arr; <br> } <br><br> let colorScheme = ['# 878787', '# a08794', '# bb7e8c', '# c9b6be', '# d1becf']; <br><br> colorScheme = colorChange (colorScheme, 2, '# 332327'); <br> // мы удалили '# bb7e8c' и добавили '# 332327' на свое место <br> // colorScheme теперь равно ['# 878787', '# a08794', '# 332327', '# c9b6be', '# d1becf'] </blockquote> Эта функция принимает массив шестнадцатеричных значений, индекс, с которого нужно удалить элемент, и новый цвет для замены удаленного элемента. Возвращаемое значение представляет собой массив, содержащий новую измененную цветовую схему! Хотя этот пример немного упрощен, мы можем видеть, что значение, использующее <code>splice()</code> может иметь максимальный потенциал.
|
||
</section>
|
||
|
||
## Instructions
|
||
<section id='instructions'>
|
||
Мы определили функцию <code>htmlColorNames</code> , которая принимает в качестве аргумента массив цветов HTML. Измените функцию с помощью <code>splice()</code> чтобы удалить первые два элемента массива и добавить <code>'DarkSalmon'</code> и <code>'BlanchedAlmond'</code> в соответствующие места.
|
||
</section>
|
||
|
||
## Tests
|
||
<section id='tests'>
|
||
|
||
```yml
|
||
tests:
|
||
- text: <code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>
|
||
testString: assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']);
|
||
- text: The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method
|
||
testString: assert(/.splice/.test(code));
|
||
- text: You should not use <code>shift()</code> or <code>unshift()</code>.
|
||
testString: assert(!/shift|unshift/.test(code));
|
||
- text: You should not use array bracket notation.
|
||
testString: assert(!/\[\d\]\s*=/.test(code));
|
||
|
||
```
|
||
|
||
</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
|
||
function htmlColorNames(arr) {
|
||
arr.splice(0,2,'DarkSalmon', 'BlanchedAlmond');
|
||
return arr;
|
||
}
|
||
```
|
||
|
||
</section>
|