Mudança de matriz JavaScript

Resumo : neste tutorial, você aprenderá como usar o shift()método JavaScript Array para remover o primeiro elemento de um array.

Introdução à função JavaScript Array shift()

O Array.prototype.shift()método remove o primeiro elemento de um array e retorna esse elemento. O seguinte mostra a sintaxe do shift()método:

array.shift()Linguagem de código:  CSS  ( css )

Se o array estiver vazio, o shift()método retornará undefined. Caso contrário, retorna o elemento removido. Além disso, o shift()método reduz a lengthpropriedade do array em um.

Se quiser remover o último elemento de um array, você pode usar o pop()método.

Observe que o shift()método deve reindexar todos os elementos restantes de um array. Portanto, é mais lento em comparação com o pop()método.

Exemplos de métodos JavaScript Array shift()

Vejamos alguns exemplos de uso do shift()método.

1) Usando o exemplo do método JavaScript array shift()

O exemplo a seguir usa o shift()método para remover o primeiro elemento de uma matriz:

const numbers = [10, 20, 30];
let number = numbers.shift();

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Linguagem de código:  JavaScript  ( javascript )

Saída:

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }Linguagem de código:  CSS  ( css )

Como funciona.

Primeiro, defina o numbersarray que possui três elementos:

const numbers = [10, 20, 30];Linguagem de código:  JavaScript  ( javascript )

Segundo, remova o primeiro elemento do numbersarray e atribua o elemento removido à numbervariável.

let number = numbers.shift();Linguagem de código:  JavaScript  ( javascript )

Terceiro, envie o elemento removido, a matriz e o comprimento da matriz para o console:

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });Linguagem de código:  JavaScript  ( javascript )

A imagem a seguir ilustra como funciona o exemplo acima:

2) Usando o exemplo do método JavaScript array shift()

O exemplo a seguir mostra como usar o shift()método com um whileloop para remover todos os elementos de um array:

const numbers = [10, 20, 30];
let number;
while ((number = numbers.shift()) != undefined) {
  console.log(number);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

10
20
30

Usando o array JavaScript shift() com objeto semelhante a um array

O shift()método é genérico. Portanto, você pode usá-lo com objetos semelhantes a array. Para usar o shift()método com um objeto semelhante a um array, você usa o método call()ou apply().

Considere o seguinte exemplo:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  removeFirst() {
    return [].shift.call(this);
  },
};

const greeting = greetings.removeFirst();

console.log(greeting);
console.log(greetings);Linguagem de código:  JavaScript  ( javascript )

Saída:

Hi
{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina o greetingsobjeto:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  removeFirst() {
    return [].shift.call(this);
  },
};Linguagem de código:  JavaScript  ( javascript )

O greetingsobjeto possui três elementos indicados pelas propriedades 0, 1e 2. Além disso, possui a lengthpropriedade que armazena a quantidade de elementos do objeto.

O removeFirst()método usa o call()método para invocar o shift()método de um array com as thisreferências ao greetingsobjeto.

Segundo, chame o removeFirst()método e atribua o elemento removido à greetingvariável:

const greeting = greetings.removeFirst();Linguagem de código:  JavaScript  ( javascript )

Terceiro, envie greetinge greetingspara o console:

console.log(greeting);
console.log(greetings);Linguagem de código:  JavaScript  ( javascript )

A saída mostra que lengthfoi reduzido em um, a propriedade com o índice 0foi removida e os índices de outras propriedades foram ajustados de acordo.

Resumo

• Use o shift()método para remover o primeiro elemento de uma matriz e retornar esse elemento.
• Use o shift()método com um objeto semelhante a um array por meio do método call()ou apply().