如何使用扩展运算符（ES6）根据对象的 ID 合并对象列表答案

【问题标题】：How to merge lists of objects based on their id's using the spread operator (ES6)如何使用扩展运算符（ES6）根据对象的 ID 合并对象列表
【发布时间】：2020-02-19 03:00:39
【问题描述】：

假设我有两个对象列表，

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 的场景。

【问题讨论】：

到目前为止你尝试过什么代码？

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以使用.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);

【讨论】：

【解决方案2】：

这将合并任意长度和任意数量参数的对象

function merge(...args) {
    const max_pointer = Math.max(...args.map(arg=>arg.length));
    const test = []
    for (let i = 0; i < max_pointer; i++) {
        let e = args.map(arg=>arg[i]);
        let new_obj = Object.assign({}, ...e);
        test.push(new_obj);
    }
    return test;
}

const list1 = [{id: 1, name: "tom", age:25}, {id: 2, name: "brad", age:35}, {id: 3, name: "marry", age:23}] 
const list2 = [{id: 1, OS: "Windows"}, {id: 2, OS: "Mac"}]; 



console.log(merge(list1, list2));

【讨论】：