Array.splice e Array.slice em JavaScript

Olá Habr! Apresento a você a tradução do artigo “Array.splice e Array.slice em JavaScript” de Kunal Tandon.

Você simplesmente deve usar as funções acima disponíveis no protótipo JavaScript Array. Mas eles são tão parecidos que às vezes você pode ficar confuso entre eles.

Principais diferenças

Array.splice modifica a matriz original e retorna uma matriz que contém os elementos excluídos.

Array.slice não modifica a matriz original. Ele simplesmente retorna uma nova matriz de elementos, que é um subconjunto da matriz original.

Array.splice

A emenda é usada para modificar o conteúdo de uma matriz, que inclui a exclusão de elementos, a substituição de elementos existentes ou até a adição de novos elementos a essa matriz.

Ao usar a função de emenda, a matriz original é atualizada.

Considere a seguinte matriz:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice com sintaxe

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Excluir itens

Para remover elementos de uma matriz, escrevemos:

 var deleItems = arr.splice (3, 2); 

Isso removerá os dois elementos começando no índice 3 e retornará a matriz remota. Como resultado, obtemos:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Adicionando novos itens

Para adicionar novos elementos à matriz, escrevemos:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

A partir do segundo elemento da matriz, serão adicionados os números 100 e 101. Os valores finais serão os seguintes:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Modificar um item existente

Podemos modificar astuciosamente um elemento existente na matriz usando emenda para remover o elemento pelo seu número de índice e inserir um novo elemento em seu lugar.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Para substituir 3 por 100, escrevemos:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

Obtemos os seguintes valores para arr e arr2 após executar o snippet de código acima:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

Embora a emenda também possa inserir e atualizar elementos da matriz, a função de fatia é usada apenas para remover elementos da matriz.
Só podemos remover elementos da matriz usando a função de fatia

Sintaxe Array.slice

arr.slice (startIndex, endIndex);

startIndex - o índice inicial do elemento para a nova matriz, que devemos obter na nova matriz
startIndex.endIndex (opcional) - o índice final no qual o fatiamento deve ser executado, sem incluir esse elemento.

Considere a seguinte matriz:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Para obter uma parte da matriz dos valores [2, 3, 4, 5], escrevemos:

 var slicedArr = arr.slice (2, 6); 

Observe que aqui especificamos o segundo argumento 6, não 5. Depois de executar o código acima, obtemos a seguinte matriz:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

A variável arr permanece inalterada após a execução da instrução de fatia, enquanto a instrução de emenda atualiza a matriz original.

Portanto, se queremos atualizar a matriz original, usamos a função de emenda, mas se precisarmos apenas de parte da matriz, usamos fatia.