如何使用Angular 2或Lodash合并两个对象数组？附示例

当然可以实现！不管是用Angular 2原生的JavaScript/TypeScript语法，还是借助Lodash工具库，都能轻松完成这个数组合并的需求。

Angular 2原生实现（无需额外依赖） #

Angular 2本身支持ES6+和TypeScript，所以我们可以直接用数组的map()方法，结合对象扩展运算符或者Object.assign()来完成合并——前提是两个数组的长度一致，对应索引的元素需要配对：

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}];
let arr2 = [{value: "some value 1"}, {value: "some value 2"}];

// 用ES6扩展运算符合并对象
const result = arr1.map((item, index) => {
  return {...item, ...arr2[index]};
});

如果你的项目环境还不支持扩展运算符，也可以用Object.assign()替代：

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

小提示：如果不确定两个数组长度是否完全一致，可以加个判断避免索引越界：

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

使用Lodash实现 #

Lodash当然是可行的，它提供了更简洁的工具函数来处理这类数组配对合并的场景，比如_.zipWith()：

import * as _ from 'lodash';

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}];
let arr2 = [{value: "some value 1"}, {value: "some value 2"}];

// 用扩展运算符合并对应元素
const result = _.zipWith(arr1, arr2, (a, b) => ({...a, ...b}));

// 或者直接用Lodash的assign函数
// const result = _.zipWith(arr1, arr2, _.assign);

_.zipWith()会自动将两个数组对应位置的元素传入第三个参数的合并函数，最终返回合并后的新数组，非常适合这种按索引配对的场景。

内容的提问来源于stack exchange，提问作者Berdnikov Bodan