如果使用 javascript 找到匹配项，则将属性附加/添加到对象数组答案

【问题标题】：Append/Add the property to array of objects if match found using javascript如果使用 javascript 找到匹配项，则将属性附加/添加到对象数组
【发布时间】：2022-09-22 23:22:04
【问题描述】：

我有两个对象数组，如果id 和aid 属性值匹配，则将属性code 附加到arr1 并返回结果

var arr1 = [
  { id: 1, name: \"xxx\", cn: \"IN\" },
  { id: 2, name: \"yyy\", cn: \"MY\" },
  { id: 3, name: \"zzz\", cn: \"SG\" },
]

var arr2 = [
  { aid: 1, code: \"finance\" },
  { aid: 2, code: \"others\" },
  { aid: 4, code: \"finance\" },
  { aid: 5, code: \"product\" },
]

预期结果：

var arr1 = [
  { id: 1, name: \"xxx\", cn: \"IN\", code: \'finance\'},
  { id: 2, name: \"yyy\", cn: \"MY\", code: \'others\'},
  { id: 3, name: \"zzz\", cn: \"SG\", code: \'\'},
]

我试过了

var result = arr1.map(e=> ({
  ...e,
  code: arr2.map(i=>i.code)
})

预期的数组有多大，arr1 的每个 ID 是否都会按顺序排列在其中？

标签： javascript reactjs arrays for-loop object

【解决方案1】：

您需要首先在arr2 中找到匹配的项目，然后他们创建组合项目。

试试这样：

var arr1 = [
  { id: 1, name: "xxx", cn: "IN" },
  { id: 2, name: "yyy", cn: "MY" },
  { id: 3, name: "zzz", cn: "SG" },
];

var arr2 = [
  { aid: 1, code: "finance" },
  { aid: 2, code: "others" },
  { aid: 4, code: "finance" },
  { aid: 5, code: "product" },
];

const result = arr1.map((item) => {
  const match = arr2.find((o) => o.aid === item.id);
  return match ? { ...item, code: match.code } : item;
});

console.log(result);

【讨论】：

这不会将“代码：''”放在最终结果中，这是一个要求。
@HemantSinghBisht 它确实放置了代码。你甚至可以执行和检查

【解决方案2】：

您可以使用filter() 对arr1 进行循环以在arr2 中查找匹配项。这会将code 属性添加到现有的arr1 数组中，而无需创建新的数组实例。

请注意，此逻辑假定在arr2 中只会有 0 或 1 个匹配项。

var arr1 = [
  { id: 1, name: "xxx", cn: "IN" },
  { id: 2, name: "yyy", cn: "MY" },
  { id: 3, name: "zzz", cn: "SG" },
]

var arr2 = [
  { aid: 1, code: "finance" },
  { aid: 2, code: "others" },
  { aid: 4, code: "finance" },
  { aid: 5, code: "product" },
]

arr1.forEach(o1 => o1.code = arr2.filter(o2 => o2.aid === o1.id)[0]?.code || ''); 
console.log(arr1);

【讨论】：

【解决方案3】：

我不确定这是否是最佳解决方案，但这绝对适用于您的情况：

let result = arr1.map((outerObj) => {
    // First we try to find the index of the matching object
    let index = arr2.findIndex((innerObj) => {
        return outerObj.id == innerObj.aid;
    });

    // In case of no match, set case as "" as per requirement
    if(index == -1) {
        outerObj.code = "";
        return outerObj;
    }

    // If a match is found, then combine the two objects.
    let mergedObj = { ...outerObj, ...arr2[index]}; 

    // aid is not needed in the result, Who wants aids anyway? 
    delete mergedObj.aid;
    return mergedObj;
});

如果不是更优化，那么肯定会有更小的代码，但我认为代码应该清晰易读，而不是更小。

【讨论】：

【解决方案4】：

首先，将数据按摩成快速操作的格式；然后操纵。

以下：

将arr2 中的每个项目放入地图中，键入aid

枚举arr1一次，查看每个item的map是否有对应的code

性能：O(N)。

var arr1= [
  {id:1, name: "xxx", cn: "IN"},
  {id:2, name: "yyy", cn: "MY"},
  {id:3, name: "zzz", cn: "SG"} ]

var arr2 = [
  { aid: 1, code: "finance"},
  { aid: 2, code: "others"},
  { aid: 4, code: "finance"},
  { aid: 5, code: "product"} ]

const map = arr2.reduce((p,c) => p.set(c.aid, c), new Map)

arr1.forEach((i) => i.code = map.get(i.id)?.code || '')

console.log(arr1)

【讨论】：