JavaScript 数组 shift - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript 数组的 shift() 方法从数组中删除第一个元素。

JavaScript 数组 shift() 函数简介

Array.prototype.shift() 方法从数组中删除第一个元素，并返回该元素。以下是 shift() 方法的语法

array.shift()Code language: CSS (css)

如果数组为空，则 shift() 方法返回 undefined。否则，它将返回已删除的元素。此外，shift() 方法将数组的 length 属性减少 1。

如果要从数组中删除最后一个元素，可以使用 pop() 方法。

请注意，shift() 方法必须重新索引数组中所有剩余的元素。因此，与 pop() 方法相比，它更慢。

JavaScript 数组 shift() 方法示例

让我们看一些使用 shift() 方法的示例。

1) 使用 JavaScript 数组 shift() 方法的示例

以下示例使用 shift() 方法从数组中删除第一个元素

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

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Code language: JavaScript (javascript)

输出

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }Code language: CSS (css)

它是如何工作的。

首先，定义包含三个元素的 numbers 数组

const numbers = [10, 20, 30];Code language: JavaScript (javascript)

其次，从 numbers 数组中删除第一个元素，并将已删除的元素分配给 number 变量。

let number = numbers.shift();Code language: JavaScript (javascript)

第三，将删除的元素、数组以及数组的长度输出到控制台

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });Code language: JavaScript (javascript)

下图说明了上述示例的工作原理

2) 使用 JavaScript 数组 shift() 方法的示例

以下示例展示了如何将 shift() 方法与 while 循环一起使用以删除数组中的所有元素

const numbers = [10, 20, 30];
let number;
while ((number = numbers.shift()) != undefined) {
  console.log(number);
}Code language: JavaScript (javascript)

输出

10
20
30

将 JavaScript 数组 shift() 与类似数组的对象一起使用

shift() 方法是通用的。因此，您可以将其与类似数组的对象一起使用。要将 shift() 方法与类似数组的对象一起使用，请使用 call() 或 apply() 方法。

请考虑以下示例

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);Code language: JavaScript (javascript)

输出

Hi
{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}Code language: JavaScript (javascript)

它是如何工作的。

首先，定义 greetings 对象

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

greetings 对象具有三个元素，分别由属性 0、1 和 2 表示。此外，它还具有存储对象元素数量的 length 属性。

removeFirst() 方法使用 call() 方法调用数组的 shift() 方法，并将 this 引用设置为 greetings 对象。

其次，调用 removeFirst() 方法并将删除的元素分配给 greeting 变量

const greeting = greetings.removeFirst();Code language: JavaScript (javascript)

第三，将 greeting 和 greetings 输出到控制台

console.log(greeting);
console.log(greetings);Code language: JavaScript (javascript)

输出显示 length 减少了 1，索引为 0 的属性已删除，其他属性的索引已相应调整。

摘要

使用 shift() 方法从数组中删除第一个元素并返回该元素。
通过 call() 或 apply() 方法，将 shift() 方法与类似数组的对象一起使用。

本教程是否有帮助？