【JS数组】push() – 将一个或多个元素添加到数组的末尾
在本教程中,您将学习如何使用 JavaScript Array push() 方法将一个或多个元素添加到数组的末尾。
JavaScript Array push()方法介绍
Array.prototype.push() 方法将一个或多个元素添加到数组的末尾并返回新数组的长度。
下面显示了 push() 方法的语法:
push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,…,newElementN);
push() 方法返回调用该方法的数组对象的 length 属性的新值。
JavaScript 数组 push() 方法示例
让我们举一些使用 push() 方法的例子。
1) 使用数组 push() 将一个元素附加到数组
以下示例将数字 40 添加到数字数组的末尾:
let numbers = [10, 20, 30];
const length = numbers.push(40);
console.log(length);
console.log(numbers);
输出:
4
[ 10, 20, 30, 40 ]
看程序怎么运行
首先,定义具有三个数字的数字数组:
let numbers = [10, 20, 30];
其次,使用 push() 方法将数字 40 添加到数字数组的末尾,并将返回值分配给 length 变量:
const length = numbers.push(40);
第三、输出length变量和numbers数组:
console.log(length);
console.log(numbers);
下图说明了示例的工作原理:

2) 使用数组 push() 将多个元素添加到数组的末尾
以下示例显示如何使用 push() 方法将多个元素添加到数组的末尾:
let numbers = [10, 20, 30];
const length = numbers.push(40, 50);
console.log(length);
console.log(numbers);
输出:
5
[ 10, 20, 30, 40, 50 ]
下图说明了它是如何工作的:

3) 使用 push() 将一个数组的元素附加到另一个数组
假设您有两个数组 colors 和 cmyk:
let colors = [‘red’, ‘green’, ‘blue’];
let cmyk = [‘cyan’, ‘magenta’, ‘yellow’, ‘back’];
并且您想将 cmyk 的元素附加到颜色数组。
为此,您可以使用 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);
输出:
[‘red’, ‘green’, ‘blue’, ‘cyan’, ‘magenta’, ‘yellow’, ‘back’]
从 ES6 开始,你可以使用展开运算符 (…) 展开 cmyk 数组的元素并将它们同时推入 colors 数组,如下所示:
let colors = [‘red’, ‘green’, ‘blue’];
let cmyk = [‘cyan’, ‘magenta’, ‘yellow’, ‘back’];colors.push(…cmyk);
console.log(colors);
将 JavaScript Array 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);
输出:
{
‘0’: ‘Hi’,
‘1’: ‘Hello’,
‘2’: ‘Howdy’,
‘3’: ‘Bonjour’,
length: 4,
add: [Function: add]
}
看看它是怎么运行的
首先,定义具有三个属性 1、2 和长度以及一个方法 append() 的问候语对象:
let greetings = {
0: ‘Hi’,
1: ‘Hello’,
length: 2,
append(message) {
[].push.call(this, message);
},
};
append() 方法调用数组对象的 push() 方法将消息附加到问候对象。
其次,调用 greetings 对象的 append() 方法:
greetings.append(‘Howdy’);
greetings.append(‘Bonjour’);
在每次调用中,push() 使用 greetings 对象的 length 属性来确定附加新元素的位置并将 length 属性增加 1。
结果,greetings 对象在索引 2 和 3 处多了两个元素。调用后 length 属性为 4。
第三,将问候语对象输出到控制台:
console.log(greetings);
要允许 append() 方法接受多个消息,您可以像这样修改该方法:
let greetings = {
0: ‘Hi’,
1: ‘Hello’,
length: 2,
append() {
[].push.call(this, …arguments);
},
};
greetings.append(‘Howdy’, ‘Bonjour’);console.log(greetings);
看看它是怎么运行的。
首先,从 append 方法中删除消息参数。
其次,展开 arguments 对象的元素并将它们推送到 greetings 对象。
总结
使用 JavaScript 数组 push() 方法将一个或多个元素附加到数组。
push() 方法也适用于类似数组的对象。