在 javascript/es6 的 forEach 循环中使用 find()答案

【问题标题】：Using find() inside forEach loop in javascript/es6在 javascript/es6 的 forEach 循环中使用 find()
【发布时间】：2021-01-28 19:21:18
【问题描述】：

我有两个数组 - array 1 和 array 2。如果 array2 中存在该项目，我想更新 array1 项目的 newName 属性。我有以下代码来完成这项任务

array1.forEach((array1Item) => {
   const foundItem = array2.find(array2Item => array2Item.id === array1Item.id);                   
   if (foundItem) {                      
    array1Item.newName = foundItem.name;                  
   }           
})

我想知道是否有更好（或现代）的方式来使用 es6 函数编写这段代码。

【问题讨论】：

但是你使用的是 ES6...
你的意思是array1Item.newName = foundItem.name; ？
是的，我是..但想知道是否有更好的方法来做到这一点:)
@TKoL：是的，抱歉...编辑了问题
你应该定义“更好”。这段代码有什么问题？

标签： javascript reactjs angular typescript ecmascript-6

【解决方案1】：

为array2 创建一个从 id 到 item 的哈希并使用它来获取新名称可能是个好主意。

const idsToArray2 = array2.reduce( (acc, current) => 
 { 
  acc[current.id]=current; 
  return acc
 }, {})

array1.forEach((array1Item) => {
   const foundItem = idsToArray2[array1Item.id];                   
   if (foundItem) {                      
    array1.newName = foundItem.name;                  
   }           
})

【讨论】：

【解决方案2】：

您可以采用两个单独的循环并在第一个中收集所有 id/name 并在第二个新对象中映射而不改变某些数据。

const
    names = array2.reduce((m, { id, name: newName }) => m.set(id, { newName }), new Map),
    result = array1.map(o => ({ ...o, ...names.get(o.id) }));

【讨论】：

【解决方案3】：

您也可以通过这种方式达到同样的效果。首先为array2 创建一个索引，然后根据indexed 对象中的项目映射array1。

const indexed = array2.reduce((o, c) => ({...o, [c['id']]: c}), {});
array1 = array1.map(item => {
    if (indexed[item.id]) return {...item, newName: indexed[item.id].name};
    return item;
})

【讨论】：