Object.groupBy 尚未标准化，截至2024年仍处于TC39 Stage 3提案阶段，所有主流浏览器均不支持，调用会报错；等效方案是用reduce手动实现分组逻辑，或使用Lodash的groupBy。
Object.groupBy 不存在于标准 HTML，也不是 JavaScript 原生静态方法——它目前（截至 2024 年）仍处于 TC39 Stage 3 提案阶段，未被任何浏览器原生支持。
为什么直接调用 Object.groupBy 会报错
你在控制台输入 Object.groupBy 得到 undefined，或调用时抛出 TypeError: Object.groupBy is not a function，这是预期行为。主流浏览器（Chrome、Firefox、Safari）均未实现该 API；TypeScript 类型定义中即使有声明，也仅是前瞻性的类型补全，不等于运行时可用。
- 提案地址：https://github.com/tc39/proposal-array-grouping
- 当前兼容性：MDN 显示为 “No support in any browser”
- 替代方案必须手动实现或依赖 polyfill（但无成熟、广泛采用的 polyfill）
实际可用的等效写法：用 reduce 手动分组
这是最通用、兼容性最好、且语义清晰的做法。核心逻辑是：初始化一个空对象，遍历数组，根据回调返回值作为 key，将当前项 push 进对应数组。
const data = [
{ name: 'Alice', age: 28 },
{ name: 'Bob', age: 35 },
{ name: 'Charlie', age: 28 }
];
const grouped = data.reduce((acc, item) => {
const key = String(item.age); // 确保 key 是字符串（Object key 自动转字符串）
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {});
// 结果：{ '28': [{name:'Alice',age:28}, {name:'Charlie',age:28}], '35': [{name:'Bob',age:35}] }
- 必须用
String()或模板字面量（`${key}`）显式转 key，避免undefined/null导致意外键名 - 不要用
acc[key] ??= []在旧环境（如 IE 或某些 Node.js 版本）中可能报错，??=是 ES2021 特性 - 如果回调返回对象或函数，不能直接作 key——会被转成
"[object Object]"或"function(){}"，需提前序列化或提取唯一标识
想用类似 Object.groupBy 的语法？试试 Lodash 的 groupBy
如果你项目已引入 Lodash（或可接受轻量依赖），_.groupBy 是稳定、经过大量验证的替代品，行为与提案设计高度一致。
import { groupBy } from 'lodash-es';
const grouped = groupBy(data, item => item.age);
// 返回结构同上，且自动处理 Symbol、null、undefined 等边界情况
-
_.groupBy接收函数、字符串路径（如'age'）甚至数组，比提案版更灵活 - 不污染全局，tree-shakable（用
lodash-es） - 注意：它返回的是普通对象，不是 Map；若需 Map，需额外包装
未来能直接用 Object.groupBy 吗？别急着迁移到提案 API
即使 Chrome Canary 某天实验性开启该特性，也不建议在生产环境启用。原因很实在：
- 没有降级 fallback：无法优雅检测是否支持，
typeof Object.groupBy === 'function'在绝大多数用户环境中为false - 提案细节仍在微调，比如是否支持
thisArg参数、对undefinedkey 的处理方式 - 打包工具（如 webpack、Vite）不会自动 polyfill 此类 Stage 3 提案，Babel 也暂无官方插件
真正需要时，复制几行 reduce 代码，比赌一个未落地的 API 更可靠。关键点不是名字多像，而是分组逻辑是否健壮、可读、可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
