学习REACT过程中哪些场景需要将数组转换为对象

• 按唯一标识快速查找数据
  这是开发中最高频的使用场景，后端接口返回的列表类数据通常是数组结构，比如用户列表、商品列表，每一条数据都带有id这类唯一标识。如果需要频繁根据唯一值查找对应条目，数组查找的时间复杂度是O(n)，转成以唯一标识为键、条目本身为值的对象后，查找时间复杂度降到O(1)，性能提升非常明显。示例写法：

  const userMap = userList.reduce((acc, cur) => ({...acc, [cur.id]: cur}), {})
  // 后续查找直接取值即可
  const targetUser = userMap[selectedId]
  

  在React中做列表项状态更新、详情回显等操作时，用这种结构可以避免每次都遍历整个数组。
• 按指定字段快速去重
  处理有重复值的数组时，数组转对象可以实现按指定字段去重：将需要去重的字段作为对象的键，重复的键会自动覆盖旧值，之后再提取对象的value就可以得到去重后的数组。这种方式比双重循环、Set去重更适合按业务字段去重的场景，比如处理接口返回的重复数据、用户上传的重复条目。
• 枚举值/字典映射
  React项目中做状态展示、下拉选项渲染时非常常用。比如后端返回的状态枚举数组为[{value: 1, label: '待付款'}, {value: 2, label: '已完成'}]，转成以value为键的对象后，后端返回的状态码可以直接映射为前端要显示的文本，不需要每次渲染都遍历枚举数组匹配。
• 优化列表状态更新性能
  在用React useState、Redux等状态管理工具存储列表数据时，如果需要更新某一条目的状态，用对象存储列表可以更方便的实现不可变更新，不需要遍历整个数组生成新数组，写法更简洁，重渲染性能也更好。示例写法：

  setUserMap(prev => ({
    ...prev,
    [targetId]: {...prev[targetId], name: '修改后的用户名'}
  }))
  

• 数据统计聚合
  做业务数据统计时，比如统计每个分类下的商品数量、每个用户的订单数，可以将分类id、用户id作为对象的键，对应统计值作为值，遍历数组的过程中直接累加对应键的数值即可完成统计，逻辑更清晰。

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