Matriz JavaScript sem mudança

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à numbersmatriz:

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 numbersmatriz é 2.

Segundo, adicione o número 10ao início do numbersarray e atribua o comprimento do novo array à lengthvariável:

const length = numbers.unshift(10);Linguagem de código:  JavaScript  ( javascript )

Terceiro, envie as variáveis length​​e numberspara 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 greetingsobjeto que possui

• As propriedades com os nomes 0, 1e 3representam os elementos do greetingsobjeto.
• A lengthpropriedade é inicializada com o valor 3, que indica a quantidade de elementos que o objeto saudações possui.
• O prepend()método invoca o call()método do unshift()método e define o thisobjeto greetings. Em outras palavras, o greetingsobjeto pega emprestado o unshift()método de um objeto array ( []).

Segundo, chame o prepend()método do greetingsobjeto para adicionar um elemento ao índice .0th

Terceiro, envie o greetingsobjeto para o console.

Se você quiser permitir que o prepend()método adicione um ou mais elementos ao greetingsobjeto, 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étodo call()ou apply().