【JS数组】push() – 将一个或多个元素添加到数组的末尾

JavaScript数组10个月前发布 admin
2,151 0

在本教程中,您将学习如何使用 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);

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

【JS数组】push() – 将一个或多个元素添加到数组的末尾

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 ]

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

【JS数组】push() – 将一个或多个元素添加到数组的末尾

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() 方法也适用于类似数组的对象。

© 版权声明

相关文章

暂无评论

暂无评论...