时间戳

首页 > 解决方案 > 如何使用扩展运算符（ES6）根据对象的 id 合并对象列表

javascript - 如何使用扩展运算符（ES6）根据对象的 id 合并对象列表

问题描述

假设我有两个对象列表，

list1 = [{id: 1, name: "tom", age:25}, {id: 2, name: "brad", age:35}, {id: 3, name: "marry", age:23}]

和

list2 = [{id: 1, OS: "Windows"}, {id: 2, OS: "Mac"}];

我如何获得

finalList = [{id: 1, name: "tom", age:25, OS: "Windows"}, {id: 2, name: "brad", age:35, OS: "Mac"}, {id: 3, name: "marry", age:23}

如果可能的话，我想使用扩展运算符来实现这一点，处理列表长度不同且某些对象没有 id 的场景。

标签： javascriptreactjsecmascript-6

解决方案

您可以使用.map()返回新结果list1并.find()从中获取对应list2的元素list1：

let list1 = [{id: 1, name: "tom", age:25}, {id: 2, name: "brad", age:35}, {id: 3, name: "marry", age:23}];

let list2 = [{id: 1, OS: "Windows"}, {id: 2, OS: "Mac"}];

let result = list1.map(x => {
    let l2 = list2.find(y => y.id === x.id);
    return l2 ? { ...x, ...l2 } : x;
  });
  
 console.log(result);

推荐阅读