JavaScript中如何合并两个对象数组并仅保留指定键

你需要修改map回调里的返回语句，之前的错误代码存在两个问题：一是写错了字段名（order.id应为order.orderId），二是未正确指定返回对象的属性键名。

正确修改后的代码 #

const arrOrder = [
  { orderId: 1, userId: 1, name: "Zack", itemId: 100 },
  { orderId: 2, userId: 2, name: "Robin", itemId: 200 }
];

const arrItem = [
  { itemId: 100, itemName: "Fruits", itemDescription: "Apple and Oranges" },
  { itemId: 200, itemName: "Snacks", itemDescription: "Potato Chips and Nuts" }
];

const mergedArray = arrOrder.map((order) => {
  const matchedObject = arrItem.find((item) => item.itemId === order.itemId);
  // 直接构造仅包含目标字段的对象
  return {
    orderId: order.orderId,
    name: order.name,
    itemName: matchedObject.itemName
  };
});

console.log(mergedArray);

更简洁的ES6写法 #

利用对象解构和属性简写语法，让代码更清爽：

const mergedArray = arrOrder.map((order) => {
  const matchedObject = arrItem.find((item) => item.itemId === order.itemId);
  // 解构提取需要的字段
  const { orderId, name } = order;
  return {
    orderId,
    name,
    itemName: matchedObject.itemName
  };
});

错误代码问题说明 #

你之前尝试的代码中，order.id是不存在的字段（原对象的订单ID字段是orderId），且直接写order.id会把该表达式作为键名返回，不符合需求。必须明确提取目标字段并指定正确的键名，才能得到你想要的结果。

运行修改后的代码，输出结果会完全匹配你的期望。

内容的提问来源于stack exchange，提问作者PixelCoder