比较两个对象数组并赋值答案

【问题标题】：Compare two arrays of objects and assign value比较两个对象数组并赋值
【发布时间】：2019-04-08 19:03:25
【问题描述】：

我有两个对象数组：

 let arr1 = [{id: 100, quantity: 2, grp: 1A},{...},{...}, ...],

 let arr2 = [{id: 100, color: "#000"},{...},{...}, ...],

arr2 包含具有来自 arr1 的每个对象的 id 和颜色的对象。

我的问题是：如何循环遍历两个对象数组并将 arr2 的颜色属性添加到 arr1 中的相应对象？

【问题讨论】：

JavaScript merging objects by id的可能重复

标签： javascript object ecmascript-6 functional-programming

【解决方案1】：

使用forEach 循环遍历arr1，并在该函数内部，使用filter 查找与arr1 中的当前项匹配的arr2 项：

arr1.forEach(item=>item.color = arr2.filter(colorObj=>colorObj.id===item.id)[0].color)

或者，更易读：

arr1.forEach(item=>{
    var matchingColorObj = arr2.filter(colorObj=>colorObj.id===item.id)[0];
    item.color = matchingColorObj.color;
});

【讨论】：

【解决方案2】：

如果您不想在 arr1 中搜索 arr2 的每个项目（制作 O(n²) 解决方案），您可以为 arr1 创建一个查找对象，键入 id。然后，您可以简单地循环通过arr2 合并通过查找找到的对象。如果您有更大的数组，这将更有效。

let arr1 = [{id: 100, quantity: 2, grp: '1A'},{id: 101, quantity: 2, grp: '2A'}]
let arr2 = [{id: 101, color: "#FFF"}, {id: 100, color: "#000"}] 

// make lookup
let lookup = arr1.reduce((lookup, item) => lookup.set(item.id, item), new Map)

// assign color to correct object
arr2.forEach(({id, ...rest}) => Object.assign(lookup.get(id), rest))
console.log(arr1)

【讨论】：

【解决方案3】：

也许你可以这样做

    let arr1 = [{
      id: 100,
      quantity: 2,
      grp: 1 A
    }];

    let arr2 = [{
      id: 100,
      color: "#000"
    }];

    arr2.forEach(obj => {

      arr1.find(arr1_element => arr1_element.id == obj.id).color = obj.color;
    });

    console.log(arr1, arr2);

【讨论】：

【解决方案4】：

let arr1 = [{id: 100, quantity: 2, grp: 1A},{...},{...}, ...],

let arr2 = [{id: 100, color: "#000"},{...},{...}, ...],

首先从arr2 创建查找映射，然后在arr1 上使用.map() 从查找表中分配值。

let lookupMap = new Map();
arr2.forEach((val,key)=>{
  lookupMap.set(val.id, val.color);
});

let mappedArray = arr1.map((obj)=> {
  let color = lookupMap.get(obj.id);
  return {...obj, color }
});

// mapped Array would be as 
//[ { id: 100, quantity: 2, grp: '1A', color: '#000' },
// {...},{...} ]

【讨论】：