JavaScript -“组合”两个相似的对象数组

在JavaScript中，"组合"两个相似的对象数组通常指的是将两个具有相同结构的对象数组合并成一个新的数组。这种操作在处理数据时非常常见，尤其是在前端开发中，例如从不同的API获取数据并需要将它们合并在一起时。

基础概念

组合两个对象数组可以通过多种方式实现，但最常用的方法是使用Array.prototype.concat()方法或者扩展运算符（spread operator）...。这两种方法都可以将两个数组合并成一个新的数组，而不会改变原始数组。

类型

浅合并：上述方法执行的是浅合并，即如果数组中的对象有相同的属性，后面的对象会覆盖前面对象的属性值。
深合并：如果需要合并嵌套的对象，需要进行深合并，这通常需要自定义函数来实现。

应用场景

数据整合：当从不同的数据源获取数据时，可能需要将这些数据合并到一个数组中。
状态管理：在React或Vue等框架中，可能需要在组件的状态中合并新的数据。
数据处理：在进行数据分析或展示之前，可能需要将多个数据集合并。

示例代码

使用 `concat()` 方法

let array1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let array2 = [{ id: 3, name: 'Charlie' }, { id: 4, name: 'David' }];

let combinedArray = array1.concat(array2);
console.log(combinedArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 4, name: 'David' }]

使用扩展运算符

let array1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let array2 = [{ id: 3, name: 'Charlie' }, { id: 4, name: 'David' }];

let combinedArray = [...array1, ...array2];
console.log(combinedArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 4, name: 'David' }]

遇到的问题及解决方法

问题：如何进行深合并？

如果数组中的对象包含嵌套的对象，并且你希望这些嵌套的对象也合并而不是被替换，你需要编写一个深合并的函数。

解决方法：

function deepMerge(target, source) {
  const isObject = (obj) => obj && typeof obj === 'object';

  if (!isObject(target) || !isObject(source)) {
    return source;
  }

  Object.keys(source).forEach(key => {
    const targetValue = target[key];
    const sourceValue = source[key];

    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
      target[key] = targetValue.concat(sourceValue);
    } else if (isObject(targetValue) && isObject(sourceValue)) {
      target[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
    } else {
      target[key] = sourceValue;
    }
  });

  return target;
}

let array1 = [{ id: 1, details: { age: 25 } }, { id: 2, details: { age: 30 } }];
let array2 = [{ id: 1, details: { age: 26 } }, { id: 3, details: { age: 35 } }];

let combinedArray = array1.map(item => {
  let newItem = array2.find(el => el.id === item.id);
  return newItem ? deepMerge(item, newItem) : item;
}).concat(array2.filter(item => !array1.some(el => el.id === item.id)));

console.log(combinedArray);
// 输出: [{ id: 1, details: { age: 26 } }, { id: 2, details: { age: 30 } }, { id: 3, details: { age: 35 } }]

在这个例子中，deepMerge函数递归地将源对象的属性合并到目标对象中。这种方法适用于复杂的对象结构，但需要注意性能，特别是在处理大型数据集时。