合并对象数组 JavaScript

在 JavaScript 中，经常会遇到需要合并多个对象数组的情况。本篇文章将介绍几种常见的实现方法，以及它们的优缺点。

方法一：使用 concat 函数

const arr1 = [{ a: 1 }, { b: 2 }];
const arr2 = [{ c: 3 }, { d: 4 }];
const combined = arr1.concat(arr2);

以上代码的执行结果为：

[
  { a: 1 },
  { b: 2 },
  { c: 3 },
  { d: 4 }
]

优点：concat 函数简单易懂，代码可读性好。

缺点：如果需要合并的对象数组数量很多，多次使用 concat 函数会影响性能。

方法二：使用 reduce 函数

const arr = [{ a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }];

const combined = arr.reduce((accumulator, currentValue) => {
  return [...accumulator, ...currentValue];
}, []);

以上代码的执行结果与方法一相同。

优点：使用 reduce 函数可以一次性合并多个对象数组，减少了函数调用的次数，提高了性能。

缺点：代码可能不太清晰易懂。

方法三：使用 spread 运算符

const arr1 = [{ a: 1 }, { b: 2 }];
const arr2 = [{ c: 3 }, { d: 4 }];
const combined = [...arr1, ...arr2];

以上代码的执行结果与方法一相同。

优点：使用 spread 运算符可以让代码更为简洁易懂。

缺点：如果需要合并的对象数组数量很多，使用 spread 运算符可能会导致内存占用过高。

综上所述，根据具体的使用场景选择不同的合并对象数组的方式。如果需要合并的对象数组数量很少，则可以使用 concat 函数或者 spread 运算符；如果需要合并的对象数组数量很多，则可以使用 reduce 函数，保证性能的同时提高代码的可读性。