freeCodeCamp

3.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b3367417b2b2512b11	Add Items Using splice()	1		Adicionar itens usando splice ()

Description

Lembre-se no último desafio que mencionamos que splice() pode levar até três parâmetros? Bem, podemos ir um passo além com splice() - além de remover elementos, podemos usar esse terceiro parâmetro, que representa um ou mais elementos, para adicioná- los também. Isso pode ser incrivelmente útil para trocar rapidamente um elemento ou um conjunto de elementos por outro. Por exemplo, digamos que você esteja armazenando um esquema de cores para um conjunto de elementos DOM em uma matriz e queira alterar dinamicamente uma cor com base em alguma ação:

function colorChange (arr, index, newColor) {
arr.splice (index, 1, newColor);
return arr;
}

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

colorScheme = colorChange (colorScheme, 2, '# 332327');
// removemos '# bb7e8c' e adicionamos '# 332327' em seu lugar
// colorScheme agora é igual a ['# 878787', '# a08794', '# 332327', '# c9b6be', '# d1becf']

Essa função usa uma matriz de valores hexadecimais, um índice no qual remover um elemento e a nova cor para substituir o elemento removido. O valor de retorno é uma matriz contendo um esquema de cores recém-modificado! Embora este exemplo seja um pouco simplificado, podemos ver o valor que a splice() pode ter no seu potencial máximo.

Instructions

Nós definimos uma função, htmlColorNames , que usa uma matriz de cores HTML como argumento. Modifique a função usando splice() para remover os dois primeiros elementos da matriz e adicione 'DarkSalmon' e 'BlanchedAlmond' em seus respectivos locais.

Tests

tests:
  - text: '<code>htmlColorNames</code> deve retornar <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: A função <code>htmlColorNames</code> deve utilizar o método <code>splice()</code>
    testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");'
  - text: Você não deve usar <code>shift()</code> ou <code>unshift()</code> .
    testString: 'assert(!/shift|unshift/.test(code), "You should not use <code>shift()</code> or <code>unshift()</code>.");'
  - text: Você não deve usar a notação de colchetes de matriz.
    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

3.7 KiB Raw Blame History