View in EnglishAlways switch to English

Array.prototype.push()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

尝试一下

const animals = ["pigs", "goats", "sheep"];const count = animals.push("cows");console.log(count);// Expected output: 4console.log(animals);// Expected output: Array ["pigs", "goats", "sheep", "cows"]animals.push("chickens", "cats", "dogs");console.log(animals);// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

语法

push()push(element0)push(element0, element1)push(element0, element1, /* … ,*/ elementN)

描述

push() 方法将值追加到一个数组中。

Array.prototype.unshift() 有着和push() 相似的行为，但是其作用于数组的开头。

push() 方法是一个修改方法。它改变了this 的内容和长度。如果你希望this 的值保持不变，但返回一个末尾追加了元素的新数组，你可以使用arr.concat([element0, element1, /* ... ,*/ elementN]) 来代替。请注意，这些元素需要被包装在一个额外的数组中——否则，如果元素本身是一个数组，由于concat() 的行为，它将被展开而不是作为单个元素添加到原数组的末尾。

push() 方法是通用的。它只期望this 值具有length 属性和整数键属性。虽然字符串也是类似数组的，但这个方法不适用于它，因为字符串是不可变的。

示例

在数组中添加元素

接下来的代码中将会生成包含两个元素的sports 数组，然后向其添加两个元素。total 变量将会记录数组的新长度。

const sports = ["soccer", "baseball"];const total = sports.push("football", "swimming");console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']console.log(total); // 4

合并两个数组

这个示例使用展开语法来将第二个数组的所有元素添加到第一个数组中。

const vegetables = ["parsnip", "potato"];const moreVegs = ["celery", "beetroot"];// 合并第二个数组到第一个数组中vegetables.push(...moreVegs);console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

也可以通过使用concat() 方法来合并两个数组。

在非数组对象中使用 push()

push() 方法会读取this 的length 属性。然后，它将this 的每个索引从length 开始设置，并将参数传递给push()。最后，它将length 设置成之前的长度加上已添加元素的数量。

const arrayLike = {  length: 3,  unrelated: "foo",  2: 4,};Array.prototype.push.call(arrayLike, 1, 2);console.log(arrayLike);// { '2': 4, '3': 1, '4': 2, length: 5, unrelated: 'foo' }const plainObj = {};// 这里没有长度属性，所以长度为 0Array.prototype.push.call(plainObj, 1, 2);console.log(plainObj);// { '0': 1, '1': 2, length: 2 }

以类似数组的方式使用对象

如上所述，push 被有意设计为通用的，我们可以利用这一点。就像这个例子所展示的，Array.prototype.push 可以很好的处理对象。

注意，我们没有创建一个数组来存储对象集合。相反，我们将集合存储在对象本身上，并通过Array.prototype.push 的call 来调用该方法，让它认为我们正在处理一个数组——归功于 JavaScript 允许我们以任何我们想要的方式建立执行上下文的方式，这样是可行的。

const obj = {  length: 0,  addElem(elem) {    // obj.length 在每次添加元素时自动增加    [].push.call(this, elem);  },};// 让我们添加一些空对象来说明obj.addElem({});obj.addElem({});console.log(obj.length); // 2

注意，尽管obj 不是一个数组，push 方法仍成功地增加了obj 的length 属性，就像我们处理一个真正的数组一样。