js 数组合并（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数组合并是一项基础且高频的操作。无论是处理用户数据、合并配置项，还是整合多个 API 响应，开发者都需要灵活运用数组合并的方法。对于编程初学者而言，理解数组合并的底层逻辑和不同场景的适用性至关重要；而中级开发者则可以通过深入探索高级技巧，提升代码的优雅度和性能。本文将以“js 数组合并”为核心，通过循序渐进的方式，从基础概念到实战案例，全面解析这一主题。

数组合并的基础概念

什么是数组合并？

数组合并（Array Merging）是指将两个或多个数组中的元素整合到一个新数组中的操作。例如，将 [1, 2] 和 [3, 4] 合并为 [1, 2, 3, 4]。在 JavaScript 中，数组合并可以通过多种方法实现，每种方法都有其特点和适用场景。

合并的核心逻辑：元素追加与去重

合并数组的核心逻辑可以分为两部分：

1. 元素追加：将一个数组的元素依次添加到另一个数组的末尾。
2. 去重处理：在合并时，可能需要排除重复的元素（例如合并两个购物车列表时，避免重复商品）。

形象比喻：
可以将数组合并想象为整理乐高积木的过程。每个数组是一个装有不同颜色积木的盒子，合并操作就是将多个盒子中的积木全部倒入一个大盒子里。如果希望避免重复，就需要检查每一块积木是否已存在。

常用方法详解

方法一：concat() 方法

concat() 是 JavaScript 数组的原生方法，用于合并两个或多个数组。它返回一个新数组，而不修改原数组。

基础用法

const arr1 = [1, 2];  
const arr2 = [3, 4];  
const mergedArray = arr1.concat(arr2);  
console.log(mergedArray); // 输出：[1, 2, 3, 4]  

扩展：合并多个数组

concat() 支持传入多个数组作为参数：

const arr3 = [5, 6];  
const mergedArray = arr1.concat(arr2, arr3);  
// 输出：[1, 2, 3, 4, 5, 6]  

注意事项

• 不改变原数组：concat() 总是返回新数组，原数组保持不变。
• 嵌套数组处理：如果参数是数组，则其元素会被展开；如果是非数组参数（如数字或字符串），则直接追加。例如：

  const result = [0].concat(5, [6, 7]); // 输出：[0, 5, 6, 7]  
  

方法二：扩展运算符（Spread Operator）

扩展运算符 ... 是 ES6 引入的语法糖，可以更简洁地实现数组合并。

基础用法

const mergedArray = [...arr1, ...arr2];  
console.log(mergedArray); // 输出：[1, 2, 3, 4]  

优势对比

扩展运算符的语法更直观，尤其适合合并多个数组：

const mergedArray = [...arr1, ...arr2, ...arr3];  

深入理解：底层原理

扩展运算符在合并数组时，会遍历目标数组的元素并逐个复制到新数组中。这一过程与 concat() 类似，但语法更简洁。

方法三：push() 方法与 apply() 结合

push() 方法可以向数组末尾添加元素，但直接合并数组时需要借助 apply()：

const mergedArray = arr1.slice(); // 复制原数组避免修改  
Array.prototype.push.apply(mergedArray, arr2);  
console.log(mergedArray); // 输出：[1, 2, 3, 4]  

注意事项

• 修改原数组：如果直接使用 arr1.push()，原数组会被修改。
• 兼容性：apply() 在 ES6 之后仍可用，但代码可读性较低，建议优先使用 concat() 或扩展运算符。

方法四：reduce() 方法

reduce() 是一个高阶函数，通过迭代数组生成最终结果。利用它可以灵活合并数组：

const mergedArray = [arr1, arr2].reduce((acc, curr) => acc.concat(curr), []);  
console.log(mergedArray); // 输出：[1, 2, 3, 4]  

场景优势

当需要合并一个数组列表（例如 [[1], [2], [3]]）时，reduce() 非常实用：

const arrayOfArrays = [[1], [2], [3]];  
const merged = arrayOfArrays.reduce((acc, curr) => acc.concat(curr), []);  
// 输出：[1, 2, 3]  

合并时的去重处理

使用 Set 实现去重

如果合并后的数组需要排除重复元素，可以借助 Set 数据结构：

const mergedArray = [...new Set([...arr1, ...arr2])];  
// 输出：合并后的数组，且元素唯一  

注意事项

• Set 会自动去重，但会保留首次出现的元素。
• 对于复杂对象（如对象或自定义类的实例），需自定义去重逻辑（例如通过唯一标识符）。

手动去重函数

如果需要更精细的控制，可以编写自定义函数：

function mergeUnique(arr1, arr2) {  
  const merged = [...arr1, ...arr2];  
  const unique = [];  
  merged.forEach(item => {  
    if (!unique.includes(item)) {  
      unique.push(item);  
    }  
  });  
  return unique;  
}  

实战案例与代码示例

案例一：合并购物车列表

假设用户有两个购物车数组，需要合并并去重：

const cart1 = ["apple", "banana", "orange"];  
const cart2 = ["banana", "grape", "kiwi"];  

const mergedCart = [...new Set([...cart1, ...cart2])];  
console.log(mergedCart); // 输出：["apple", "banana", "orange", "grape", "kiwi"]  

案例二：合并 API 响应数据

当从多个 API 端点获取分页数据时，合并数组并排序：

const page1 = [{ id: 1 }, { id: 2 }];  
const page2 = [{ id: 3 }, { id: 4 }];  

const allItems = [...page1, ...page2].sort((a, b) => a.id - b.id);  

案例三：处理表单多选字段

在表单提交时，合并多个多选框的选中值：

const selectedColors = ["red", "blue"];  
const selectedSizes = ["S", "M"];  

const formData = {  
  selections: [...selectedColors, ...selectedSizes]  
};  

性能与选择建议

性能对比

选择建议

• 简单合并：优先使用扩展运算符（[...arr1, ...arr2]）。
• 需要去重：结合 Set 或自定义函数。
• 复杂场景：例如合并嵌套数组或对象时，使用 reduce() 并编写自定义逻辑。

结论

js 数组合并是 JavaScript 开发中的核心技能之一，掌握其方法和逻辑可以帮助开发者高效处理数据整合任务。从基础的 concat() 到现代的扩展运算符，再到 reduce() 的灵活应用，每种方法都有其适用场景。对于初学者，建议从扩展运算符和 concat() 入手，逐步理解数组操作的底层原理；中级开发者则可以通过结合 Set 或 reduce()，解决更复杂的合并需求。

通过本文的讲解和案例，希望读者能够：

1. 理解数组合并的底层逻辑和核心操作。
2. 掌握至少三种合并数组的方法，并根据场景选择最优方案。
3. 在实际项目中灵活应用去重和性能优化技巧。

未来在开发中遇到数组合并的场景时，不妨先问自己：

• 需要保留原数组吗？
• 是否需要去重？
• 是否需要处理复杂数据类型？

带着这些问题选择合适的方法，你的代码将更加优雅和高效。