如何使用JavaScript内置数组函数处理对象数组的重复标签并添加递增后缀

需求与示例 #

需要处理对象数组，当数组中存在label名称重复的项时，为这些重复项的label添加递增的括号后缀，以区分展示。

输入数据 #

const brandName = [
  {
    id: '1',
    label: 'Nike'
  },
  {
    id: '2',
    label: 'Adidas'
  },
  {
    id: '3',
    label: 'Nike'
  }
];

期望输出 #

const newBrandName = [
  {
    id: '1',
    label: 'Nike (1)'
  },
  {
    id: '2',
    label: 'Adidas'
  },
  {
    id: '3',
    label: 'Nike (2)'
  }
];

你尝试的代码问题分析 #

你写的代码存在几个明显问题：

• 变量名错误：函数参数是brandName，但代码里用了未定义的tournaments
• 循环逻辑混乱：while(r < tournaments.length)条件永远成立（初始r是数组长度-1，r减1后会变成负数，依然满足小于数组长度），而且仅比较索引0和r的元素，无法遍历所有重复项
• 计数逻辑错误：直接给label拼接数字，没有按照期望的(数字)格式处理

用JavaScript内置数组函数实现的方案 #

完全可以用内置数组函数实现，推荐使用Array.map()配合一个计数对象来完成，逻辑简洁高效：

const brandName = [
  { id: '1', label: 'Nike' },
  { id: '2', label: 'Adidas' },
  { id: '3', label: 'Nike' }
];

// 用于统计每个label的出现次数
const labelCounter = {};

const newBrandName = brandName.map(item => {
  const label = item.label;
  // 更新当前label的计数，首次出现时默认从1开始
  labelCounter[label] = (labelCounter[label] || 0) + 1;
  
  // 生成新的label文本
  const newLabel = labelCounter[label] > 1 
    ? `${label} (${labelCounter[label]})` 
    : label;
  
  // 返回新对象，避免修改原数组的元素（如果允许修改原数组，可直接修改item.label后返回item）
  return { ...item, label: newLabel };
});

console.log(newBrandName);

代码说明 #

1. 计数对象：labelCounter用来记录每个label出现的次数，遍历过程中实时更新
2. map遍历：map是内置的数组遍历函数，会返回一个新数组，不会修改原数组（保持数据不可变性）
3. 后缀生成：当label出现次数大于1时，拼接(次数)后缀，否则保持原label不变

如果需要直接修改原数组的元素，可以把返回语句改成：

item.label = newLabel;
return item;

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