Resumo : neste tutorial, você aprenderá como usar o unshift()
método JavaScript Array para adicionar um ou mais elementos ao início de um array.
Introdução ao método JavScript Array unshift()
O Array.prototype.unshift()
método adiciona um ou mais elementos ao início de um array e retorna o comprimento do novo array .
O seguinte mostra a sintaxe do unshift()
método:
unshift(element);
unshift(element1, element2);
unshift(element1, element2,...elementN);
Linguagem de código: CSS ( css )
Como o unshift()
método precisa reindexar os elementos existentes, será lento se o array tiver muitos elementos.
Observe que para adicionar um ou mais elementos ao final de um array, você pode usar o push()
método.
Exemplos de métodos JavaScript Array unshift()
Vejamos alguns exemplos de uso do unshift()
método.
1) Usando o método JavaScript Array unshift() para preceder um elemento a um array
O exemplo a seguir usa o unshift()
método para adicionar o número 10
à numbers
matriz:
let numbers = [30, 40];
const length = numbers.unshift(20);
console.log({ length });
console.log({ numbers });
Linguagem de código: JavaScript ( javascript )
Saída:
{ length: 3 }
{ numbers: [ 20, 30, 40 ] }
Linguagem de código: CSS ( css )
Como funciona.
Primeiro, defina um array que possua dois elementos:
let numbers = [20, 30];
Linguagem de código: JavaScript ( javascript )
O comprimento da numbers
matriz é 2.
Segundo, adicione o número 10
ao início do numbers
array e atribua o comprimento do novo array à length
variável:
const length = numbers.unshift(10);
Linguagem de código: JavaScript ( javascript )
Terceiro, envie as variáveis length
e numbers
para o console:
console.log({ length });
console.log({ numbers });
Linguagem de código: JavaScript ( javascript )
A imagem a seguir ilustra como a unshift()
função funciona:
2) Usando o método JavaScript Array unshift() para acrescentar vários elementos a um array
O exemplo a seguir usa o unshift()
método para adicionar dois elementos no início de uma matriz:
let numbers = [30, 40];
const length = numbers.unshift(10, 20);
console.log({ length });
console.log({ numbers });
Linguagem de código: JavaScript ( javascript )
Saída:
{ length: 4 }
{ numbers: [ 10, 20, 30, 40 ] }
Linguagem de código: CSS ( css )
3) Usando o array JavaScript unshift() para adicionar elementos de um array a outro array
O exemplo a seguir usa o unshift()
método para adicionar elementos de um array ao início de outro array:
let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];
for (const weekend of weekends) {
days.unshift(weekend);
}
console.log(days);
Linguagem de código: JavaScript ( javascript )
Saída:
['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
Linguagem de código: JSON/JSON com comentários ( json )
A partir do ES6, você pode usar o operador spread para tornar o código mais conciso, assim:
let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];
days.unshift(...weekends);
console.log(days);
Linguagem de código: JavaScript ( javascript )
Usando o método JavaScript Array unshift() com objetos semelhantes a array
O unshift()
método é genérico. Portanto, pode funcionar bem com objetos semelhantes a array. Para chamar o unshift()
método de um objeto semelhante a um array, você o pega emprestado de um objeto array usando o método call()
ou apply()
.
Veja o exemplo a seguir:
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
prepend(message) {
[].unshift.call(this, message);
return this.length;
},
};
greetings.prepend('Good day');
console.log(greetings);
Linguagem de código: JavaScript ( javascript )
Saída:
{
'0': 'Good day',
'1': 'Hi',
'2': 'Hello',
'3': 'Howdy',
length: 4,
prepend: [Function: prepend]
}
Linguagem de código: JavaScript ( javascript )
Como funciona.
Primeiro, defina o greetings
objeto que possui
- As propriedades com os nomes
0
,1
e3
representam os elementos dogreetings
objeto. - A
length
propriedade é inicializada com o valor 3, que indica a quantidade de elementos que o objeto saudações possui. - O
prepend()
método invoca ocall()
método dounshift()
método e define othis
objetogreetings
. Em outras palavras, ogreetings
objeto pega emprestado ounshift()
método de um objeto array ([]
).
Segundo, chame o prepend()
método do greetings
objeto para adicionar um elemento ao índice .0th
Terceiro, envie o greetings
objeto para o console.
Se você quiser permitir que o prepend()
método adicione um ou mais elementos ao greetings
objeto, você pode usar o parâmetro rest e o operador spread assim:
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
prepend(...messages) {
[].unshift.call(this, ...messages);
return this.length;
},
};
greetings.prepend('Good day', 'Bye');
Linguagem de código: JavaScript ( javascript )
Neste exemplo, o prepend()
método aceita uma ou mais mensagens ( ...messages
) e as passa para o unshift()
método individualmente usando o operador spread.
Resumo
- Use o método de array JavaScript
unshift()
para adicionar um ou mais elementos ao início de um array. - O
unshift()
método também funciona com o objeto semelhante a um array usando o métodocall()
ouapply()
.