如何在JavaScript中向数组添加元素：5种方法及示例

如何在JavaScript中向数组添加元素？完整解析及示例

\n\n

你在编写JavaScript代码时，突然遇到一个问题：“如何向数组的末尾添加一个新元素？那开头呢？或者中间呢？”如果你曾经搜索过“How to append something to an array?”——你并不孤单。这个问题在Stack Overflow上获得了数千次浏览，今天我们将一劳永逸地解决它。

\n\n

数组是JS中数据处理的基础。能够快速且正确地添加元素将为你节省数小时的调试时间，并使代码更简洁。在本教程中，我将展示5种向数组添加元素的方法，从经典的push()到现代的展开运算符。我们开始吧！

\n\n

1. push()方法：向数组末尾添加元素

\n\n

最流行的方法。push()将一个或多个元素添加到数组的末尾，并返回新的长度。

\n\n

const fruits = ['苹果', '香蕉'];\nconst newLength = fruits.push('橙子');\n\nconsole.log(fruits);    // ['苹果', '香蕉', '橙子']\nconsole.log(newLength); // 3\n

\n\n

可以一次添加多个元素：

\n\n

fruits.push('梨', '葡萄');\nconsole.log(fruits);\n// ['苹果', '香蕉', '橙子', '梨', '葡萄']\n

\n\n

何时使用：当你需要将数据添加到列表末尾时——例如，购物车中的新商品、聊天中的消息、日志中的记录。该方法运行速度快（O(1)），并且会修改原始数组。

\n\n

2. unshift()方法：向数组开头添加元素

\n\n

如果需要将元素插入到开头，请使用unshift()。它会将所有现有元素向右移动。

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

也适用于多个元素：

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

重要提示：对于大型数组，unshift()比push()慢，因为需要移动所有元素。如果数组包含100,000个元素——最好考虑其他数据结构（例如，双端队列）。

\n\n

3. splice()方法：插入到任意位置

\n\n

全能选手。splice()可以删除、替换，当然也可以在数组的任意位置添加元素。

\n\n

语法：array.splice(start, deleteCount, item1, item2, ...)

\n\n

\n
• start — 开始操作的索引
\n
• deleteCount — 要删除的元素数量（如果仅添加，则设为0）
\n
• item1, item2, ... — 要插入的元素
\n

\n\n

示例：在第二个位置（索引1）插入“樱桃”：

\n\n

const colors = ['红色', '蓝色', '绿色'];\ncolors.splice(1, 0, '樱桃');\n\nconsole.log(colors);\n// ['红色', '樱桃', '蓝色', '绿色']\n

\n\n

可以一次插入多个元素：

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

何时使用：当你需要将元素严格插入到数组中间时——例如，在现有菜单项之间添加一个新菜单项。请记住：splice()会修改数组。

\n\n

4. concat()方法：创建新数组

\n\n

与之前的方法不同，concat()不会修改原始数组，而是返回一个新数组，将两个或多个数组（或元素）合并。

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — 未改变\n

\n\n

不仅可以添加数组，还可以添加单个值：

\n\n

const arr = [1, 2];\nconst newArr = arr.concat(3, [4, 5]);\n\nconsole.log(newArr); // [1, 2, 3, 4, 5]\n

\n\n

何时使用：当你不想修改原始数组时——例如，在React或Redux中处理不可变状态时。这是函数式编程的绝佳选择。

\n\n

5. 展开运算符（...）：现代且优雅的方式

\n\n

ES6引入的展开运算符（...）允许你“展开”数组元素。这是创建新数组并添加元素的最简洁方式。

\n\n

添加到末尾：

\n\n

const oldArray = [1, 2, 3];\nconst newArray = [...oldArray, 4, 5];\n\nconsole.log(newArray); // [1, 2, 3, 4, 5]\n

\n\n

添加到开头：

\n\n

const newArray2 = [0, ...oldArray];\nconsole.log(newArray2); // [0, 1, 2, 3]\n

\n\n

甚至可以插入到中间：

\n\n

const arr = ['a', 'd'];\nconst result = ['a', 'b', 'c', ...arr.slice(1)];\n// 但更简单的方法是使用 splice() 或 toSpliced()\n

\n\n

何时使用：当你需要不可变性时（不修改原始数组），并且代码可读性很重要时。展开运算符在React中非常流行，用于更新状态。

\n\n

总结：选择哪种方法？

\n\n

我们来整理一个方便的表格：

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

方法	添加到	修改数组？	返回	速度
push()	末尾	是	新长度	O(1) — 快速
unshift()	开头	是	新长度	O(n) — 对于大型数组较慢
splice()	任意位置	是	删除的元素	O(n) — 取决于插入位置
concat()	末尾	否	新数组	O(n) — 创建副本
展开运算符	任意位置	否	新数组	O(n) — 创建副本

\n\n

主要建议：

\n

\n
• 添加到末尾 → push()（简单且快速）
\n
• 添加到开头 → 如果数组较小，使用unshift()；否则考虑使用concat()或展开运算符
\n
• 插入到中间 → splice()（如果需要修改）或展开运算符（如果需要不可变性）
\n
• 不修改原始数组 → concat()或展开运算符
\n

\n\n

现在你已经知道如何在JavaScript中向数组添加元素了！尝试在代码中使用这些方法，你的代码将变得更加专业和可读。祝你编码愉快！🚀