React+JavaScript 如何实现数组去重并统计唯一值重复次数

现有逻辑的局限 #

你当前使用filter结合findIndex的去重逻辑，仅能拿到按id过滤后的唯一部门条目，没有在去重过程中关联统计每个id在原始数组中的出现次数，因此无法直接渲染重复数量。

可选实现方案 #

方案1：用reduce一次性完成去重+计数（推荐） #

该方案一次遍历原始数组就完成聚合，时间复杂度为O(n)，在数据量较大时不会出现性能损耗：

// 聚合得到带重复计数的去重部门数组
const deptListWithCount = data.reduce((result, current) => {
  const matchedDept = result.find(item => item.id === current.id)
  if (!matchedDept) {
    // 首次遇到该部门id，初始化条目计数为1
    result.push({
      id: current.id,
      name: current.name,
      repeatCount: 1
    })
  } else {
    // 同id条目已存在，累计计数+1
    matchedDept.repeatCount += 1
  }
  return result
}, [])

聚合完成后直接在组件中渲染即可，无需额外计算：

function App() {
  return (
    <div>
      {deptListWithCount.map((dept) => (
        <p key={dept.id}>
          {dept.name}
          <em>（共{dept.repeatCount}条原始记录）</em>
        </p>
      ))}
    </div>
  )
}

方案2：保留原有去重逻辑，渲染时实时计算重复数 #

如果不想改动原有得到的unique数组结构，可以在遍历渲染每个条目时，实时从原始数组中匹配同id的条目长度，快速实现需求。该方法适合小数据量场景，数据量大时会因为多次全量遍历出现渲染性能问题：

function App() {
  return (
    <div>
      {unique.map((dept) => {
        // 计算当前部门在原始数组中的总条目数
        const totalCount = data.filter(item => item.id === dept.id).length
        return (
          <p key={dept.id}>
            {dept.name}
            <em>（共{totalCount}条原始记录）</em>
          </p>
        )
      })}
    </div>
  )
}

自定义调整说明 #

如果需求中的“重复数量”是指除了最终留存的唯一部门条目之外的冗余条目数，只需要把计算得到的总数减1即可，对应展示的计数会从原来的总数调整为重复的冗余条目数（例如Sales部门原来的3条总数会显示为2条重复）。

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