JavaScript: Como Adicionar Elementos a um Array (push, unshift, splice, concat, spread) — Guia do Iniciante ao Intermediário

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

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

1. Introdução

JavaScript é uma das linguagens de programação essenciais para o desenvolvimento web. Entre suas principais características, arrays desempenham um papel crucial na gestão e manipulação eficiente de dados.

Neste artigo, explicaremos em detalhes como adicionar elementos a arrays em JavaScript, abordando métodos específicos e como utilizá‑los. Ao cobrir desde métodos básicos até técnicas mais avançadas, este guia será útil para iniciantes e aprendizes intermediários.

2. Conceitos Básicos de Arrays

O que é um Array? — O Básico da Gestão de Dados

Um array (Array) em JavaScript é uma estrutura de dados que permite armazenar e gerenciar múltiplos valores juntos. Ele pode conter diversos tipos de dados como elementos, tais como strings, números e objetos.

Exemplo:

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

Você pode acessar os elementos do array usando um índice. Como os índices começam em 0, o primeiro elemento pode ser recuperado com fruits[0].

console.log(fruits[0]); // "apple"

Inicialização de Arrays e Operações Básicas

Você pode inicializar arrays das seguintes maneiras.

1. Criar um array vazio:

   let arr = [];
   

2. Criar um array com valores iniciais:

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

3. Escrever um array em várias linhas:

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

Como operação básica de array, você pode usar a propriedade length para obter o número de elementos.

console.log(colors.length); // 3

3. Métodos Básicos para Adicionar Elementos a um Array

3.1 Adicionar ao Final: push()

O que é push()?

O método push() é a forma mais básica de adicionar elementos ao final de um array. Ele modifica (muta) o array original e retorna o novo comprimento.

Sintaxe

array.push(element1, element2, ..., elementN);

Exemplo

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Exemplo: Adicionando Múltiplos Elementos

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Adicionar ao Início: unshift()

O que é unshift()?

O método unshift() adiciona elementos ao início de um array. Assim como push(), ele modifica o array original e retorna o novo comprimento.

Sintaxe

array.unshift(element1, element2, ..., elementN);

Exemplo

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 Adicionar em Qualquer Posição: splice()

O que é splice()?

O método splice() é uma opção flexível que permite adicionar ou remover elementos em qualquer posição de um array.

Sintaxe

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

Exemplo

Adicionar apenas elementos:

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

Adicionar e remover ao mesmo tempo:

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Resumo

4. Técnicas Avançadas: Mesclando Arrays e Adicionando Elementos

4.1 Mesclar Arrays: concat()

O que é concat()?

O método concat() é um método não mutante (não destrutivo) usado para mesclar múltiplos arrays em um novo array. Os arrays originais não são alterados, e um novo array é retornado.

Sintaxe

array1.concat(array2, array3, ...);

Exemplo

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Mesclar Arrays com Sintaxe Spread (...)

O que é a Sintaxe Spread?

Spread syntax (...) é um recurso moderno do JavaScript que expande elementos de arrays ou objetos. Ela permite mesclar arrays ou adicionar novos elementos com código conciso e legível.

Sintaxe

[...array1, ...array2, ...elements];

Exemplo

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Comparando Opções para Mesclagem de Arrays

Resumo

Nesta seção, abordamos técnicas avançadas para mesclar arrays.

• Método concat() : Uma forma não mutável de mesclar arrays sem alterar os originais.
• Sintaxe de espalhamento : Uma abordagem moderna e concisa para operações flexíveis com arrays.

5. Boas Práticas para Manipulação Eficiente de Arrays

5.1 Métodos Mutantes vs. Não Mutantes

O que são Métodos Mutantes?

São métodos que modificam diretamente o array original.

O que são Métodos Não Mutantes?

São métodos que não alteram o array original e, em vez disso, retornam um novo array.

5.2 Escrevendo Código Consciente de Performance

Otimizando Loops

Loop eficiente:

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Usando Encadeamento de Métodos

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Melhorando a Legibilidade do Código

Use Nomes de Variáveis Claros

let userIds = [1, 2, 3];

Adicione Comentários Apropriadamente

let evenIds = userIds.filter(id => id % 2 === 0);

Use Literais de Template

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Resumo

Nesta seção, apresentamos boas práticas para operações eficientes com arrays.

• Escolher entre métodos mutantes e não mutantes
• Usar loops conscientes de performance e encadeamento de métodos
• Melhorar a legibilidade através de nomes e comentários

6. Exemplos Práticos e Casos de Uso

6.1 Gerenciando Dados de Entrada de Formulário

Cenário: Armazenar Valores de Entrada de Formulário em um Array

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Saída:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Remover um Elemento Específico do Array

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Saída:

["Sato", "Tanaka"]

6.2 Adicionando Dados Dinâmicos em um Aplicativo de Gerenciamento de Tarefas

Cenário: Adicionar Tarefas e Rastrear Conclusão

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Saída:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Manipulando Estruturas de Dados Complexas

Cenário: Trabalhando com Arrays e Objetos Aninhados

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Saída:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Resumo

Nesta seção, explicamos aplicações práticas de operações com arrays através de casos de uso do mundo real.

1. Gerenciando dados de entrada de formulário – Operações básicas para adicionar e remover itens.
2. Construindo um aplicativo de gerenciamento de tarefas – Manipulação dinâmica de arrays e atualizações de status.
3. Manipulando estruturas de dados complexas – Adição e atualização de elementos em arrays e objetos aninhados.

7. Perguntas Frequentes (FAQ)

Q1. Qual a maneira mais fácil de esvaziar um array?

Resposta: Defina a propriedade length como 0

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

Q2. Como posso adicionar apenas elementos únicos (sem duplicatas)?

Resposta: Use includes() ou Set

Exemplo 1: Verificação de duplicatas com includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Exemplo 2: Remover duplicatas com Set

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

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. Como adiciono elementos a um array aninhado?

Resposta: Use push() ou sintaxe spread

Exemplo 1: Adicionar um novo array aninhado

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

Exemplo 2: Adicionar um elemento dentro de um array aninhado específico

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Resumo

8. Resumo Final e Tabela de Comparação

8.1 Resumo Geral

Operações Básicas de Array

• O que é um array? Uma estrutura que gerencia múltiplos valores, e você acessa os elementos via índices.
• Inicialização e operações básicas Arrays são fáceis de criar com [], e você pode verificar a quantidade de elementos com length.

Métodos para Adicionar/Remover Elementos

• Adicionar ao final: push() Simples e amplamente usado, mas altera o array original.
• Adicionar ao início: unshift() Útil quando a ordem importa, mas atenção ao desempenho.
• Adicionar/remover em qualquer posição: splice() Muito flexível, porém a sintaxe pode ser um pouco complexa.

Mesclando e Expandindo Arrays

• concat() Uma forma não mutável e segura de mesclar múltiplos arrays.
• Sintaxe spread (...) Simples, legível e ideal para ambientes modernos de JavaScript.

Dicas de Eficiência

• Métodos mutáveis vs. não mutáveis Escolha métodos não mutáveis quando precisar preservar os dados originais.
• Loops focados em desempenho Otimize para velocidade e eficiência de memória quando apropriado.

Exemplos e Casos de Uso

• Gerenciamento de entrada de formulário Armazene valores em um array e implemente adição/remoção facilmente.
• Sistemas de gerenciamento de tarefas Adicione e remova tarefas dinamicamente e acompanhe o status de conclusão.
• Operações com dados aninhados Manipule estruturas complexas de forma flexível com arrays e objetos aninhados.

8.2 Tabela de Comparação dos Métodos de Array

Resumo

Neste artigo, fornecemos uma explicação estruturada das operações de array em JavaScript, desde técnicas básicas até avançadas.

• Operações fundamentais de array e métodos para adicionar/remover elementos.
• Técnicas avançadas como mesclagem e expansão de arrays.
• Casos de uso práticos e dicas para gerenciamento eficiente de arrays.
• Perguntas comuns e suas soluções.

Próximos Passos

Continue aprendendo JavaScript e fortaleça suas habilidades aplicando essas técnicas de array em projetos reais!