本文介绍如何基于子数组的指定索引（如第 0 位）对二维数组进行高效分组，涵盖现代 Object.groupBy() 方法及兼容性 fallback 实现，并提供可直接运行的示例代码与关键注意事项。
本文介绍如何基于子数组的指定索引（如第 0 位）对二维数组进行高效分组，涵盖现代 `object.groupby()` 方法及兼容性 fallback 实现，并提供可直接运行的示例代码与关键注意事项。
在 JavaScript 开发中，经常需要根据嵌套数组中某个固定位置的值（例如状态字段）对数据进行分类聚合。以如下二维数组为例：
const mixedArray = [ ["online", "abc", "def"], ["offline", "ghi", "jkl"], ["online", "mno", "pqr"], ["offline", "stu", "vwx"] ];
目标是将其按首项（索引 0）的值——即 "online" 或 "offline"——拆分为两个独立数组：
const array1 = [["online","abc","def"],["online","mno","pqr"]]; const array2 = [["offline","ghi","jkl"],["offline","stu","vwx"]];
✅ 推荐方案：使用 Object.groupBy()（现代浏览器 & Node.js ≥20.1）
ECMAScript 提案已正式标准化 Object.groupBy()，它专为这类分组场景设计，语法简洁、语义清晰：
const { online, offline } = Object.groupBy(mixedArray, ([status]) => status);
console.log(online); // [["online","abc","def"],["online","mno","pqr"]]
console.log(offline); // [["offline","ghi","jkl"],["offline","stu","vwx"]]? 技术说明：
([status]) => status是数组解构参数，等价于item => item[0]，直接提取每项的第 0 个元素作为分组键。立即学习“Java免费学习笔记（深入）”；
✅ 优势：原生、高性能、无需第三方依赖；
⚠️ 注意：需检查运行环境支持情况（CanIUse）。若需兼容旧版浏览器或 Node.js core-js）或采用手动实现。
? 兼容性方案：手写 groupBy 工具函数
以下是一个轻量、符合规范语义的 polyfill 级实现，完全兼容所有 ES6+ 环境：
function groupBy(array, keyFn) {
const result = Object.create(null);
let index = 0;
for (const item of array) {
const key = keyFn(item, index++);
if (result[key] === undefined) {
result[key] = [];
}
result[key].push(item);
}
return result;
}
// 使用示例
const { online, offline } = groupBy(mixedArray, ([status]) => status);该函数支持：
- 任意深度嵌套数组（只要
keyFn能正确提取键）； - 自定义索引访问（如按第 2 项分组：
([_, _, type]) => type）； - 健壮的
undefined/null键处理（Object.create(null)避免原型污染）。
? 进阶技巧与注意事项
-
动态索引提取：若需按不同位置分组，可封装为高阶函数：
const byIndex = (i) => (arr) => arr[i]; const { online, offline } = groupBy(mixedArray, byIndex(0)); // 按第0项 const { abc, ghi } = groupBy(mixedArray, byIndex(1)); // 按第1项 -
键名安全处理：若分组键可能为
undefined、对象或 Symbol，建议预处理为字符串：([val]) => String(val ?? 'unknown')
-
避免副作用：
groupBy返回新对象，不修改原数组；若需返回数组而非对象，可用Object.entries()转换：const groupedEntries = Object.entries(Object.groupBy(mixedArray, ([s]) => s)); // → [["online", [...]], ["offline", [...]]]
掌握这两种方式，你既能享受现代 JS 的简洁表达力，也能确保项目在各类环境中稳定运行。分组逻辑从此不再依赖 filter() 多次遍历，性能与可读性兼得。
