JavaScript 中按索引值对双重嵌套数组进行分组的完整指南-js教程-PHP中文网

JavaScript 中按索引值对双重嵌套数组进行分组的完整指南

本文介绍如何基于子数组的指定索引（如第 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 个元素作为分组键。

✅ 优势：原生、高性能、无需第三方依赖；
⚠️ 注意：需检查运行环境支持情况（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);

该函数支持：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

任意深度嵌套数组（只要 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", [...]]]
```