O método unshift em JavaScript é utilizado para adicionar elementos no início de um array. Ele permite manipular a ordem dos itens de maneira eficiente, especialmente para criar estruturas como filas ou reorganizar dados.
Neste artigo, exploraremos exemplos práticos do uso do unshift(), suas diferenças em relação a outros métodos e como ele impacta o desempenho, principalmente em arrays grandes. Acompanhe para entender como tirar o máximo proveito desse método em suas aplicações JavaScript.
Exemplos práticos de uso do unshift()
O método unshift() em JavaScript é utilizado para adicionar um ou mais elementos no início de um array. Ele pode ser útil quando é necessário criar estruturas como filas, onde os elementos mais antigos são removidos primeiro.
Isso é similar ao processo de hospedagem de site, onde novos conteúdos ou funcionalidades são adicionados constantemente, e a organização dos dados precisa ser eficiente para garantir um bom desempenho.
Começaremos com exemplos práticos de uso do unshift() para, depois, você se aprofundar em outros conceitos e usos.
Exemplo 1: criar uma fila com unshift()
Veja um exemplo simples de como usar o unshift() para criar uma fila:
let fila = ['A', 'B', 'C'];
// Adiciona elementos no início
fila.unshift('D');
console.log(fila); // Saída: ['D', 'A', 'B', 'C']
Nesse exemplo, a letra D foi adicionada ao início da fila e deslocou os elementos existentes para a direita. Esse comportamento é característico de uma fila, onde novos elementos entram na frente, enquanto os antigos seguem para trás.
Outra função do unshift() é adicionar mais de um elemento de uma vez:
fila.unshift('E', 'F');
console.log(fila); // Saída: ['E', 'F', 'D', 'A', 'B', 'C']
Assim, é possível manipular a ordem dos elementos de forma eficiente com o uso do unshift().
Exemplo 2: adicionar objetos a um array
O método unshift() também pode ser usado para adicionar objetos a um array, o que é bem útil para organizar dados de maneira estruturada.
Veja um exemplo:
let pessoas = [
{ nome: 'João', idade: 25 },
{ nome: 'Maria', idade: 30 }
];
// Adiciona um novo objeto no início
pessoas.unshift({ nome: 'Carlos', idade: 22 });
console.log(pessoas);
Nesse exemplo, um novo objeto com informações de Carlos foi inserido no início do array. Como resultado, o objeto Carlos ocupa a primeira posição no array, enquanto os outros elementos são deslocados para a direita.
Como remover elementos do início do array?
O método shift() é usado para remover o primeiro elemento de um array em JavaScript. Após a remoção, todos os elementos seguintes são deslocados para a esquerda, e o array diminui de tamanho.
Exemplo de uso do shift():
let frutas = ['Maçã', 'Banana', 'Laranja']; let removido = frutas.shift(); console.log(removido); // Saída: 'Maçã' console.log(frutas); // Saída: ['Banana', 'Laranja']
Vale apontar que unshift() e shift() são diferentes: enquanto unshift() adiciona um ou mais elementos no início do array, shift() remove o primeiro elemento. Ou seja, um modifica o array ao inserir, enquanto o outro altera ao remover, o que gera efeitos opostos no array.
O que é o método unshift() no JavaScript?
Conforme vimos, o método unshift() é utilizado em JavaScript para adicionar um ou mais elementos no início de um array. Ele altera o array original ao deslocar os elementos existentes para a direita, para dar espaço aos novos elementos.
Ao contrário do método push(), que adiciona elementos no final do array, o unshift() é indicado para criar filas e reordenar dados, pois insere os elementos no começo.
Veja um exemplo básico de unshift():
let numeros = [2, 3, 4]; // Adiciona elementos no início numeros.unshift(1); console.log(numeros); // Saída: [1, 2, 3, 4] O número 1 foi inserido no início do array, e os outros (2, 3, 4) foram deslocados uma posição à direita. Outro uso do unshift() é adicionar múltiplos elementos ao mesmo tempo: numeros.unshift(0, -1); console.log(numeros); // Saída: [0, -1, 1, 2, 3, 4]
Esse método é eficaz para manipular arrays de forma dinâmica.
Sintaxe do unshift() e parâmetros aceitos
O método unshift() é usado para adicionar um ou mais elementos no início de um array. Sua sintaxe é simples:
array.unshift(elemento1, elemento2, …, elementoN)
O método aceita adição de um ou mais valores no início. Os parâmetros podem ser de qualquer tipo, como números, strings, objetos, arrays, entre outros.
Exemplo de uso:
let frutas = ['Banana', 'Laranja'];
// Adiciona vários elementos
frutas.unshift('Maçã', 'Morango');
console.log(frutas); // Saída: ['Maçã', 'Morango', 'Banana', 'Laranja']
O unshift() pode adicionar qualquer tipo de valor, o que inclui objetos ou outros arrays:
let pessoas = [];
pessoas.unshift({ nome: 'Ana', idade: 28 });
console.log(pessoas); // Saída: [{ nome: 'Ana', idade: 28 }]
Qual é a diferença entre push() e unshift()?
Os métodos push() e unshift() têm a função de adicionar elementos em um array, mas com comportamentos diferentes.
-
- push(): adiciona um ou mais elementos ao final do array, sem alterar a posição dos elementos existentes.
Exemplo:
let frutas = ['Maçã', 'Banana'];
frutas.push('Laranja');
console.log(frutas); // Saída: ['Maçã', 'Banana', 'Laranja']
-
- unshift(): adiciona elementos no início do array. Para isso, ele desloca todos os outros elementos para a direita, o que pode deixar a performance mais lenta, especialmente em arrays grandes.
Exemplo:
let frutas = ['Maçã', 'Banana'];
frutas.unshift('Laranja');
console.log(frutas); // Saída: ['Laranja', 'Maçã', 'Banana']
O que acontece com os índices ao usar unshift()?
Ao usar o método unshift() para adicionar um ou mais elementos no início de um array, todos os elementos existentes são deslocados para a direita. Isso significa que os índices dos elementos originais são alterados, com cada um aumentado em 1.
Exemplo:
let frutas = ['Banana', 'Laranja'];
frutas.unshift('Maçã');
console.log(frutas); // Saída: ['Maçã', 'Banana', 'Laranja']
Nesse caso, o índice de Banana passou de 0 para 1, e o de Laranja foi de 1 para 2.
Em arrays mais longos, o desempenho pode ser afetado, já que o unshift() precisa mover todos os elementos para frente, o que consome mais recursos de processamento, especialmente em arrays com muitos itens.
Gostou deste conteúdo? Para entender mais, descubra as funções nativas de arrays em JavaScript.