JavaScript 数组怎么合并

在日常开发中，处理数据时经常会遇到把两个或多个列表整合到一起的情况，比如把购物车里的不同分类商品合并成一个总清单，或是把多个接口返回的数组数据拼接成一个完整数据集。JavaScript 里的数组合并功能，就是专门解决这类问题的工具，不用手动循环一个个把元素塞进新数组，能省不少功夫。

用最直观的方法：展开运算符

如果你是刚接触 JavaScript 的新手，肯定能轻松理解这个方法。它的符号是三个点 ...，就像把数组里的所有元素“展开”出来，再把这些元素拼到新数组里。

举个生活化的例子：假设你有两袋水果，第一袋是 ['苹果', '香蕉']，第二袋是 ['橙子', '葡萄']。用展开运算符合并的话，就像把两袋水果倒在同一个盘子里，代码就是 const allFruits = [...bag1, ...bag2]，最终得到的结果是 ['苹果', '香蕉', '橙子', '葡萄']。

这个方法的好处是简单直接，还能同时合并多个数组，比如再加一袋 ['草莓']，直接写成 [...bag1, ...bag2, ...bag3] 就行。不过要注意，它只会合并数组的“表层元素”，如果数组里还有嵌套的数组，比如 bag1 = ['苹果', ['小番茄', '蓝莓']]，合并后嵌套的数组会保留原样，不会自动拆开来。

用数组方法合并：concat

如果喜欢用数组自带的方法，concat 就是专门做合并的。它的用法是用一个数组调用 concat，参数里放其他要合并的数组，结果会返回一个新的数组，不会改变原来的数组。

还是用刚才的水果例子，代码就是 const allFruits = bag1.concat(bag2)，效果和展开运算符一样，得到合并后的数组。它也支持合并多个数组，比如 bag1.concat(bag2, bag3)。

和展开运算符相比，concat 的兼容性更好，哪怕用非常旧的浏览器也能运行；而展开运算符是 ES6 才加入的新语法，老环境可能不支持。如果需要兼容低版本环境，用 concat 更稳妥。

特殊情况：如果数组里有重复元素？

刚才的方法合并后会保留重复项，比如两个数组都有 '苹果'，合并后就会出现两次。如果需要去掉重复的元素，可以结合 Set 来处理。Set 是 JavaScript 里的不重复集合，把合并后的数组放进 Set 里，它会自动过滤掉重复值，再用 Array.from 转成数组就行。

比如合并后的数组是 ['苹果', '香蕉', '苹果']，用 Array.from(new Set(allFruits)) 处理后，就得到 ['苹果', '香蕉']，适合需要去重的场景，比如合并用户的兴趣标签，避免同一个标签重复出现。

注意事项：别改变原数组

不管用展开运算符还是 concat，这两个方法都不会修改原来的数组，而是返回一个新的合并数组。如果不小心用了其他方法，比如循环把元素塞进第一个数组，就会改变原来的数组，可能会导致后续代码出问题，比如原来的购物车数组被意外修改，影响其他页面的展示。

总结下来，JavaScript 合并数组的方法很灵活，新手可以先用展开运算符，兼容性要求高的话用 concat，需要去重就结合 Set，根据不同场景选合适的方法就行。