【JavaScript 教程】第六章 数组21—shift() ： 从数组中删除第一个元素

来源 | https://www.javascripttutorial.net/

翻译 | 杨小爱

在今天的教程中，我们将一起来学习如何使用 JavaScript Array shift() 方法从数组中删除第一个元素。

JavaScript数组shift()函数介绍

Array.prototype.shift() 方法从数组中移除第一个元素并返回该元素，下面显示了 shift() 方法的语法：

array.shift()

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

如果要从数组中删除最后一个元素，可以使用 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 });

输出：

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }

怎么运行的。

首先，定义numbers具有三个元素的数组：

const numbers = [10, 20, 30];

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

let number = numbers.shift();

第三，将移除的元素、数组和数组的长度输出到控制台：

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });

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

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

以下示例显示如何使用带有 while 循环的 shift() 方法来删除数组的所有元素：

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

输出：

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);

输出：

Hi
{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}

它是怎么运行的。

首先，定义greetings对象：

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

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

removeFirst() 方法使用 call() 方法来调用数组的 shift() 方法，其中 this 引用了 greetings 对象。

其次，调用 removeFirst() 方法并将移除的元素赋值给 greeting 变量：

const greeting = greetings.removeFirst();

三、将问候语和问候语输出到控制台：

console.log(greeting);
console.log(greetings);

输出显示长度减一，索引为0的属性被移除，其他属性的索引也相应调整。

总结

使用 shift() 方法从数组中删除第一个元素并返回该元素。

通过 call() 或 apply() 方法将 shift() 方法与类数组对象一起使用。

学习更多技能

请点击下方公众号