Array splice() do JavaScript explicado: excluir, inserir, substituir (com exemplos)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução: O que é o método splice?

O JavaScript fornece um método conveniente chamado splice que permite adicionar, remover e substituir elementos em um array de forma eficiente.

Por exemplo, você já se deparou com situações como essas?

• Você quer remover alguns elementos de um array.
• Você quer inserir novos elementos em uma posição específica.
• Você quer substituir elementos existentes por valores diferentes.

Nessas situações, o método splice é extremamente útil.

Objetivo deste Artigo

Neste artigo, explicaremos o método splice do JavaScript em detalhes — desde os conceitos básicos até casos de uso práticos. Com muitos exemplos de código, você poderá construir conhecimento prático e do mundo real.

Para Quem é Este Artigo

• Iniciantes que acabaram de começar a aprender JavaScript.
• Aprendizes intermediários que querem aprofundar seu entendimento sobre manipulação de arrays.
• Programadores que querem escrever código eficiente para o trabalho no mundo real.

O Que Você Aprenderá

Ao final deste artigo, você será capaz de:

• Entender a sintaxe do splice e como usar seus argumentos.
• Realizar operações básicas, como deletar, inserir e substituir elementos.
• Compreender claramente como ele difere de outros métodos de array e escolher a ferramenta certa para o trabalho.

Na próxima seção, começaremos com o conceito central e a sintaxe do método splice.

2. Conceito Central: Visão Geral e Sintaxe do splice

Nesta seção, explicaremos o conceito básico e a sintaxe do método splice do JavaScript em detalhes.

2.1 Visão Geral do Método splice

O método splice é um método destrutivo usado para deletar, inserir e substituir elementos em um array. Um método destrutivo significa que ele muta o array original diretamente.

Ao gerenciar dados dinamicamente no JavaScript, ser capaz de manipular elementos de array de forma flexível é muito valioso — por isso o splice é comumente usado.

Principais capacidades:

1. Remover elementos a partir de uma posição especificada.
2. Inserir novos elementos em qualquer posição.
3. Substituir elementos existentes por valores diferentes.

2.2 Sintaxe do Método splice

A sintaxe básica é a seguinte:

array.splice(start, deleteCount, item1, item2, ...);

Detalhes dos argumentos:

1. start (obrigatório)

• Especifica o índice a partir do qual começar a alterar o array.
• Se você passar um valor negativo, ele conta a partir do final do array.

1. deleteCount (opcional)

• Especifica quantos elementos remover.
• Se você definir como 0, nenhum elemento é removido e apenas novos elementos são inseridos.
• Se omitido, todos os elementos de start até o final do array são removidos.

1. item1, item2, … (opcional)

• Elementos a serem inseridos no array.
• Se omitido, o splice realiza apenas a deleção.

Valor de retorno:

• Retorna um novo array contendo os elementos removidos.

2.3 Exemplos e Explicações

1. Removendo elementos

   let fruits = ["apple", "banana", "cherry", "date"];
   // Remove 2 elements starting at index 1
   let removed = fruits.splice(1, 2);
   
   console.log(fruits);   // ["apple", "date"]
   console.log(removed);  // ["banana", "cherry"]
   

2. Inserindo elementos

   let colors = ["red", "blue"];
   // Insert 2 elements at index 1
   colors.splice(1, 0, "green", "yellow");
   
   console.log(colors);  // ["red", "green", "yellow", "blue"]
   

3. Substituindo elementos

   let numbers = [1, 2, 3, 4, 5];
   // Replace 2 elements starting at index 1
   numbers.splice(1, 2, 'a', 'b');
   
   console.log(numbers);  // [1, 'a', 'b', 4, 5]
   

2.4 Pontos Principais

• splice é destrutivo: ele muta o array original, então use-o com cuidado.
• Altamente flexível: um método pode lidar com deleção, inserção e substituição.
• Versátil com base em combinações de argumentos: suporta operações simples e avançadas.

Na próxima seção, introduziremos mais exemplos de uso detalhados e padrões de código práticos. Vamos aprofundar seu entendimento por meio de cenários do mundo real.

3. Exemplos: Operações Básicas de splice

Nesta seção, percorreremos exemplos concretos de uso do método splice. Abordaremos exclusão, inserção e substituição com código de amostra.

3.1 Removendo Elementos

Como remover elementos a partir de uma posição específica

Exemplo de código:

let fruits = ["apple", "banana", "cherry", "date"];
// Remove 2 elements starting at the second index
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

Explicação:

• Índice inicial (1) : começa em “banana” (índice 1).
• Número de elementos a remover (2) : remove “banana” e “cherry”.
• Valor de retorno : devolve os elementos removidos como um novo array.

Ponto:
Observe que o array original fruits é mutado.

3.2 Inserindo Elementos

Como inserir novos elementos em uma posição específica

Exemplo de código:

let colors = ["red", "blue"];
// Insert 2 elements at index 1
colors.splice(1, 0, "green", "yellow");

console.log(colors);  // ["red", "green", "yellow", "blue"]

Explicação:

• Índice inicial (1) : começa a inserir no índice 1.
• Número de elementos a remover (0) : não remove nada.
• Elementos a inserir (“green”, “yellow”) : insere “green” e “yellow”.

Ponto:
Se quiser inserir sem excluir, defina deleteCount como 0.
É possível inserir vários elementos separando‑os por vírgulas.

3.3 Substituindo Elementos

Como substituir elementos existentes novos valores

Exemplo de código:

let numbers = [10, 20, 30, 40];
// Replace 2 elements starting at index 1
numbers.splice(1, 2, 25, 35);

console.log(numbers);  // [10, 25, 35, 40]

Explicação:

• Índice inicial (1) : começa em “20”.
• Número de elementos a remover (2) : remove “20” e “30”.
• Elementos a inserir (25, 35) : insere “25” e “35”.

Ponto:
Ao excluir e inserir em uma única chamada, você pode substituir elementos.

3.4 Usando um Índice Negativo

Com splice, você pode usar um índice negativo para contar a partir do final do array.

Exemplo de código:

let items = ["a", "b", "c", "d"];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(items);  // ["a", "b", "d"]

Explicação:

• Índice inicial (-2) : tem como alvo “c” como posição inicial da remoção.
• Índices negativos permitem operar em relação ao final do array.

3.5 Inserindo em um Array Vazio

Você também pode usar splice com um array vazio.

Exemplo de código:

let empty = [];
empty.splice(0, 0, "new item");

console.log(empty);  // ["new item"]

Ponto:
Isso é útil quando você deseja inicializar um array vazio enquanto insere elementos.

3.6 Resumo dos Exemplos

• Remover elementos : especifique um índice inicial e uma contagem de exclusão.
• Inserir elementos : defina deleteCount como 0 e forneça os itens.
• Substituir elementos : exclua e insira na mesma operação.
• Índices negativos : especifique posições a partir do final.
• Inserção em array vazio : insira enquanto inicializa.

Na próxima seção, veremos usos mais avançados. Vamos aprender técnicas que ajudam na manipulação de dados do mundo real e fluxos de trabalho práticos.

4. Exemplos Avançados: Cenários Práticos

Nesta seção, apresentaremos exemplos avançados usando o método splice. Baseados em cenários reais, explicaremos como lidar com operações de dados mais complexas.

4.1 Removendo Elementos Duplicados

Cenário: Você quer remover elementos duplicados de uma lista, deixando apenas uma ocorrência de cada.

Exemplo de código:

let numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates
for (let i = 0; i < numbers.length; i++) {
  while (numbers.indexOf(numbers[i]) !== numbers.lastIndexOf(numbers[i])) {
    numbers.splice(numbers.lastIndexOf(numbers[i]), 1);
  }
}

console.log(numbers); // [1, 2, 3, 4, 5]

Explicação:

1. Use indexOf e lastIndexOf para verificar se o mesmo valor aparece várias vezes.
2. Se duplicatas forem encontradas, remova-as usando splice .

4.2 Inserindo um Elemento em uma Posição Específica

Cenário: Você precisa inserir um novo elemento em uma posição específica de um array.

Exemplo de código:

let tasks = ["Start", "In Progress", "Done"];
tasks.splice(1, 0, "On Hold");

console.log(tasks); // ["Start", "On Hold", "In Progress", "Done"]

Explicação:

• Inserimos “On Hold” no índice 1.
• O array original é mutado, e os elementos existentes deslocam‑se para a direita.

4.3 Substituindo Elementos que Correspondem a uma Condição

Cenário: Você quer substituir elementos que correspondem a uma condição específica por um valor diferente.

Exemplo de código:

let scores = [50, 60, 70, 80, 90];

// Replace scores of 70 or lower with "Fail"
for (let i = 0; i < scores.length; i++) {
  if (scores[i] <= 70) {
    scores.splice(i, 1, "Fail");
  }
}

console.log(scores); // ["Fail", "Fail", "Fail", 80, 90]

Explicação:

1. Percorra o array e encontre os elementos que correspondem à condição.
2. Quando uma correspondência for encontrada, substitua‑a usando splice .

4.4 Removendo Múltiplos Elementos de um Array

Cenário: Você deseja remover todas as ocorrências de um valor específico de uma só vez.

Exemplo de código:

let items = ["apple", "banana", "cherry", "banana", "date"];

// Remove all "banana"
for (let i = items.length - 1; i >= 0; i--) {
  if (items[i] === "banana") {
    items.splice(i, 1);
  }
}

console.log(items); // ["apple", "cherry", "date"]

Explicação:

• Percorrer o array de trás para frente evita problemas de deslocamento de índice ao remover elementos com splice

4.5 Reordenando Elementos em um Array

Cenário: Você deseja reordenar elementos em um array.

Exemplo de código:

let numbers = [10, 20, 30, 40];

// Swap positions (reorder)
numbers.splice(1, 2, 35, 25);

console.log(numbers); // [10, 35, 25, 40]

Explicação:

• Isso remove os elementos existentes e insere novos na ordem desejada.
• Pode ser aplicado a processamentos de dados mais complexos e ao gerenciamento de listas.

4.6 Resumo de Exemplos Avançados

• Remoção de duplicatas: útil para limpeza de dados.
• Inserção de elementos: permite adições flexíveis em listas e arrays.
• Substituição condicional: útil para filtragem e gerenciamento de status.
• Remoção em massa: limpeza eficiente de dados indesejados.
• Reordenação: útil para ajustar a ordem de exibição e gerenciamento de listas.

Na próxima seção, compararemos splice com outros métodos de array e explicaremos como escolher o método correto para cada situação.

5. Comparação com Outros Métodos

Nesta seção, compararemos o método splice com outros métodos de array que servem a propósitos semelhantes. Entender suas características ajuda a escolher a melhor abordagem.

5.1 splice vs slice

splice: alterações destrutivas

• Mutua o array original (destrutivo).
• Pode excluir, inserir e substituir elementos.

slice: cópia não destrutiva

• Não mutua o array original; retorna um novo array (não destrutivo).
• Apenas extrai elementos de um intervalo; não pode inserir ou substituir.

Tabela de comparação:

Exemplo: splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove 2 elements starting at index 1
console.log(arr); // [1, 4]

Exemplo: slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // Get elements from index 1 up to (but not including) 3
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Ponto chave:

• Se você não quiser alterar o array original, escolha slice.
• Se precisar de modificações dinâmicas, in‑place, use splice.

5.2 splice vs push/pop

push: acrescentar ao final

• Adiciona um elemento ao final de um array.
• Mutua o array original.

pop: remover do final

• Remove um elemento do final de um array.
• Modifica o array original.

Tabela de comparação:

Exemplo: push

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Exemplo: pop

let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

Ponto principal:

• push/pop são ideais para operações simples no final de um array.
• splice é melhor para alterações mais complexas (como editar uma posição específica).

5.3 splice vs shift/unshift

shift: remover do início

• Remove o primeiro elemento de um array.
• Modifica o array original.

unshift: adicionar ao início

• Adiciona elementos ao início de um array.
• Modifica o array original.

Tabela de comparação:

Exemplo: shift

let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

Exemplo: unshift

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]

Ponto principal:

• shift/unshift são especializados em operações no início do array.
• splice oferece flexibilidade para posições intermediárias ou arbitrárias.

5.4 Resumo das Comparações de Métodos

Como escolher:

• Quando precisar de flexibilidade: use splice.
• Para operações simples: push/pop ou shift/unshift são adequados.
• Quando quiser preservar o array original: slice é a melhor opção.

Na próxima seção, discutiremos precauções e boas práticas ao usar splice. Vamos abordar os pontos principais para escrever código seguro e eficiente.

6. Precauções e Boas Práticas

Nesta seção, explicaremos precauções importantes e boas práticas para usar o método splice do JavaScript de forma eficaz.

6.1 Precauções

1. Ele modifica o array original (método destrutivo)
O método splice altera diretamente o array original. Se usado descuidadamente, pode comprometer a consistência dos dados.

Exemplo: o array é alterado

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solução: copie o array antes de editá-lo
Se quiser manter o array original, crie uma cópia usando slice primeiro.

let arr = [1, 2, 3, 4];
let copy = arr.slice(); // Create a copy
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

2. Cuidado com erros de índice
Se você especificar um índice incorreto, pode obter um comportamento inesperado.

Exemplo: uso indevido de um índice negativo

let arr = [1, 2, 3, 4];
arr.splice(-5, 1); // No error, but may not behave as expected
console.log(arr);  // [1, 2, 3, 4]

Solução: valide o intervalo de índices antecipadamente

let arr = [1, 2, 3, 4];
let index = -5;

if (index >= -arr.length && index < arr.length) {
  arr.splice(index, 1);
} else {
  console.log("Index is out of range.");
}

3. Impacto de desempenho
Como o splice desloca elementos após cada operação, pode ser lento em arrays grandes.

Exemplo: operando em dados grandes

let arr = Array(1000000).fill(0);
console.time("splice");
arr.splice(500000, 1); // Remove from the middle
console.timeEnd("splice");

Solução: considere dividir o array ou usar uma abordagem diferente

let arr = Array(1000000).fill(0);
let part1 = arr.slice(0, 500000); // First half
let part2 = arr.slice(500001);   // Second half
let result = part1.concat(part2); // Rebuild without the removed element

6.2 Boas Práticas

1. Use-o para gerenciamento de estado e edição de dados dinâmicos
splice é útil ao gerenciar listas dinâmicas ou atualizações acionadas pelo usuário.

Exemplo: remover uma tarefa em um aplicativo de tarefas

let tasks = ["Task 1", "Task 2", "Task 3"];
let index = tasks.indexOf("Task 2");
if (index !== -1) {
  tasks.splice(index, 1);
}
console.log(tasks); // ["Task 1", "Task 3"]

Ponto: combinar busca de índice e splice permite um gerenciamento flexível.

2. Use os elementos removidos
Porque splice retorna os elementos removidos, você pode usá‑los para registro ou armazenamento temporário.

Exemplo: registre o elemento removido

let users = ["Alice", "Bob", "Charlie"];
let removed = users.splice(1, 1); // Remove Bob
console.log(removed[0] + " was removed."); // Bob was removed.

Ponto: facilita o rastreamento de histórico e recursos de restauração.

3. Envolva operações comuns em funções reutilizáveis
Se você usa a mesma operação com frequência, transforme‑a em uma função para melhor reutilização e legibilidade.

Exemplo: função para remover um elemento específico

function removeElement(arr, value) {
  let index = arr.indexOf(value);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  return arr;
}

let items = ["a", "b", "c", "d"];
console.log(removeElement(items, "b")); // ["a", "c", "d"]

Ponto: reduz duplicação e melhora a legibilidade.

6.3 Resumo de Precauções e Boas Práticas

• Lembre‑se de que é destrutivo : o array original é mutado.
• Sempre valide os intervalos de índices : tenha cuidado com índices negativos e acesso fora do intervalo.
• Otimize para arrays grandes : considere dividir ou abordagens alternativas.
• Combine com registro/restauração : use os elementos removidos para gerenciar o histórico.
• Use funções para reutilização : melhore a manutenção com auxiliares reutilizáveis.

Na próxima seção, abordaremos perguntas comuns sobre splice em formato de FAQ para ajudá‑lo a resolver dúvidas típicas do mundo real.

7. Perguntas Frequentes (FAQ)

Nesta seção, compilamos perguntas e respostas comuns sobre o método splice. Esclareça suas dúvidas antecipadamente e busque uma compreensão mais profunda.

7.1 Lista de FAQ

Q1. O método splice é destrutivo?
R. Sim, splice é um método destrutivo.
Como o splice altera o array original, você deve usá‑lo com cuidado.

Exemplo: o array original é alterado

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solução: preserve o array original
Se você quiser preservar o estado original, crie uma cópia usando slice.

let arr = [1, 2, 3, 4];
let copy = arr.slice();
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

Q2. O que acontece se não houver elementos para remover com splice?
R. Se nada for removido, um array vazio é retornado.

Exemplo: quando deleteCount é 0

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 0, "new");
console.log(arr);     // [1, "new", 2, 3, 4]
console.log(removed); // [] (nothing was removed)

Ponto:

• Se deleteCount for definido como 0, nenhuma exclusão ocorre e apenas inserções são feitas.

Q3. Posso usar splice em um array vazio?
R. Sim, você pode usá‑lo mesmo em um array vazio.

Exemplo: inserir em um array vazio

let arr = [];
arr.splice(0, 0, "item");
console.log(arr); // ["item"]

Ponto:
Isso é útil ao inserir novos elementos.

Q4. Como os índices negativos são tratados?
R. Índices negativos indicam posições a partir do final do array.

Exemplo: usando um índice negativo

let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(arr); // [1, 2, 3, 5]

Ponto:

• Índices negativos fornecem edição flexível a partir do final.
• Eles são úteis quando você deseja operar próximo ao final do array.

Q5. Qual a diferença entre splice e slice?
R. A principal diferença é se o array original é mutado ou não.

Exemplo: comportamento do splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); 
console.log(arr); // [1, 4]

Exemplo: comportamento do slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Q6. Posso adicionar múltiplos elementos com splice?
R. Sim, você pode adicionar vários elementos listando‑os separados por vírgulas.

Exemplo: inserindo múltiplos elementos

let arr = [1, 4];
arr.splice(1, 0, 2, 3);
console.log(arr); // [1, 2, 3, 4]

Ponto:

• Forneça múltiplos elementos a partir do terceiro argumento em diante.
• Isso é útil para gerenciamento flexível de dados.

7.2 Resumo de FAQ

1. Esteja ciente de que é destrutivo : o array original é mutado.
2. Nenhuma exclusão não causa erros : ele retorna um array vazio.
3. Índices negativos permitem edição a partir do final : uma abordagem conveniente.
4. Escolher entre splice e slice importa : use slice se quiser preservar o array original.
5. Inserções múltiplas são fáceis : útil para gerenciamento prático de dados.

Na próxima seção, recapitularemos os pontos principais do artigo e apresentaremos recursos adicionais para aprendizado contínuo.

8. Conclusão

Neste artigo, explicamos o método JavaScript splice desde o básico até aplicações práticas. Vamos revisar os pontos chave e oferecer sugestões para os próximos passos.

8.1 Principais Aprendizados

1. Capacidades principais

• splice é um método poderoso para excluir, inserir e substituir elementos de um array.
• É um método destrutivo, ou seja, ele altera o array original.

2. Sintaxe e argumentos

• Use a forma splice(start, deleteCount, item1, item2, ...).
• Combine o índice inicial, a quantidade a excluir e os itens inseridos para realizar operações flexíveis.

3. Uso básico e avançado

• Além da exclusão, inserção e substituição básicas, abordamos padrões avançados como remoção de duplicatas e substituição condicional.

4. Comparação com outros métodos

• splice altera o array, enquanto slice extrai subarrays sem mutação.
• Para adições/remover simples, push / pop e shift / unshift também são úteis.

5. Cuidados e boas práticas

• Como ele muta o array, crie uma cópia quando precisar de segurança.
• Fique atento aos intervalos de índices e ao desempenho, e considere otimizações quando necessário.

6. Cobertura de FAQ

• Respondemos perguntas comuns como índices negativos e inserção de múltiplos elementos.

8.2 Próximos Passos

Embora splice seja essencial para aprender manipulação de arrays, o JavaScript oferece muitos outros métodos úteis. Aprender os seguintes métodos permitirá operações mais avançadas:

• Método map : transforma elementos e retorna um novo array.
• Método filter : extrai elementos que atendem a uma condição para um novo array.
• Método reduce : agrega elementos em um único resultado.

Ordem de aprendizado recomendada:

1. Pratique transformações de dados usando map e filter.
2. Experimente agregações mais avançadas com reduce.
3. Compare métodos destrutivos (push, pop, etc.) com métodos não destrutivos (slice, concat, etc.) e use cada um adequadamente.

8.3 Recursos de Referência

Para aprofundar seu entendimento, considere usar estes recursos:

• Documentação oficial MDN Web Docs – splice
• Sites de aprendizado online
• JavaScript.info – cobre JavaScript do básico ao avançado.
• Codecademy – oferece experiências de aprendizado interativas.
• Construa projetos práticos
• CodePen – ótimo para criar e compartilhar demonstrações de código.
• JSFiddle – ideal para testar e depurar JavaScript.

8.4 Observações Finais

O método splice é uma habilidade chave para entender a manipulação de arrays em JavaScript. Por meio deste artigo, você deve ter aprendido tudo, desde o uso básico até técnicas práticas.

No futuro, tente aplicar o que aprendeu aqui em projetos reais e explore combinar splice com outros métodos de array e otimizações de desempenho.

Continue cavando mais fundo em JavaScript e crie códigos mais eficientes e poderosos!