如何将JavaScript中reduce分组结果转为Map<number, Array<ImputacionData>>

嘿，Jose！我看到你已经用reduce把ImputacionData数组按empleadoId分组好了，现在想转成Map<number, Array<ImputacionData>>对吧？这有两种简单的方法可以实现：

方法一：从现有分组对象转换为Map #

你已经通过reduce得到了一个以empleadoId为键的对象，只需要把这个对象的键值对转换为Map的格式即可。注意对象的键默认是字符串类型，所以需要把它转成数字：

// 基于你已有的imputacionesAndAusencias对象
const imputacionesMap = new Map<number, Array<ImputacionData>>(
  Object.entries(this.imputacionesAndAusencias).map(([key, value]) => [parseInt(key, 10), value])
);

解释： #

• Object.entries()会把你的分组对象转换成[键字符串, 值数组]的二维数组
• 我们用map()把每个键字符串转成数字类型，最后传入Map的构造函数，就得到了你想要的类型

方法二：直接用reduce构建Map（更高效） #

如果不想先创建中间对象，也可以在reduce的时候直接生成Map，一步到位：

this.imputacionesAndAusencias = this.imputacionesDatas.reduce((map, item) => {
  const empleadoId = item.empleadoId;
  // 如果Map里还没有这个empleadoId的键，就初始化一个空数组
  if (!map.has(empleadoId)) {
    map.set(empleadoId, []);
  }
  // 把当前item添加到对应的数组里
  map.get(empleadoId)!.push(item);
  return map;
}, new Map<number, Array<ImputacionData>>());

解释： #

• 初始值直接传一个空的Map<number, Array<ImputacionData>>
• 每次迭代检查Map中是否存在当前empleadoId，不存在就创建新条目，存在就直接追加数据
• 这种方式不需要额外的转换步骤，性能更优

在页面中渲染Map数据（以Angular为例） #

如果是在Angular模板里渲染，可以用keyvalue管道把Map转换成可遍历的键值对数组：

<div *ngFor="let entry of imputacionesAndAusencias | keyvalue">
  <h4>Empleado ID: {{ entry.key }}</h4>
  <div *ngFor="let imputacion of entry.value">
    <!-- 渲染每个ImputacionData的属性，比如： -->
    <p>Fecha: {{ imputacion.fecha }} | Horas: {{ imputacion.horas }}</p>
  </div>
</div>

这样就能轻松遍历每个员工的所有ImputacionData数据啦！

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