JavaScript中为对象数组重复产品名分配相同productId

我们有一个包含productId、productName、price字段的JavaScript对象数组，其中productName存在重复，但所有productId初始都是唯一的。需要实现的是：让所有同名产品共享同一个productId（以第一次出现的产品的productId为准）。

示例输入 #

const products = [
  { productId: 1, productName: 'Apple', price: 1.0 },
  { productId: 2, productName: 'Banana', price: 0.5 },
  { productId: 3, productName: 'Orange', price: 1.2 },
  { productId: 4, productName: 'Apple', price: 1.0 },
  { productId: 5, productName: 'Banana', price: 0.5 },
];

示例输出 #

const products = [
  { productId: 1, productName: 'Apple', price: 1.0 },
  { productId: 2, productName: 'Banana', price: 0.5 },
  { productId: 3, productName: 'Orange', price: 1.2 },
  { productId: 1, productName: 'Apple', price: 1.0 },
  { productId: 2, productName: 'Banana', price: 0.5 },
];

解决方案 #

核心思路是先建立产品名称到对应首次出现productId的映射表，再遍历数组替换重复产品的ID：

const products = [
  { productId: 1, productName: 'Apple', price: 1.0 },
  { productId: 2, productName: 'Banana', price: 0.5 },
  { productId: 3, productName: 'Orange', price: 1.2 },
  { productId: 4, productName: 'Apple', price: 1.0 },
  { productId: 5, productName: 'Banana', price: 0.5 },
];

// 构建名称到首次出现ID的映射
const nameIdMap = {};
products.forEach(item => {
  if (!nameIdMap[item.productName]) {
    nameIdMap[item.productName] = item.productId;
  }
});

// 更新数组中的productId
const updatedProducts = products.map(item => ({
  ...item,
  productId: nameIdMap[item.productName]
}));

console.log(updatedProducts);

代码说明 #

• 第一步遍历数组时，仅记录每个productName第一次出现时对应的productId，确保映射表中每个名称只对应一个唯一ID。
• 第二步使用map方法创建新数组，复制原对象的所有属性并替换productId为映射表中的对应值，避免修改原数组（如果需要直接修改原数组，可改用forEach遍历赋值）。

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