为什么对对象执行map操作时仅能获取到最后一个条目？

• 核心错误是Array.map()的回调函数没有返回值：你给this.assigned_group_delta赋值时的map回调仅执行了this.x = a的赋值操作，没有显式return任何内容，因此map最终返回的是全为undefined的数组。同时this.x会在循环的每一轮被新的项覆盖，循环结束后自然仅保留最后一次赋值的对象，也就是你看到的最后一项。
• ngFor仅展示最后一项的直接原因是this.assigned_group_delta本身是全undefined的无效数组，如果你后续直接绑定this.x渲染，自然也只能看到最后一项。

1. 修正赋值逻辑，不需要额外套一层无意义的map，直接把统计好的result赋值给this.assigned_group_delta即可，如果需要单独拿最后一项，可直接从数组末尾取值：

const obj = this.assigned_group;
// 原统计逻辑无需修改
const result = Object.values(
  obj.reduce((c, v) => {
    c[v] = c[v] || [v, 0];
    c[v][1]++;
    return c;
  }, {})
).map((o) => ({ [o[0]]: o[1] }));

// 修正赋值逻辑
this.assigned_group_delta = result;
// 如需单独取最后一项可单独赋值
this.x = this.assigned_group_delta.at(-1);
console.log(this.x);

2. 如果你需要在Angular的ngFor中渲染这个对象数组，由于每一项都是仅含单个键值对的对象，需要按如下方式编写模板，注意要先在组件类中暴露Object供模板调用：

// 组件类中新增一行，暴露Object方法
public Object = Object;

<!-- 模板中遍历渲染 -->
<div *ngFor="let item of assigned_group_delta">
  分类：{{Object.keys(item)[0]}}，数量：{{Object.values(item)[0]}}
</div>

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