怎样使用JS让数组合并和对象合并

在JavaScript开发中，数组和对象的合并是常见的操作场景。无论是处理后端返回的API数据、构建复杂数据结构，还是实现前端状态管理，掌握高效的合并方法都能显著提升开发效率。本文将系统讲解JavaScript中数组合并与对象合并的多种实现方式，结合ES6+特性与实际案例，帮助开发者深入理解不同场景下的最佳实践。

一、数组合并的多种实现方式

数组合并的需求通常出现在数据拼接、批量处理等场景。JavaScript提供了多种实现数组合并的方法，每种方法在性能、可读性和适用场景上各有特点。

1. 传统concat方法

ES5时代的concat()方法是数组合并的基础方案。该方法不会修改原数组，而是返回一个新数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4]
console.log(arr1);  // [1, 2] 原数组不变

当需要合并多个数组时，可以链式调用：

const arr3 = [5, 6];
const multiMerged = arr1.concat(arr2, arr3);
console.log(multiMerged); // [1, 2, 3, 4, 5, 6]

2. ES6展开运算符

ES6引入的展开运算符（...）提供了更简洁的语法，特别适合函数调用和数组字面量中的合并操作。

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

展开运算符的优势在于可以与其他元素混合使用：

const prefix = 0;
const merged = [prefix, ...arr1, ...arr2, 99];
console.log(merged); // [0, 1, 2, 3, 4, 99]

3. 性能对比与选择建议

在性能测试中（使用100万元素数组），展开运算符在大多数现代浏览器中表现略优于concat()，但差异通常在毫秒级。实际开发中应优先考虑代码可读性：

• 简单合并：推荐展开运算符（语法简洁）
• 旧环境兼容：使用concat()
• 超大数组：考虑分块处理避免内存问题

二、对象合并的深度解析

对象合并常见于配置项整合、状态管理等场景。与数组不同，对象合并需要处理键值覆盖、嵌套对象等复杂情况。

1. Object.assign()方法

ES6的Object.assign()实现了浅拷贝合并，将源对象的可枚举属性复制到目标对象。

const target = { a: 1 };
const source = { b: 2, c: 3 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 } 原对象被修改

注意事项：

• 会修改第一个参数对象
• 遇到同名属性时，后面的会覆盖前面的
• 仅浅拷贝，嵌套对象仍是引用

2. 展开运算符的对象应用

ES2018将展开运算符扩展到对象，提供了更直观的合并语法：

const obj1 = { x: 1, y: 2 };
const obj2 = { y: 3, z: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { x: 1, y: 3, z: 4 }

与Object.assign()不同，展开运算符：

• 不会修改原对象
• 可以结合其他属性使用
• 更符合函数式编程思想

3. 深拷贝合并的实现

对于嵌套对象，需要实现深拷贝合并。常见方案有：

（1）递归实现

function deepMerge(target, source) {
  for (const key in source) {
    if (source[key] instanceof Object && !Array.isArray(source[key])) {
      if (!target[key]) target[key] = {};
      deepMerge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = deepMerge({}, obj1);
deepMerge(merged, obj2);
console.log(merged); // { a: { b: 1, c: 2 } }

（2）使用第三方库

Lodash的_.merge()提供了成熟的深合并实现：

const _ = require('lodash');
const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = _.merge({}, obj1, obj2);
console.log(merged); // { a: { b: 1, c: 2 } }

三、合并场景的实战案例

1. 表单数据整合

前端开发中常需要将多个表单字段合并为统一对象：

const formData = {
  ...(form.name && { name: form.name }),
  ...(form.age && { age: parseInt(form.age) }),
  ...(form.address && { address: form.address })
};

2. 状态管理中的合并

Redux等状态管理库中，需要合并新旧状态：

const initialState = {
  user: null,
  loading: false
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return { ...state, user: action.payload, loading: false };
    default:
      return state;
  }
}

3. API响应数据处理

合并多个API响应构建完整数据集：

async function fetchCompleteData() {
  const [userRes, ordersRes] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/orders')
  ]);
  
  const userData = await userRes.json();
  const ordersData = await ordersRes.json();
  
  return {
    ...userData,
    orders: ordersData.items
  };
}

四、常见问题与解决方案

1. 合并中的循环引用问题

当对象包含对自身的引用时，简单深拷贝会导致堆栈溢出。解决方案：

function safeDeepMerge(target, source, cache = new WeakMap()) {
  if (cache.has(source)) return cache.get(source);
  
  cache.set(source, target);
  for (const key in source) {
    if (source[key] instanceof Object && !Array.isArray(source[key])) {
      target[key] = safeDeepMerge(
        Array.isArray(source[key]) ? [] : {},
        source[key],
        cache
      );
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

2. 不可枚举属性的处理

Object.assign()和展开运算符都不会复制不可枚举属性。如需完整复制，可使用：

function completeCopy(obj) {
  return Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj)
  );
}

3. 合并顺序的优化

在多层合并时，注意合并顺序会影响最终结果。建议采用"后合并的优先级更高"原则，保持代码一致性。

五、性能优化技巧

1. 大数组合并优化

对于超过10万元素的数组，建议分块处理：

function chunkMerge(arr1, arr2, chunkSize = 10000) {
  const result = [];
  for (let i = 0; i 

2. 对象合并的缓存策略

频繁合并相同结构对象时，可使用原型链优化：

const defaultConfig = { theme: 'light', fontSize: 14 };
function createMergedConfig(custom) {
  const merged = Object.create(defaultConfig);
  return { ...merged, ...custom };
}

六、未来趋势与ES提案

1. Object.fromEntries()

ES2019引入的Object.fromEntries()可以方便地将键值对数组转换为对象，与展开运算符配合使用：

const entries = [['a', 1], ['b', 2]];
const obj = { ...Object.fromEntries(entries), c: 3 };
console.log(obj); // { a: 1, b: 2, c: 3 }

2. 集合运算提案

TC39正在讨论的集合运算提案可能为数组合并带来更简洁的语法，如：

// 假设性语法
const merged = arr1 ++ arr2; // 并集
const unique = arr1 -- arr2; // 差集

关键词：JavaScript数组合并、JavaScript对象合并、ES6展开运算符、Object.assign方法、深拷贝合并、性能优化、递归合并、Lodash库、状态管理、表单数据处理

简介：本文系统讲解JavaScript中数组与对象合并的多种方法，涵盖ES5到ES6+特性，包括concat方法、展开运算符、Object.assign、深拷贝实现等核心技术，结合Redux状态管理、API数据处理等实战场景，分析性能优化策略与常见问题解决方案，适合中高级前端开发者提升数据处理能力。