Método splice() de Array em JavaScript Explicado: Excluir, Inserir e Substituir Elementos (com Exemplos Práticos)

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

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

3. Maneiras Práticas de Usar splice() (com Exemplos de Código)

Nesta seção, vamos percorrer exemplos práticos do uso do método splice() do JavaScript. Vamos cobrir três padrões comuns — deletar, inserir e substituir — e revisar notas chave para cada um.

3.1 Como Deletar Elementos

Com splice(), você pode facilmente remover elementos específicos de um array.

Exemplo 1: Deletar um único elemento

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 1); // Deletes "banana"
console.log(fruits); // ["apple", "cherry", "date"]

Explicação:

• Remove 1 elemento começando no índice 1 (“banana”).

Exemplo 2: Deletar múltiplos elementos

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2); // Deletes "banana" and "cherry"
console.log(fruits); // ["apple", "date"]

Explicação:

• Remove 2 elementos começando no índice 1 (“banana” e “cherry”).

Nota:
Como os elementos removidos são excluídos do array, o array original é alterado (este é um método destrutivo).

3.2 Como Inserir Elementos

Com splice(), você pode inserir novos elementos em uma posição específica.

Exemplo 1: Inserir um elemento

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

Explicação:

• Definir o segundo argumento como 0 permite inserir sem deletar nada.

Exemplo 2: Inserir múltiplos elementos

let colors = ["red", "blue"];
colors.splice(1, 0, "green", "yellow"); // Inserts multiple elements
console.log(colors); // ["red", "green", "yellow", "blue"]

Nota:
Não há um limite estrito na posição de inserção ou no número de elementos — insira quantos precisar.

3.3 Como Substituir Elementos

Você também pode substituir elementos existentes usando splice().

Exemplo 1: Substituir um único elemento

let numbers = [1, 2, 3, 4];
numbers.splice(1, 1, 5); // Replaces "2" at index 1 with "5"
console.log(numbers); // [1, 5, 3, 4]

Explicação:

• Deleta 1 elemento começando no índice 1, depois insere 5 na mesma posição.

Exemplo 2: Substituir múltiplos elementos

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6); // Replaces "2" and "3" with "5" and "6"
console.log(numbers); // [1, 5, 6, 4]

Explicação:

• Deleta 2 elementos começando no índice 1, depois insere 5 e 6.

4. Casos de Uso Avançados de splice(): Cenários Práticos

Aqui estão cenários práticos onde splice() pode ser especialmente útil — como gerenciar dados de formulário, editar linhas de tabela e pré-processar conjuntos de dados.

4.1 Exemplo: Manipulando Dados de Formulário

Gerenciando campos de formulário dinâmicos

Ao construir um formulário dinâmico onde os usuários podem adicionar ou remover campos, splice() é extremamente útil.

Exemplo: Adicionando e removendo campos

let formData = ["Name", "Email", "Phone"];

// Insert a field
formData.splice(2, 0, "Address");
console.log(formData); // ["Name", "Email", "Address", "Phone"]

// Remove a field
formData.splice(1, 1);
console.log(formData); // ["Name", "Address", "Phone"]

Explicação:

• Para inserir, adicionamos “Address” no índice 2.
• Para deletar, removemos “Email” no índice 1 e os elementos restantes se movem automaticamente.

Isso é útil quando você precisa modificar dinamicamente os campos com base nas ações do usuário.

4.2 Adicionando e Removendo Linhas de Tabela Dinâmicas

Em aplicações web, o gerenciamento de dados em estilo de tabela é comum. Aqui está um exemplo de inserção e deleção de linhas de tabela.

Exemplo: Adicionando e removendo linhas

let tableData = [
  ["ID", "Name", "Age"],
  [1, "Tanaka", 25],
  [2, "Sato", 30]
];

// Insert a new row
tableData.splice(2, 0, [3, "Takahashi", 28]);
console.log(tableData);
// [["ID", "Name", "Age"], [1, "Tanaka", 25], [3, "Takahashi", 28], [2, "Sato", 30]]

// Apagar uma linha
tableData.splice(1, 1);
console.log(tableData);
// [["ID", "Name", "Age"], [3, "Takahashi", 28], [2, "Sato", 30]]

Explanation:

• For inserting , we add a new data row at index 2.
• For deleting , we remove the row at index 1 (Tanaka).

This demonstrates flexible manipulation of table-like data structures.

4.3 Dataset Preprocessing and Editing

When handling large datasets, you may need to edit or replace specific records. Here’s an example of replacing part of a dataset.

Example: Updating a dataset

let users = [
  { id: 1, name: "Tanaka", age: 25 },
  { id: 2, name: "Sato", age: 30 },
  { id: 3, name: "Takahashi", age: 28 }
];

// Atualizar uma entrada
users.splice(1, 1, { id: 2, name: "Yamada", age: 32 });
console.log(users);
// [{ id: 1, name: "Tanaka", age: 25 }, { id: 2, name: "Yamada", age: 32 }, { id: 3, name: "Takahashi", age: 28 }]

Explanation:

• Deletes the record at index 1 and replaces it with a new object.
• Even object-based data can be edited smoothly with splice() .

5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)

In JavaScript, splice and slice are commonly used methods for working with arrays. Because their names look similar, it’s easy to confuse them—but their behavior and use cases are very different. In this section, we’ll compare splice() and slice() and explain how to choose the right one.

5.1 The Core Difference Between splice() and slice()

5.2 splice() Examples and Characteristics

Characteristics:

• It mutates the original array (a destructive method).
• You can insert, delete, and replace elements.

Example 1: Editing elements with splice()

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "orange", "grape"); // Remove "banana" e "cherry", depois insere novos elementos
console.log(fruits); // ["apple", "orange", "grape", "date"]

Explanation:

• Deletes 2 elements starting at index 1, then inserts “orange” and “grape”.
• The key point is that the original array is modified directly.

5.3 slice() Examples and Characteristics

Characteristics:

• The original array does not change (a non-destructive method).
• Used to extract elements into a new array.

Example 1: Extracting a portion with slice()

let fruits = ["apple", "banana", "cherry", "date"];
let result = fruits.slice(1, 3); // Extrai elementos do índice 1 até (mas não incluindo) 3
console.log(result); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"]

Explanation:

• Elements in the range [1, 3) are returned as a new array.
• The original array remains unchanged.

5.4 How to Choose Between splice() and slice()

1. Use splice() when you want to modify the array

Example: Removing an unnecessary item from a list

let tasks = ["task1", "task2", "task3"];
tasks.splice(1, 1); // Remove o item no índice 1
console.log(tasks); // ["task1", "task3"]

2. Use slice() when you want a subset without changing the original array

Example: Saving only part of an array separately

let data = [10, 20, 30, 40, 50];
let subset = data.slice(1, 4); // Extrai elementos do índice 1 até 4 (exclusivo)
console.log(subset); // [20, 30, 40]
console.log(data); // [10, 20, 30, 40, 50] (inalterado)

5.5 Practical Code Example: splice() vs slice()

The following code helps you see the difference between splice and slice more clearly.

let items = ["A", "B", "C", "D", "E"];

// splice: destrutivo (muta o array original)
let removed = items.splice(1, 2); // Remove "B" e "C"
console.log(items); // ["A", "D", "E"]
console.log(removed); // ["B", "C"]

// slice: não destrutivo (não muta o array original)
let extracted = items.slice(0, 2); // Extrai elementos do índice 0 até 2 (exclusivo)
console.log(items); // ["A", "D", "E"] (inalterado)
console.log(extracted); // ["A", "D"]

Key points:

• splice directly edits the original array, and returns the removed elements.
• slice keeps the original array intact and returns a new array.

6. splice() vs split(): Avoid Confusing Array Editing with String Splitting

JavaScript provides many methods for working with arrays and strings. Among them, split() looks similar to splice(), so they’re often confused—but they do completely different things. In this section, we’ll clarify the differences between split() and splice() to help you avoid common mistakes.

6.1 What Is split()?

split() is a string method that splits a string using a delimiter and returns an array.

Basic Syntax

string.split(separator, limit);

Parameter Details

1. separator (Required):

• A delimiter string or a regular expression used to split the string.

1. limit (Optional):

• The maximum number of elements to include in the returned array.

6.2 split() Examples

Example 1: Split a comma-separated string

let text = "apple,banana,cherry,date";
let result = text.split(","); // delimitador é ","
console.log(result); // ["apple", "banana", "cherry", "date"]

Example 2: Split a string by spaces

let sentence = "Hello World JavaScript";
let words = sentence.split(" "); // delimitador é um espaço
console.log(words); // ["Hello", "World", "JavaScript"]

Example 3: Split using a regular expression

let data = "2024/12/31";
let parts = data.split(/[-/]/); // divide por "-" ou "/"
console.log(parts); // ["2024", "12", "31"]

6.3 Key Differences Between splice() and split()

Here’s a table comparing splice and split side by side.

6.4 When to Use splice() vs split()

1. Use splice() when you want to edit an array

Example: Remove an unnecessary item from an array

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Remove o elemento no índice 1
console.log(colors); // ["red", "green"]

2. Use split() when you want to convert a string into an array

Example: Split a sentence into words

let sentence = "I love JavaScript";
let words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript"]

6.5 Combining split() and splice(): A Practical Example

Here’s a useful pattern: split a string into an array, then edit the array with splice().

Example: Split string data and then edit it

let data = "apple,banana,cherry,date";

// 1. Use split() para converter a string em um array
let fruits = data.split(","); // ["apple", "banana", "cherry", "date"]

// 2. Use splice() para editar o array
fruits.splice(2, 1, "grape"); // Substitui "cherry" por "grape"
console.log(fruits); // ["apple", "banana", "grape", "date"]

Key points:

• split converts a string into an array so it’s easier to work with.
• splice performs the needed edits (insert / delete / replace) on the array.

7. Important Notes When Using splice()

JavaScript’s splice() method is powerful, but depending on how you use it, it can cause unexpected behavior, errors, or performance issues. In this section, we’ll cover key cautions and best practices to help you use splice() safely and effectively.

7.1 Be Careful: splice() Mutates the Original Array

Problem: Risk of data loss due to destructive behavior

splice() modifies the original array directly. If you want to preserve the original data, you may accidentally lose it.

Example: The original array gets changed

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1, 2); // Removes 2 elements starting at index 1
console.log(numbers); // [1, 4] (original array is changed)
console.log(removed); // [2, 3] (removed elements)

Solução: Copie o array antes de editar

let numbers = [1, 2, 3, 4];
let copy = [...numbers]; // Copy the array
copy.splice(1, 2); // Edit the copy
console.log(numbers); // [1, 2, 3, 4] (original array is unchanged)
console.log(copy); // [1, 4]

7.2 Fique Atento a Problemas de Desempenho

Problema: Custo elevado ao editar arrays grandes

O splice() pode acionar o deslocamento de elementos e reindexação ao inserir ou remover itens. Com arrays grandes, isso pode se tornar lento.

Exemplo: Editando um array grande

let bigArray = Array(1000000).fill(0);
console.time("splice");
bigArray.splice(500000, 1); // Removes one element in the middle
console.timeEnd("splice"); // Measure execution time

Solução: Use processamento em lotes ou abordagens alternativas

• Divida o array e processe pedaços menores.
• Considere métodos não destrutivos como slice() ou concat() quando apropriado.

7.3 Evite Erros Causados por Valores de Índice Incorretos

Problema: Índices fora do intervalo podem levar a comportamentos inesperados

Com o splice(), especificar um índice fora do intervalo não gera um erro. Isso pode tornar os bugs mais difíceis de notar.

Exemplo: Índice fora do intervalo

let items = ["A", "B", "C"];
items.splice(5, 1); // Out-of-range index
console.log(items); // ["A", "B", "C"] (no error occurs)

Solução: Valide o índice antes de chamar splice()

let items = ["A", "B", "C"];
let index = 5;

if (index < items.length) {
  items.splice(index, 1);
} else {
  console.log("The specified index is out of range.");
}

7.4 Use o Valor de Retorno (Elementos Removidos)

Ponto chave: Elementos removidos são retornados como um array

O splice() retorna os elementos removidos como um array. Ao usar esse valor de retorno, você pode construir lógicas mais flexíveis.

Exemplo: Armazene elementos removidos em outro array

let tasks = ["task1", "task2", "task3"];
let removed = tasks.splice(1, 1); // Removes the element at index 1
console.log(removed); // ["task2"]

Uso prático: Salve o histórico de exclusões

let history = [];
let tasks = ["task1", "task2", "task3"];

let removed = tasks.splice(1, 1);
history.push(...removed);

console.log(history); // ["task2"]

7.5 Evite Erros Combinando splice() com Outros Métodos

• Usando map(): Se você quiser transformar cada elemento, use map() em vez de splice().
• Usando filter(): Se você quiser extrair elementos com base em uma condição, use filter() em vez de splice().

Exemplo: Extraia apenas elementos que correspondam a uma condição

let numbers = [10, 20, 30, 40, 50];
let filtered = numbers.filter(num => num > 20);
console.log(filtered); // [30, 40, 50]

8. Resumo: Pontos Chave para Dominar o splice()

Até agora, cobrimos o método splice() do JavaScript desde os conceitos básicos até casos de uso avançados e precauções importantes. Nesta seção, revisaremos o que você aprendeu e organizaremos os principais pontos que você pode aplicar em projetos reais.

8.1 Resumo Rápido dos Conceitos Básicos do splice()

• Propósito: Um método que pode deletar, inserir e substituir elementos em um array.
• Sintaxe:

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

• Principais recursos:

1. Deletar elementos → Remover dados desnecessários.
2. Inserir elementos → Adicionar novos dados em uma posição específica.
3. Substituir elementos → Alterar dados existentes para valores diferentes.

Exemplo: Operações principais (deletar / inserir / substituir)

let data = ["A", "B", "C", "D"];

// Delete
data.splice(1, 2); // ["A", "D"]

// Insert
data.splice(1, 0, "X", "Y"); // ["A", "X", "Y", "D"]

// Replace
data.splice(2, 1, "Z"); // ["A", "X", "Z", "D"]

É por isso que o splice() é tão útil — ele permite que você escreva edições de array de forma compacta e legível.

.### 8.2 Revisando Diferenças em Relação a Outros Métodos

1. splice() vs slice()

• splice(): Modifica o array original (destrutivo) → melhor para edição.
• slice(): Não modifica o array original (não destrutivo) → melhor para extração.

1. splice() vs split()

• splice(): Um método para editar arrays.
• split(): Um método para dividir strings em arrays.

8.3 Resumo de Casos de Uso Práticos

• Gerenciamento de dados de formulário: Adicionar ou remover campos para criar formulários dinâmicos.
• Edição de dados de tabela: Inserir ou excluir linhas para atualizações flexíveis da tabela.
• Processamento de dados: Editar eficientemente conjuntos de dados JSON ou baseados em objetos.

8.4 Melhores Práticas e Principais Precauções

• Tenha cuidado com edições destrutivas: Como splice() modifica o array original, crie uma cópia quando necessário.
• Consciência de desempenho: Para grandes conjuntos de dados, considere operações menores ou métodos alternativos.
• Prevenção de erros: Valide intervalos de índices e adicione verificações quando necessário.
• Use o valor de retorno: Acompanhe os elementos removidos para logs ou histórico.
• Considere outros métodos: Use filter() ou map() quando eles se adequam melhor ao seu objetivo.

8.5 Como Continuar Melhorando suas Habilidades com splice()

1. Aprenda escrevendo código real

• Tente usar splice() em cenários cotidianos para ganhar confiança através da prática.

2. Aprenda métodos de array relacionados juntos

• filter: Extrair elementos que correspondem a uma condição.
• map: Transformar cada elemento em um array.
• reduce: Agregar valores em um único resultado.

3. Use documentação oficial e recursos confiáveis

• Consulte a MDN Web Docs para as atualizações mais recentes.
• Explore mais exemplos e comparações com outros métodos de array.

Resumo e Próximos Passos

Neste artigo, explicamos os seguintes tópicos sobre o método splice() do JavaScript:

1. Sintaxe básica e como os parâmetros funcionam
2. Exemplos concretos de exclusão, inserção e substituição de elementos
3. Diferenças em relação a outros métodos (slice, split) e como escolher
4. Precauções importantes, prevenção de erros e dicas de desempenho

splice() é uma ferramenta extremamente poderosa para manipulação de arrays em JavaScript. Uma vez que você a utiliza corretamente, seu código se torna muito mais eficiente e flexível.

Em seguida, tente executar os exemplos de código deste artigo em seu próprio ambiente. Quanto mais você praticar, mais confortável ficará com a edição de arrays, e isso melhorará diretamente suas habilidades em JavaScript.

9. Perguntas Frequentes (FAQ): Perguntas Comuns Sobre splice()

Aqui estão algumas das perguntas e respostas mais comuns sobre o método splice() do JavaScript. Estas FAQs ajudam iniciantes e desenvolvedores intermediários a esclarecer dúvidas e aprofundar sua compreensão.

Q1. O splice() modifica o array original?

R. Sim. splice() modifica o array original diretamente.
O método splice() é considerado destrutivo porque altera o conteúdo do array após a operação.

Exemplo:

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Removes the element at index 1
console.log(colors); // ["red", "green"]

Q2. Qual é a diferença entre splice() e slice()?

R. splice() modifica o array original, enquanto slice() não o faz.

Exemplo: slice() é não destrutivo

let colors = ["red", "blue", "green"];
let newColors = colors.slice(1, 2);
console.log(colors);    // ["red", "blue", "green"]
console.log(newColors); // ["blue"]

Q3. Como adiciono elementos usando splice()?

R. Defina o segundo argumento (deleteCount) como 0 para inserir elementos.

Exemplo: Inserir elementos

let fruits = ["apple", "banana"];
fruits.splice(1, 0, "grape", "orange");
console.log(fruits); // ["apple", "grape", "orange", "banana"]

Q4. Como posso remover o último elemento usando splice()?

A. Use -1 como o índice inicial, ou calcule o último índice usando o comprimento do array.

Exemplo:

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

Q5. Posso pesquisar um elemento e removê-lo com splice()?

A. Sim. Encontre o índice primeiro, depois remova-o com splice().

Exemplo: Pesquisar por valor e remover

let fruits = ["apple", "banana", "cherry"];
let index = fruits.indexOf("banana");
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits); // ["apple", "cherry"]

Q6. Com o que devo ter cuidado ao usar splice() com grandes conjuntos de dados?

A. Esteja ciente dos custos de desempenho e considere processar em pedaços menores.

Exemplo: Medindo o desempenho

let bigArray = Array(100000).fill(0);
console.time("splice");
bigArray.splice(50000, 1000);
console.timeEnd("splice");

Q7. Como substituo múltiplos elementos usando splice()?

A. Passe múltiplos novos itens a partir do terceiro argumento.

Exemplo: Substituir múltiplos elementos

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6, 7);
console.log(numbers); // [1, 5, 6, 7, 4]

Resumo

Esta seção de FAQ abordou tanto perguntas básicas quanto avançadas sobre splice().

Principais aprendizados:

• splice() altera o array original, então use-o com cuidado.
• Entender as diferenças entre slice() e split() ajuda a evitar confusão.
• Considere o desempenho e a prevenção de erros para escrever código mais seguro.

Use estas FAQs como referência enquanto você testa exemplos de código e aprofunda seu entendimento sobre splice().

10. Resumo Final: Principais Aprendizados e Próximos Passos de Aprendizado

Neste artigo, fornecemos uma explicação completa do método splice() do JavaScript. Cobrimos tudo, desde os conceitos básicos até casos de uso no mundo real e perguntas frequentes, para que os leitores possam entender completamente como splice() funciona. Esta seção final revisa todo o artigo e sugere o que aprender em seguida.

10.1 Pontos Principais do splice()

• splice() é um método usado para deletar, inserir e substituir elementos em um array.
• Sintaxe :

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

• Principais casos de uso :
• Deletar elementos
• Inserir elementos
• Substituir elementos

10.2 Cenários Comuns Onde splice() É Usado

• Gerenciando dados de formulários: Ótimo para adicionar ou remover campos.
• Operações em tabelas dinâmicas: Útil para inserir ou deletar linhas.
• Pré-processamento de dados: Ajuda a editar conjuntos de dados JSON e registros baseados em objetos.

10.3 splice() Comparado a Outros Métodos de Array

• splice() vs slice(): splice() altera o array original, mas slice() não.
• splice() vs split(): split() é para strings e cria arrays dividindo texto.
• splice() vs map() / filter(): Use map() e filter() para transformações e filtragem, e use splice() para edições diretas no array.

10.4 Próximos Passos de Aprendizado

1. Escreva código prático: Experimente os exemplos neste artigo e crie o hábito de codificar regularmente.
2. Aprenda outros métodos de array: Estude map(), filter(), reduce() e pratique combinando-os com splice().
3. Aplique splice() em projetos reais: Use-o para manipulações de array mais avançadas em seus próprios aplicativos.
4. Mantenha-se atualizado: Siga o MDN e outros recursos oficiais para aprender novos recursos e melhorias.

10.5 Palavras Finais

splice() é um dos métodos de array mais poderosos e frequentemente usados no JavaScript. Ao aplicar o que você aprendeu neste artigo em projetos reais, você fortalecerá suas habilidades e se tornará mais eficiente no manuseio de dados no JavaScript.

Dominar operações flexíveis de array melhorará significativamente sua produtividade e confiança no desenvolvimento em JavaScript.