Artigo original: JavaScript Splice – How to Use the .splice() JS Array Method

O método splice() é um método incorporado para objetos de array em JavaScript. Ele permite alterar o conteúdo do seu array removendo ou substituindo elementos existentes por novos elementos.

Esse método modifica o array original e retorna os elementos removidos como um novo array.

Neste tutorial, você aprenderá a remover, adicionar e substituir elementos de um array usando o método splice(). Vamos começar com a remoção de elementos de um array primeiro.

Como remover elementos array com splice()

Por exemplo, vamos supor que você tenha um array com o nome dos meses, mas tem alguns nomes de dias da semana no array, como a seguir:

let meses = ["Janeiro", "Fevereiro", "Segunda", "Terça"];
Um array misto de nomes de mês e de dia

Você pode usar o método splice() para remover os nomes dos dias do método meses e adicioná-lo a uma novo array ao mesmo tempo:

let meses = ["Janeiro", "Fevereiro", "Segunda", "Terça"];
let dias = meses.splice(2);

console.log(dias); // ["Segunda", "Terça"]
Criando um array de dias

O método splice() precisa de pelo menos um parâmetro, que é o índice de início, onde a operação de fatiamento (splice, em inglês) começa. No código acima, o número 2 é passado para o método, o que significa que o splice() começará a remover elementos a partir do índice 2.

Você também pode definir quantos elementos deseja remover do array, passando um segundo argumento numérico conhecido como contador de remoção (em inglês, removeCount). Por exemplo, para remover apenas um elemento, você pode passar o número 1, deste modo:

let meses = ["Janeiro", "Fevereiro", "Segunda", "Terça"];
let dias = meses.splice(2, 1);

console.log(dias); // ["Segunda"]
console.log(meses); // ["Janeiro", "Fevereiro", "Terça"]
Remover apenas um elemento do array

Quando você omite o parâmetro removeCount, splice() removerá todos os elementos desde o índice inicial até o final do array.

Como remover e adicionar elementos do array com splice()

O método também permite adicionar novos elementos logo após a operação de exclusão. Você só precisa passar os elementos que deseja adicionar ao array após a contagem de exclusão.

A sintaxe completa do método splice() é a seguinte:

Array.splice(inicio, removeCount, novoItem, novoItem, novoItem, ...)
Sintaxe completa do método splice()

O exemplo a seguir mostra como você pode remover "Segunda" e "Terça" e adicionar "Março" e "Abril" ao array dos meses:

let meses = ["Janeiro", "Fevereiro", "Segunda", "Terça"];
let dias = meses.splice(2, 2, "Março", "Abril");

console.log(dias); // ["Segunda", "Terça"]
console.log(months); // ["Janeiro", "Fevereiro", "Março", "Abril"]
Usando o splice() para remover e adicionar ambos os elementos a um array

Como adicionar novos elementos do array sem remover nenhum elemento

Finalmente, você pode adicionar novos elementos sem remover nenhum, passando o número 0 para o parâmetro removeCount. Quando nenhum elemento for removido, o método splice retornará um array vazio. Você pode escolher se deseja ou não armazenar o array vazio retornado a uma variável.

O exemplo a seguir mostra como você pode adicionar um novo elemento "Março" ao lado de "Fevereiro" sem deletar nenhum elemento. Como o método splice() devolve um array vazio, você não precisa armazenar o array retornado:

let meses = ["Janeiro", "Fevereiro", "Segunda", "Terça"];
months.splice(2, 0, "Março");

console.log(meses); 
// ["Janeiro", "Fevereiro", "Março", "Segunda", "Terça"]
O método splice() chamado sem retornar nenhum elemento

Conclusão

Você acabou de aprender como funciona o método splice(). Ótimo trabalho!

O método splice() é usado principalmente quando você precisa excluir ou adicionar novos elementos a um array. Em algumas situações, você também pode usá-lo para separar um array que tenha conteúdo misto, como no caso acima.

Quando você remove 0 elementos do array, o método simplesmente retornará um array vazio. Você está sempre livre para atribuir ao array retornado para uma variável ou ignorá-lo.

Obrigado por ler este tutorial

Se você quiser saber mais sobre JavaScript, talvez queira conferir o site da web do autor, em sebhastian.com, onde ele já publicou mais de 100 tutoriais sobre programação (em inglês) com JavaScript.

Os tutoriais incluem manipulação de strings, manipulação de datas, métodos de arrays e objetos, soluções de algoritmos em JavaScript, e muito mais.

Não deixe de conferir 😉