JavaScript 数组 push() 方法

JavaScript push() 语法

push() 是 JavaScript 数组的一个方法，它用于在数组的 “末尾” 添加一个或多个元素，并返回新数组的长度。

语法：

arr.push(value1, value2, ..., valueN)

说明：

value1、value2、...、valueN 可以是任意类型的值。

很多数据结构都有 “增删查改” 这 4 种操作，数组的相关方法如下表所示。

JavaScript push() 摘要

JavaScript push() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript push() 方法是如何使用的。

示例 1：push() 添加一个元素

const arr = ["Python", "C++"];
const result = arr.push("Java");

console.log(arr);
console.log(result);

运行结果如下。

[ 'Python', 'C++', 'Java' ]
3

分析：

从这个例子可以看出，push() 方法会改变原数组，它返回的是添加后的数组长度。如果你不需要用到添加后的数组长度，也可以不使用变量来接收它的返回值，比如：

const arr = ["Python", "C++"];
arr.push("Java");
console.log(arr);

示例 2：push() 添加多个元素

const arr = ["Python", "C++"];
arr.push("Java", "Go");
console.log(arr);

运行结果如下。

[ 'Python', 'C++', 'Java', 'Go' ]

分析：

push() 方法可以一次性在数组末尾添加多个元素。

示例 3：push() 添加的元素是数组

const arr = ["Python", "C++"];
arr.push(["Java", "Go"]);
console.log(arr);

运行结果如下。

[ 'Python', 'C++', [ 'Java', 'Go' ] ]

分析：

当 push() 的参数是一个数组时，此时该数组会作为一个元素添加进去。

示例 4：push() 添加的元素是对象

const arr = ["Python", "C++"];
arr.push({name: "Jack", age: 20});
console.log(arr);

运行结果如下。

[ 'Python', 'C++', { name: 'Jack', age: 20 } ]

分析：

如果 push() 添加的值是一个对象，那么该对象同样会作为一个元素添加进去。

深入了解 push()

想要在数组末尾添加元素，除了 push() 方法，还有一个非常有用的方法——ES6 扩展运算符。

示例 5：ES6 扩展运算符

const arr = ["Python", "C++"];
const result = [...arr, "Java"];

console.log(arr);
console.log(result);

运行结果如下。

[ 'Python', 'C++' ]
[ 'Python', 'C++', 'Java' ]

分析：

在某些时候，ES6 扩展运算符会比 unshift()、shift()、push()、pop() 等方法更好用，因为它不会修改原数组。

示例 6：合并两个数组

const arr1 = [1, 2];
const arr2 = [3, 4];

arr1.push(...arr2);    // 等价于 arr1.push(3, 4)
console.log(arr1);

运行结果如下。

[1, 2, 3, 4]

分析：

如果想把数组 B 的所有元素添加到数组 A 的末尾，我们可以使用 push() 结合扩展运算符来实现。这种方式比 concat() 方法更加高效，因为 concat() 会创建新数组，而这里是在原数组 arr1 上直接修改。