64 lines
4.7 KiB
Markdown
64 lines
4.7 KiB
Markdown
|
---
|
|||
|
|
id: 587d78b3367417b2b2512b11
|
|||
|
|
title: Add Items Using splice()
|
|||
|
|
challengeType: 1
|
|||
|
|
videoUrl: ''
|
|||
|
|
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> должны возвращать <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>'
|
|||
|
|
testString: 'assert.deepEqual(htmlColorNames(["DarkGoldenRod", "WhiteSmoke", "LavenderBlush", "PaleTurqoise", "FireBrick"]), ["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"], "<code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>");'
|
|||
|
|
- text: Функция <code>htmlColorNames</code> должна использовать метод <code>splice()</code>
|
|||
|
|
testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");'
|
|||
|
|
- text: Вы не должны использовать <code>shift()</code> или <code>unshift()</code> .
|
|||
|
|
testString: 'assert(!/shift|unshift/.test(code), "You should not use <code>shift()</code> or <code>unshift()</code>.");'
|
|||
|
|
- text: Не следует использовать нотацию массива.
|
|||
|
|
testString: 'assert(!/\[\d\]\s*=/.test(code), "You should not use array bracket notation.");'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</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
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|