Vue.js中叠加数组的方法_它是原数组加上其他数组或值的组合_它会直接修改原数组把新的元素添加到数组的末尾

作者：机器人技术佬 | 发布时间：2025-06-27 |

Vue.js中叠加数组的方法

在Vue.js中，叠加数组是件很简单的事情，我们可以利用JavaScript的一些内置方法来实现。下面我来介绍几种常用的方法。

一、使用`concat`方法

这个方法不会改变原来的数组，而是返回一个新的数组，它是原数组加上其他数组或值的组合。如果你需要保留原数组不变，这个方法很适用。

优点	缺点
创建新数组，不改变原数组	只能叠加数组，不能叠加其他类型

举个例子，如果你有两个列表，想要合并但不修改原始列表，就可以用`concat`。

```javascript let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let newArray = array1.concat(array2); console.log(newArray); // [1, 2, 3, 4, 5, 6] console.log(array1); // [1, 2, 3]，原数组没有变 ```

二、使用展开运算符

展开运算符（`...`）可以把数组展开成单独的元素，合并数组超级方便。

这个方法语法简单，读起来也舒服，非常适合现代的JavaScript开发。

```javascript let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let newArray = [...array1, ...array2]; console.log(newArray); // [1, 2, 3, 4, 5, 6] ```

三、使用`push`方法

如果想在原数组上直接叠加，`push`方法就是你的不二选择。它会直接修改原数组，把新的元素添加到数组的末尾。

优点	缺点
修改原数组	不适用于叠加多个数组

```javascript let array1 = [1, 2, 3]; array1.push(...[4, 5, 6]); console.log(array1); // [1, 2, 3, 4, 5, 6] ```

四、使用自定义函数

有时候，你可能需要一些更复杂的操作，比如去重、排序等。这时候，编写一个自定义函数可能就是最好的选择。

自定义函数可以处理更复杂的逻辑，适合业务逻辑复杂的情况。

```javascript function combineAndRemoveDuplicates(...arrays) { let combinedArray = [...arrays]; let uniqueArray = combinedArray.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); return uniqueArray; } let array1 = [1, 2, 3]; let array2 = [3, 4, 5]; let combinedArray = combineAndRemoveDuplicates(array1, array2); console.log(combinedArray); // [1, 2, 3, 4, 5] ```

根据不同的需求，选择合适的方法非常重要。以下是几个建议：

需要保留原数组不变：使用`concat`方法。
语法简洁易读：使用展开运算符。
在原数组基础上追加：使用`push`方法。
处理复杂逻辑：编写自定义函数。

记住，在处理复杂数据时，可以考虑编写工具函数或使用第三方库，这样可以提高代码的可读性和复用性。

Vue.js中叠加数组的方法_它是原数组加上其他数组或值的组合_它会直接修改原数组把新的元素添加到数组的末尾