64 lines
3.7 KiB
Markdown
64 lines
3.7 KiB
Markdown
|
---
|
||
|
|
id: 587d78b3367417b2b2512b11
|
||
|
|
title: Add Items Using splice()
|
||
|
|
challengeType: 1
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: Adicionar itens usando splice ()
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> Lembre-se no último desafio que mencionamos que <code>splice()</code> pode levar até três parâmetros? Bem, podemos ir um passo além com <code>splice()</code> - além de remover elementos, podemos usar esse terceiro parâmetro, que representa um ou mais elementos, para <em>adicioná-</em> 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: <blockquote> function colorChange (arr, index, newColor) { <br> arr.splice (index, 1, newColor); <br> return arr; <br> } <br><br> deixe colorScheme = ['# 878787', '# a08794', '# bb7e8c', '# c9b6be', '# d1becf']; <br><br> colorScheme = colorChange (colorScheme, 2, '# 332327'); <br> // removemos '# bb7e8c' e adicionamos '# 332327' em seu lugar <br> // colorScheme agora é igual a ['# 878787', '# a08794', '# 332327', '# c9b6be', '# d1becf'] </blockquote> 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 <code>splice()</code> pode ter no seu potencial máximo. </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions"> Nós definimos uma função, <code>htmlColorNames</code> , que usa uma matriz de cores HTML como argumento. Modifique a função usando <code>splice()</code> para remover os dois primeiros elementos da matriz e adicione <code>'DarkSalmon'</code> e <code>'BlanchedAlmond'</code> em seus respectivos locais. </section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: '<code>htmlColorNames</code> deve retornar <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: 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.");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</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>
|