JavaScript 数组 unshift

摘要: 在本教程中，您将学习如何使用 JavaScript 数组 unshift() 方法将一个或多个元素添加到数组的开头。

JavScript 数组 unshift() 方法介绍

Array.prototype.unshift() 方法将一个或多个元素添加到 数组 的开头，并返回新数组的 长度。

以下是 unshift() 方法的语法

unshift(element);
unshift(element1, element2);
unshift(element1, element2,...elementN);Code language: CSS (css)

由于 unshift() 方法需要重新索引现有元素，因此如果数组包含大量元素，它会很慢。

请注意，要将一个或多个元素添加到数组的末尾，可以使用 push() 方法代替。

JavaScript 数组 unshift() 方法示例

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

1) 使用 JavaScript 数组 unshift() 方法将元素添加到数组的开头

以下示例使用 unshift() 方法将数字 10 添加到 numbers 数组

let numbers = [30, 40];

const length = numbers.unshift(20);

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

输出

{ length: 3 }
{ numbers: [ 20, 30, 40 ] }Code language: CSS (css)

工作原理。

首先，定义一个包含两个元素的数组

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

numbers 数组的长度为 2。

其次，将数字 10 添加到 numbers 数组的开头，并将新数组的长度分配给 length 变量

const length = numbers.unshift(10);Code language: JavaScript (javascript)

第三，将 length 和 numbers 变量输出到控制台

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

以下图片说明了 unshift() 函数的工作原理

2) 使用 JavaScript 数组 unshift() 方法将多个元素添加到数组的开头

以下示例使用 unshift() 方法将两个元素添加到数组的开头

let numbers = [30, 40];

const length = numbers.unshift(10, 20);

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

输出

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

3) 使用 JavaScript 数组 unshift() 将一个数组的元素添加到另一个数组

以下示例使用 unshift() 方法将一个数组的元素添加到另一个数组的开头

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];

for (const weekend of weekends) {
  days.unshift(weekend);
}

console.log(days);Code language: JavaScript (javascript)

输出

['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']Code language: JSON / JSON with Comments (json)

从 ES6 开始，您可以使用 展开运算符 使代码更简洁，如下所示

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];

days.unshift(...weekends);

console.log(days);
Code language: JavaScript (javascript)

使用 JavaScript 数组 unshift() 方法与类似数组的对象

unshift() 方法是通用的。因此，它可以很好地与类似数组的对象一起使用。要从类似数组的对象调用 unshift() 方法，您可以使用 call() 或 apply() 方法从数组对象中借用它。

请参阅以下示例

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

输出

{
  '0': 'Good day',
  '1': 'Hi',
  '2': 'Hello',
  '3': 'Howdy',
  length: 4,
  prepend: [Function: prepend]
}Code language: JavaScript (javascript)

工作原理。

首先，定义 greetings 对象，它具有

• 名称为 0、1 和 3 的属性代表 greetings 对象的元素。
• length 属性被初始化为 3，表示 greetings 对象具有的元素数量。
• prepend() 方法调用 unshift() 方法的 call() 方法并将 this 设置为 greetings 对象。换句话说，greetings 对象从数组对象 ([]) 中借用 unshift() 方法。

其次，调用 greetings 对象的 prepend() 方法以在索引 0th 处添加一个元素。

第三，将 greetings 对象输出到控制台。

如果您想允许 prepend() 方法向 greetings 对象添加一个或多个元素，您可以使用 剩余参数 和 展开运算符，如下所示

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

greetings.prepend('Good day', 'Bye');Code language: JavaScript (javascript)

在此示例中，prepend() 方法接受一个或多个消息 (...messages) 并使用展开运算符将它们分别传递到 unshift() 方法中。

总结

• 使用 JavaScript 数组 unshift() 方法将一个或多个元素添加到数组的开头。
• unshift() 方法也适用于类似数组的对象，方法是使用 call() 或 apply() 方法。