JavaScript 合并两个对象数组为一个对象数组

本文介绍了使用 JavaScript 将两个对象数组合并为一个对象数组的有效方法。通过 `map` 函数和对象展开运算符，可以简洁地将两个数组中对应索引的对象合并成一个新对象，最终得到包含合并后对象的新数组。

在 JavaScript 中，经常需要将两个对象数组合并成一个，以便更方便地进行数据处理。以下提供一种简洁高效的方法，利用 map 函数和对象展开运算符来实现这一目标。

实现方法

假设我们有两个数组 arr1 和 arr2，它们包含的对象需要合并：

立即学习“Java免费学习笔记（深入）”；

var arr1 = [
  {id:1, name: "xxx"}
];

var arr2 =[
 {details:"finance", cost:"100"}
];

可以使用 map 函数遍历 arr1，并将 arr2 中对应索引的对象合并到 arr1 的每个对象中：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

const result = arr1.map((item, index) => ({ ...item, ...arr2[index] }));

console.log(result); // 输出: [ { id: 1, name: 'xxx', details: 'finance', cost: '100' } ]

代码解释

1. arr1.map((item, index) => ...): map 函数遍历 arr1 数组，对每个元素执行回调函数。item 代表当前元素（即 arr1 中的每个对象），index 代表当前元素的索引。
2. ({...item, ...arr2[index]}): 这是关键所在。
   • ...item：使用对象展开运算符，将 item 对象的所有属性复制到新对象中。
   • ...arr2[index]：同样使用对象展开运算符，将 arr2 中对应索引的对象的属性复制到新对象中。如果 arr2 在相同 index 下没有值，则 arr2[index] 将返回 undefined，展开运算符作用于 undefined 不会报错，也不会添加任何属性。
   • {}：使用大括号创建一个新的对象，并将展开后的属性放入该对象中。

注意事项

• 数组长度: 这种方法假设 arr1 和 arr2 的长度相同，或者至少 arr1 的长度小于等于 arr2 的长度。如果 arr1 比 arr2 长，那么 arr2 中索引超出范围的元素将为 undefined，合并后的对象只会包含 arr1 的元素。如果 arr2 比 arr1 长，则arr2中多余的元素不会体现在结果中。
• 属性覆盖: 如果 arr1 和 arr2 中相同索引的对象有相同的属性名，arr2 中对象的属性值将覆盖 arr1 中对象的属性值。例如，如果两个数组都有一个名为 id 的属性，那么合并后的对象中 id 的值将是 arr2 中对象的 id 值。
• 性能: 对于大型数组，map 函数的性能表现良好。

总结

通过结合 map 函数和对象展开运算符，可以简洁高效地将两个对象数组合并为一个对象数组。这种方法不仅代码可读性高，而且易于理解和维护。在实际开发中，可以根据具体需求进行调整，例如处理数组长度不一致的情况，或者自定义属性合并的逻辑。

以上就是JavaScript 合并两个对象数组为一个对象数组的详细内容，更多请关注php中文网其它相关文章！