freeCodeCamp

4.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b3367417b2b2512b11	Add Items Using splice()	1		Добавление элементов с помощью splice ()

Description

Помните, что в последнем вызове мы упоминали, что splice() может принимать до трех параметров? Ну, мы можем сделать еще один шаг с помощью splice() - в дополнение к удалению элементов, мы можем использовать этот третий параметр, который представляет один или несколько элементов, чтобы добавить их также. Это может быть невероятно полезно для быстрого переключения элемента или набора элементов для другого. Например, предположим, что вы храните цветовую схему для набора элементов DOM в массиве и хотите динамически изменять цвет на основе некоторых действий:

function colorChange (arr, index, newColor) {
arr.splice (индекс, 1, newColor);
return arr;
}

let colorScheme = ['# 878787', '# a08794', '# bb7e8c', '# c9b6be', '# d1becf'];

colorScheme = colorChange (colorScheme, 2, '# 332327');
// мы удалили '# bb7e8c' и добавили '# 332327' на свое место
// colorScheme теперь равно ['# 878787', '# a08794', '# 332327', '# c9b6be', '# d1becf']

Эта функция принимает массив шестнадцатеричных значений, индекс, с которого нужно удалить элемент, и новый цвет для замены удаленного элемента. Возвращаемое значение представляет собой массив, содержащий новую измененную цветовую схему! Хотя этот пример немного упрощен, мы можем видеть, что значение, использующее splice() может иметь максимальный потенциал.

Instructions

Мы определили функцию htmlColorNames , которая принимает в качестве аргумента массив цветов HTML. Измените функцию с помощью splice() чтобы удалить первые два элемента массива и добавить 'DarkSalmon' и 'BlanchedAlmond' в соответствующие места.

Tests

tests:
  - text: '<code>htmlColorNames</code> должны возвращать <code>[&quot;DarkSalmon&quot;, &quot;BlanchedAlmond&quot;, &quot;LavenderBlush&quot;, &quot;PaleTurqoise&quot;, &quot;FireBrick&quot;]</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.");'

Challenge Seed

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']));

Solution

// solution required

4.7 KiB Raw Blame History Unescape Escape