JavaScript push 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 JavaScript 中的 push 方法向数组添加元素。

数组 push 操作

push 方法将一个或多个元素添加到数组的末尾。它修改原始数组并返回数组的新长度。这与 concat 等创建新数组的方法不同。

当您需要在程序执行期间动态增长数组时，通常使用 push 方法。对于构建数据集合，而您事先不知道最终大小，它非常有效。

与某些数组方法不同，push 直接改变原始数组。当您想修改现有数组而不是创建新数组时，这很有用。该方法可以接受多个参数以一次添加多个元素。

以下示例演示了 push 方法的基本用法。

main.js

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');

console.log(fruits);
console.log(newLength);

我们从一个包含两个水果的数组开始。我们将第三个水果推到末尾。 push() 方法返回新长度 (3) 并修改原始数组。数组现在包含所有三个元素。

$ node main.js
[ 'apple', 'banana', 'orange' ]
3

push 方法可以一次添加多个元素。

main.js

const numbers = [1, 2];
const newLength = numbers.push(3, 4, 5);

console.log(numbers);
console.log(newLength);

我们使用一个 push() 调用向我们的数组添加了三个数字。该方法接受多个用逗号分隔的参数。所有元素都按指定的顺序添加。原始数组被修改以包含所有新元素。

$ node main.js
[ 1, 2, 3, 4, 5 ]
5

要从另一个数组推送元素，我们可以使用扩展运算符。

main.js

const colors = ['red', 'green'];
const newColors = ['blue', 'yellow'];

colors.push(...newColors);
console.log(colors);

我们使用扩展运算符 (...) 将 newColors 数组扩展为单个元素。这会分别推送每个元素，而不是将数组作为一个元素推送。原始 colors 数组现在包含所有四个颜色值。

$ node main.js
[ 'red', 'green', 'blue', 'yellow' ]

push 方法可以将对象和其他复杂类型添加到数组。

main.js

const users = [{name: 'John'}];
users.push({name: 'Jane'}, {name: 'Bob'});

console.log(users);

我们从一个包含一个用户对象的数组开始。我们将另外两个用户对象推送到数组。 push() 方法适用于任何 JavaScript 值类型，包括对象、数组、函数等。原始数组被修改。

$ node main.js
[ { name: 'John' }, { name: 'Jane' }, { name: 'Bob' } ]

push 方法经常在循环中使用以动态构建数组。

main.js

const squares = [];
for (let i = 1; i <= 5; i++) {
    squares.push(i * i);
}

console.log(squares);

我们从一个空数组开始，并使用 for 循环来计算数字的平方。每个计算出的平方都会被推到数组中。这演示了 push() 如何增量地构建数组。最终数组包含所有计算出的平方。

$ node main.js
[ 1, 4, 9, 16, 25 ]

在本文中，我们演示了如何使用 push() 方法向 JavaScript 中的数组添加元素。

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。我从 2007 年开始撰写编程文章。迄今为止，我撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。