JavaScript 数组 push - JavaScript 教程

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

JavaScript 数组 push() 方法介绍

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

以下是 push() 方法的语法

push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);

push() 方法返回您在调用该方法的数组对象的 length 属性的新值。

JavaScript 数组 push() 方法示例

让我们举一些使用 push() 方法的例子。

1) 使用数组 push() 将一个元素追加到数组

以下示例将数字 40 添加到 numbers 数组的末尾

let numbers = [10, 20, 30];

const length = numbers.push(40);

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

输出

4
[ 10, 20, 30, 40 ]Code language: JSON / JSON with Comments (json)

它是如何工作的。

首先，定义 numbers 数组，其中包含三个数字

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

其次，使用 push() 方法将数字 40 添加到 numbers 数组的末尾，并将返回值赋给 length 变量

const length = numbers.push(40);Code language: JavaScript (javascript)

第三，输出 length 变量和 numbers 数组

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

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

2) 使用数组 push() 将多个元素添加到数组的末尾

以下示例展示了如何使用 push() 方法将多个元素添加到数组的末尾

let numbers = [10, 20, 30];

const length = numbers.push(40, 50);

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

输出

5
[ 10, 20, 30, 40, 50 ]Code language: JSON / JSON with Comments (json)

下图说明了它是如何工作的

3) 使用 push() 将一个数组的元素追加到另一个数组

假设您有两个数组 colors 和 cmyk

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];Code language: JavaScript (javascript)

并且您想将 cmyk 的元素追加到 colors 数组。

为此，您可以使用 for...of 循环来遍历 cmyk 数组的元素，并使用 push() 方法将每个元素追加到 colors 数组，如下所示

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

for (const color of cmyk) {
  colors.push(color);
}

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

输出

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']Code language: JSON / JSON with Comments (json)

从 ES6 开始，您可以使用扩展运算符 (...) 来扩展 cmyk 数组的元素，并同时将它们推送到 colors 数组，如下所示

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

colors.push(...cmyk);

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

将 JavaScript 数组 push() 方法与类数组对象一起使用

Array.prototype.push() 方法旨在通用。因此，您可以使用 call() 或 apply() 在类数组对象上调用 push() 方法。

在幕后，push() 方法使用 length 属性来确定插入元素的位置。如果 push() 方法无法将 length 属性转换为数字，它将使用 0 作为索引的值。

请参阅以下示例

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};
greetings.append('Howdy');
greetings.append('Bonjour');

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

输出

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

它是如何工作的。

首先，定义 greetings 对象，该对象具有三个属性 1、2 和 length 以及一个方法 append()

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};Code language: JavaScript (javascript)

append() 方法调用数组对象的 push() 方法将 message 追加到 greetings 对象。

其次，调用 greetings 对象的 append() 方法

greetings.append('Howdy');
greetings.append('Bonjour');Code language: JavaScript (javascript)

在每次调用中，push() 使用 greetings 对象的 length 属性来确定它追加新元素的位置，并将 length 属性增加 1。

结果，greetings 对象在索引 2 和 3 处有两个新元素。在调用之后，length 属性为 4。

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

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

为了允许 append() 方法接受多个消息，您可以修改该方法，如下所示

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append() {
    [].push.call(this, ...arguments);
  },
};
greetings.append('Howdy', 'Bonjour');

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

它是如何工作的。

首先，从 append 方法中删除 message 参数。

其次，扩展 arguments 对象的元素，并将它们推送到 greetings 对象。

总结

使用 JavaScript 数组 push() 方法将一个或多个元素追加到数组。
push() 方法也适用于类数组对象。

本教程是否有帮助？