如何在JavaScript数组中识别重复项并更新其collectionTitle值以作区分

问题场景 #

原本用过滤逻辑只保留唯一值，但现在需要保留所有数组项，给重复的collectionTitle添加类似"标题 (0)"、"标题 (1)"的后缀来区分，同时保留原始数据。

原去重代码：

const removeDuplicates = arrayCollection
  .filter((link, i) => i === arrayCollection.findIndex((l) => (
    l.collectionTitle === link.collectionTitle
  )));

示例输入：

[
  {id: '1', collectionTitle: '456'},
  {id: '2', collectionTitle: '123'},
  {id: '3', collectionTitle: '123'},
];

期望输出：

[
  {id: '1', collectionTitle: '456'},
  {id: '2', collectionTitle: '123 (0)'},
  {id: '3', collectionTitle: '123 (1)'},
];

解决方案 #

通过统计标题出现次数+跟踪当前序号的方式实现，代码如下：

// 第一步：统计每个collectionTitle的出现次数
const titleOccurrences = arrayCollection.reduce((acc, item) => {
  acc[item.collectionTitle] = (acc[item.collectionTitle] || 0) + 1;
  return acc;
}, {});

// 第二步：跟踪每个标题的当前序号
const titleCounter = {};

// 第三步：遍历数组，更新重复项的标题
const updatedArray = arrayCollection.map(item => {
  const originalTitle = item.collectionTitle;
  
  // 初始化当前标题的计数器
  if (!titleCounter[originalTitle]) {
    titleCounter[originalTitle] = 0;
  }

  // 仅当标题重复时添加后缀
  const newTitle = titleOccurrences[originalTitle] > 1 
    ? `${originalTitle} (${titleCounter[originalTitle]++})` 
    : originalTitle;

  // 返回新对象（若需修改原数组，直接赋值item.collectionTitle = newTitle即可）
  return { ...item, collectionTitle: newTitle };
});

代码说明 #

1. 统计次数：用reduce遍历数组，记录每个collectionTitle的出现次数，快速判断哪些标题是重复的。
2. 跟踪序号：用titleCounter对象记录每个标题当前已处理的序号，每次处理后自动自增。
3. 更新标题：用map遍历数组，根据标题的出现次数决定是否添加后缀，返回处理后的新对象（也可直接修改原数组项）。

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