JavaScript 数组合并全攻略：7种高效方法详解_js数组合并
目录
一、为什么需要数组合并？
二、7 种数组合并方法详解
1. concat() - 经典合并方法
2. 扩展运算符（ES6 首选）
3. push() + 扩展运算符 - 动态添加元素
4. reduce() - 函数式编程利器
5. flat() - 嵌套数组克星（ES2019）
6. 手动循环 - 最基础方法
7. Array.from() + Set - 合并去重
三、性能对比与最佳实践
性能测试结果（合并 10000 个元素的数组 x 1000 次）
四、实战应用场景
场景 1：合并 API 分页数据
场景 2：表单多组输入合并
场景 3：递归合并嵌套配置
五、总结与扩展知识
一、为什么需要数组合并？
在数据处理中，我们经常需要：
-
合并多个 API 返回的数据集
-
组合不同来源的用户输入
-
扁平化嵌套数据结构
-
汇总计算结果
掌握高效合并方法能大幅提升代码质量和性能！
二、7 种数组合并方法详解
1. concat() - 经典合并方法
const arr1 = [1, 2];const arr2 = [3, 4];const arr3 = [5, 6];// 合并两个数组const merged = arr1.concat(arr2); // [1, 2, 3, 4]// 合并多个数组const allMerged = arr1.concat(arr2, arr3);// [1, 2, 3, 4, 5, 6]特点：
-
✅ 不改变原数组
-
✅ 可合并多个数组
-
❌ 不支持深层次嵌套数组的扁平化
2. 扩展运算符（ES6 首选）
const fruits = [\'🍎\', \'🍌\'];const veggies = [\'🥦\', \'🥕\'];const sweets = [\'🍰\', \'🍫\'];// 基础合并const healthyFood = [...fruits, ...veggies];// [\'🍎\', \'🍌\', \'🥦\', \'🥕\']// 多数组合并const allFood = [...fruits, ...veggies, ...sweets];// [\'🍎\', \'🍌\', \'🥦\', \'🥕\', \'🍰\', \'🍫\']// 插入元素const withIceCream = [...fruits, \'🍦\', ...sweets];// [\'🍎\', \'🍌\', \'🍦\', \'🍰\', \'🍫\']特点：
-
✅ 语法简洁直观
-
✅ 灵活插入额外元素
-
✅ 现代 JS 开发首选方式
-
❌ 旧浏览器需要 polyfill
3. push() + 扩展运算符 - 动态添加元素
const cart = [\'📱\', \'💻\'];const newItems = [\'🎧\', \'⌚\'];// 合并到现有数组（改变原数组）cart.push(...newItems);console.log(cart); // [\'📱\', \'💻\', \'🎧\', \'⌚\']特点：
-
✅ 直接修改原数组
-
✅ 高效添加多个元素
-
❌ 无法处理超大数组（可能栈溢出）
4. reduce() - 函数式编程利器
const arrays = [[1, 2], [3, 4], [5, 6]];const flattened = arrays.reduce((acc, current) => { return acc.concat(current);}, []);console.log(flattened); // [1, 2, 3, 4, 5, 6]高级用法 - 条件合并：
const data = [ [1, 2], null, [5, 6], undefined, [7, 8]];const cleanMerge = data.reduce((acc, curr) => { return curr ? [...acc, ...curr] : acc;}, []);console.log(cleanMerge); // [1, 2, 5, 6, 7, 8]特点：
-
✅ 处理复杂合并逻辑
-
✅ 过滤无效数据
-
❌ 性能不如原生方法
5. flat() - 嵌套数组克星（ES2019）
const nestedArray = [1, [2, 3], [4, [5, 6]]];// 默认展开一层console.log(nestedArray.flat()); // [1, 2, 3, 4, [5, 6]]// 展开所有层级console.log(nestedArray.flat(Infinity)); // [1, 2, 3, 4, 5, 6]特点：
-
✅ 专为嵌套数组设计
-
✅ 可控制展开深度
-
❌ 不兼容 IE 和旧移动浏览器
6. 手动循环 - 最基础方法
const nums = [10, 20];const newNums = [30, 40];// 使用 for 循环for (let i = 0; i nums.push(num));console.log(nums); // [10, 20, 30, 40]特点：
-
✅ 最高兼容性
-
✅ 完全控制合并过程
-
❌ 代码冗长
7. Array.from() + Set - 合并去重
const dupArr1 = [1, 2, 3];const dupArr2 = [2, 3, 4];// 合并并去重const uniqueMerge = Array.from( new Set([...dupArr1, ...dupArr2]));console.log(uniqueMerge); // [1, 2, 3, 4]特点：
-
✅ 自动去重
-
✅ 简洁高效
-
❌ 无法自定义去重逻辑
三、性能对比与最佳实践
性能测试结果（合并 10000 个元素的数组 x 1000 次）
最佳实践建议：
-
现代项目：优先使用扩展运算符（
[...arr1, ...arr2]） -
需要修改原数组：使用
arr1.push(...arr2) -
深度嵌套数组：使用
flat(Infinity) -
需要去重：结合
Set和扩展运算符 -
超大型数组：使用循环分块处理
-
兼容旧浏览器：使用
concat()或手动循环
四、实战应用场景
场景 1：合并 API 分页数据
async function fetchAllPages() { let allData = []; let page = 1; while (true) { const response = await fetch(`/api/data?page=${page}`); const data = await response.json(); if (data.length === 0) break; allData = [...allData, ...data]; page++; } return allData;}场景 2：表单多组输入合并
function getFormData() { const personalInfo = [\'name\', \'email\']; const preferences = [\'theme\', \'language\']; const security = [\'password\', \'2fa\']; return { fields: [...personalInfo, ...preferences, ...security], // ES2020 可选链操作符 timestamp: new Date().toISOString() };}
场景 3：递归合并嵌套配置
function mergeConfigs(defaults, custom) { return { ...defaults, ...custom, nestedOptions: { ...defaults.nestedOptions, ...custom.nestedOptions } };}五、总结与扩展知识
掌握数组操作是 JavaScript 开发的核心能力，本文涵盖的 7 种合并方法各有适用场景：
-
简单合并 → 扩展运算符
-
修改原数组 →
push(...arr) -
深度嵌套 →
flat() -
兼容性需求 →
concat()或循环 -
高级处理 →
reduce() -
合并去重 →
Set+ 扩展运算符
扩展知识：
-
使用
Array.isArray()验证输入确保安全合并 -
使用
lodash的_.flattenDeep()处理复杂嵌套 -
使用
flatMap()实现合并+映射一步到位
