Como usar Splice em JavaScript: Entendendo o método Array

Splice é um método Javascript Array que altera o conteúdo de um array excluindo ou substituindo um elemento existente ou adicionando um novo elemento no lugar.

Neste guia, explicarei como usar o método Javascript Array splice. Desenvolvedores de qualquer nível podem ler e entender este artigo.

Compreendendo o método Array (junção)

Se dermos uma olhada no site do MDN, perceberemos que o construtor de protótipo de array Javascript, que nos permite adicionar novos métodos e propriedades ao objeto Array(), possui muitos métodos e splice é um deles.

Array.prototype.splice()

Se, no entanto, tentamos usar esse mesmo método no protótipo de string, como no exemplo abaixo;

const strings = 'learn'

strings.splice()

No entanto, receberíamos um erro de tipo dizendo:

Uncaught TypeError: strings.splice is not a function

É importante saber que emendar e fatiar não são a mesma coisa. O método slice não modifica ou altera seus dados, mas o método splice sim e é por isso que o método splice não pode ser usado em strings: strings são imutáveis.

Como usar o método de junção de matriz Javascript

Usar o método de matriz Javascript splice é fácil, mas a sintaxe às vezes é mal utilizada.

Você pode usar o método splice nestas etapas

arr.splice(start, deleteCount, item1, ..., itemN)

A propriedade splice() recebe alguns parâmetros, esses parâmetros são usados para determinar o comportamento de qualquer array para o qual o método splice foi chamado.

Eles são os seguintes:

• Começar
• deleteCount
• Itens

Começar

Este é apenas o índice no qual queremos que nosso array comece a mudança, nenhum elemento será removido se o índice do elemento for maior que o comprimento do array. Mas adiciona um argumento ao final da matriz se o índice for menor que o comprimento da matriz.

deleteCount

Este é um parâmetro opcional que denota o número de elementos a serem removidos da matriz, para excluir ou remover um elemento, o parâmetro inicial deve estar presente.

Se você não incluir este parâmetro, ou se ele tiver valor igual ao comprimento da matriz ou for ainda maior que o comprimento da matriz, todos os elementos do parâmetro inicial até o último item da matriz serão removidos. Observe que esse parâmetro deve ser incluído se houver um parâmetro de item presente.

Itens

Este também é um parâmetro opcional que informa o elemento a ser adicionado ao array

Se não declararmos os elementos, o método splice() da matriz Javascript excluirá os elementos da matriz. Isso retornaria uma matriz vazia.

Casos de uso

Agora que entendemos quais são os parâmetros, vamos tentar ver casos de uso e exemplos de como isso pode ser implementado ao escrever nosso programa.

Excluindo elementos zero antes de um índice especificado

Se quisermos adicionar um elemento sem remover nenhum item, simplesmente especificamos o índice e ele não removeria nada além de começar antes do índice especificado.

Vamos dar uma olhada no exemplo abaixo:

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

No código anterior, tentamos remover um elemento no índice 3 (mandarim), ou seja, assim que chegar ao índice 3, todos os itens encontrados serão excluídos sem substituí-lo por nenhum elemento.

Também podemos excluir um elemento e adicionar outros elementos.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

Da mesma forma, assim que chegássemos ao índice 3, o que quer que encontrasse, neste caso, 'orchestra', seria excluído e adicionado novos ('sax'). O código acima mostra como 'drum' foi adicionado ao array . A partir do índice 2, o zero diz para ele não remover nada, se tivéssemos 1 lá, ele removeria 1 elemento e adicionaria o item que queremos, e assim por diante.

Excluindo um ou mais elementos em um índice especificado

Digamos que queremos remover um item ou elemento sem adicionar um novo na matriz, poderíamos apenas escrevê-lo como o trecho de código anterior

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

Podemos começar em qualquer índice e remover quantos itens quisermos.

Excluir todos os elementos começando de um índice especificado

Podemos excluir todos os elementos da matriz a partir de qualquer índice que desejarmos. Digamos, por exemplo, que queremos remover tudo a partir do índice 1. Assim que chegar ao índice 1, todos os elementos a partir do índice 1 serão excluídos.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

Este trecho de código tenta remover todos os elementos a partir do índice 1. Onde o índice 1 é 'clown' na matriz. Como a contagem começa em 0, isso retornaria uma nova matriz. que contém apenas um elemento que é 'anjo'. Isso ocorre porque durante a contagem 'anjo' parece estar no índice 0, e a contagem começa no índice 1. O índice 0 seria omitido fazendo com que retornasse esse resultado.

Aprendizado

Se você precisa executar uma tarefa em uma matriz e não deseja que a matriz original seja alterada, o método splice() da matriz Javascript deve ser evitado porque eles alteram seus dados.

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

No exemplo acima. Antes da junção, o método do array Javascript era chamado na variável beforeSplice. Tínhamos 3 elementos, mas depois que o método foi aplicado, ele retorna 2 elementos. Este método alterou os dados. Às vezes não é isso que queremos. Mas se tudo o que você quer fazer é simplesmente remover elementos ou adicionar um elemento, é perfeito.

Te vejo na próxima.