Object.groupBy 与 Map.groupBy 应该怎么选

选择标准不是“哪个更新”，而是分组键和结果容器。回调返回字符串或 Symbol，并且页面后续会按属性名读取、遍历或转成 JSON，优先用 Object.groupBy；回调需要返回对象、DOM 节点或其他任意值作为身份键，优先用 Map.groupBy。

一、字符串分类名直接选 Object.groupBy

订单状态、地区代码、优先级这类分组名本来就是稳定字符串，Object 结果最贴近组件渲染和接口数据整理。它返回的是空原型对象，不能假设结果自带 hasOwnProperty 等继承方法；读取时使用方括号、Object.hasOwn 或 Object.entries。

const orders = [
  { id: 1, status: "pending" },
  { id: 2, status: "done" },
  { id: 3, status: "pending" },
];

// 状态值天然适合作为对象属性名
const groups = Object.groupBy(orders, (order) => order.status);

// 空原型对象用 Object.hasOwn 判断自有分组
if (Object.hasOwn(groups, "pending")) {
  console.log(groups.pending);
}

回调返回数字、布尔值或普通对象时，Object 方案会把它转换成属性键。例如数字 1 与字符串 "1" 会落到同一个属性，这时就要警惕意外合并。

二、对象身份是分组依据时选 Map.groupBy

如果每个任务所属分组由一个配置对象代表，字符串化会丢失身份信息。Map 可以直接把同一个对象实例作为键；即使对象属性随后变化，原引用仍可用于取回对应数组。

const urgent = { label: "紧急", color: "red" };
const normal = { label: "普通", color: "blue" };
const tasks = [
  { title: "修复支付回调", lane: urgent },
  { title: "整理文档", lane: normal },
  { title: "恢复库存同步", lane: urgent },
];

// 返回配置对象本身，让 Map 保留对象身份
const groups = Map.groupBy(tasks, (task) => task.lane);

// 必须使用原来的 urgent 引用读取该组
const urgentTasks = groups.get(urgent) ?? [];

另建一个内容相同的 { label: "紧急", color: "red" } 不能取到这组数据，因为 Map 比较的是对象身份，不是属性内容。这正是它能避免对象键被统一转成 "[object Object]" 的原因。

三、结果怎么消费，往往比怎么分组更重要

JSON.stringify 可以直接处理 Object 分组；Map 通常要先转换为可序列化结构，但对象键未必能无损变成属性名。还要记住，两种结果中的元素都与原数组共享引用：修改某个元素的内部属性，会同时反映在原数组和分组结果中。

四、兼容旧环境时保留清晰降级

MDN 将两种静态方法标记为自 2024 年 3 月起跨主流浏览器广泛可用，但嵌入式 WebView、旧浏览器和固定版本运行时仍应查兼容表。项目需要覆盖旧环境时，可以使用受维护的 polyfill，或保留一段语义明确的 reduce 实现；不要再依赖早期实验性的 Array.prototype.group 名称。

相关问题

Object.groupBy 返回普通对象吗？

不是。它返回空原型对象，因此不继承 Object.prototype 上的方法，但仍可使用 Object.keys、Object.entries 和 Object.hasOwn。

分组后修改元素会影响原数组吗？

会影响元素对象的内部属性，因为两边保存的是同一批元素引用；但给分组数组增删元素，不会自动改变原数组的长度和排列。