React环境下如何实现数组去重并为元素添加count统计属性

核心思路是使用Map结构做临时缓存，只需遍历1次原数组即可完成处理，无需提前硬编码所有可能的id，时间复杂度为O(n)，适合各类数据量的场景。

代码实现 #

// 原数组（已修正为标准JS对象格式，原示例中的=为输入笔误）
const originArr = [
  {id: 1, product: "Book"},
  {id: 1, product: "Book"},
  {id: 1, product: "Book"},
  {id: 2, product: "Chair"}
];

const processArr = (arr) => {
  const tempMap = new Map();
  arr.forEach(item => {
    if (tempMap.has(item.id)) {
      // id已存在，count加1
      tempMap.get(item.id).count += 1;
    } else {
      // id不存在，新增带count的对象存入Map
      tempMap.set(item.id, {...item, count: 1});
    }
  })
  // 将Map的value转为数组返回
  return Array.from(tempMap.values());
}

// 调用方法得到结果
const result = processArr(originArr);
console.log(result);
// 输出：[{id: 1, product: "Book", count: 3}, {id: 2, product: "Chair", count: 1}]

方案说明 #

• 完全不需要提前枚举所有可能的id值，会自动根据原数组中出现的id做统计
• 使用展开运算符...item可以完整保留原对象的所有属性，不需要手动拼接每个字段，后续如果对象新增其他属性也无需修改逻辑
• 如果你的场景要求判断重复的依据不是id，只需要修改tempMap.has()的判断key即可，扩展性更高
• 该方法可以直接在React组件的任意数据处理环节调用，比如接口请求成功后处理返回值、渲染列表前预处理数据等。

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