如何在 JavaScript 中基于索引对双重嵌套数组进行分组-js教程-PHP中文网

如何在 JavaScript 中基于索引对双重嵌套数组进行分组

本文介绍两种主流方法：使用原生 Object.groupBy()（现代浏览器支持）和手动实现分组逻辑，帮助开发者根据子数组指定位置的值（如索引 0）将多维数组高效分类。

本文介绍两种主流方法：使用原生 `object.groupby()`（现代浏览器支持）和手动实现分组逻辑，帮助开发者根据子数组指定位置的值（如索引 0）将多维数组高效分类。

在 JavaScript 开发中，常需对形如 [["online","abc","def"], ["offline","ghi","jkl"], ...] 的双重嵌套数组按首个元素（即索引 0 处的字符串）进行归类。目标是将所有 "online" 开头的子数组归入一组，"offline" 开头的归入另一组。以下是两种推荐方案：

✅ 方案一：使用原生 `Object.groupBy()`（推荐，ES2024+）

Object.groupBy() 是 ECMAScript 2024 正式引入的标准方法，语法简洁、语义清晰，且性能良好。它接收一个数组和一个回调函数（用于提取分组键），返回以键为属性名、对应值为子数组的对象。

const mixedArray = [
  ["online", "abc", "def"],
  ["offline", "ghi", "jkl"],
  ["online", "mno", "pqr"],
  ["offline", "stu", "vwx"]
];

// 按子数组第 0 项（即状态字段）分组
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 使用数组解构，直接获取每个子数组的第一个元素作为分组键；解构参数 [status] 等价于 item[0]，简洁且可读性强。

⚠️ 兼容性注意：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

当前仅支持 Chrome 117+、Edge 117+、Firefox 121+、Safari 17.4+；
如需兼容旧环境，请引入 core-js polyfill 或采用方案二。

✅ 方案二：手写通用 `groupBy()` 函数（全环境兼容）

当目标运行环境不支持 Object.groupBy() 时，可自行封装一个功能等价的工具函数。该实现遵循规范语义，支持任意键提取逻辑，并保持 null 原型以避免原型污染：

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 mixedArray = [
  ["online", "abc", "def"],
  ["offline", "ghi", "jkl"],
  ["online", "mno", "pqr"],
  ["offline", "stu", "vwx"]
];

const { online, offline } = groupBy(mixedArray, ([status]) => status);

console.log(online);   // 同上
console.log(offline);  // 同上

✅ 优势：

完全兼容 IE11 及所有现代浏览器；
支持任意索引（如按 item[2] 分组）、任意计算逻辑（如 item[0].toLowerCase()）；
返回对象结构统一，便于解构或进一步处理（如 Object.values(result) 获取全部分组）。

? 总结与建议

若项目已采用现代构建工具（如 Vite、Webpack + core-js），优先使用 Object.groupBy()，代码更简练、可维护性更高；
若需最大兼容性或轻量级部署，手写 groupBy 是稳定可靠的选择；
避免使用 for...in 遍历分组结果对象（因 Object.create(null) 无原型属性），推荐用 Object.keys() 或解构赋值；
分组键应确保为字符串（或可隐式转为字符串的类型），避免 undefined 或 null 导致意外分组。