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 length
propriedade 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 numbers
array que possui três elementos:
const numbers = [10, 20, 30];
Linguagem de código: JavaScript ( javascript )
Segundo, remova o primeiro elemento do numbers
array e atribua o elemento removido à number
variá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 while
loop 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 greetings
objeto:
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
removeFirst() {
return [].shift.call(this);
},
};
Linguagem de código: JavaScript ( javascript )
O greetings
objeto possui três elementos indicados pelas propriedades 0
, 1
e 2
. Além disso, possui a length
propriedade 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 this
referências ao greetings
objeto.
Segundo, chame o removeFirst()
método e atribua o elemento removido à greeting
variável:
const greeting = greetings.removeFirst();
Linguagem de código: JavaScript ( javascript )
Terceiro, envie greeting
e greetings
para o console:
console.log(greeting);
console.log(greetings);
Linguagem de código: JavaScript ( javascript )
A saída mostra que length
foi reduzido em um, a propriedade com o índice 0
foi 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étodocall()
ouapply()
.