JavaScript Object.groupBy 方法详解与实战

作者:木棉时间:2026-10-31 09:34:53浏览:555

本文介绍 JavaScript 新推出的 Object.groupBy 方法,用于对可迭代对象进行分组。通过城市列表示例,展示如何根据首字母生成分组结果,解析语法结构及回调函数的使用方式。

Object.groupBy 概述

JavaScript 近期引入了 Object.groupBy 方法,用于对可迭代对象中的元素进行分组处理。

语法如下:

语法结构

Object.groupBy(items, callbackFn)

items

需要分组的可迭代对象,例如 Array。

callbackFn

应用于可迭代对象中每个元素的函数。

例如,我们需要根据城市名称的首字母进行分组:

代码示例

const cityList = [
  { id: 1, name: "beijing" },
  { id: 2, name: "shanghai" },
  { id: 3, name: "guangzhou" },
  { id: 4, name: "shenzhen" },
  { id: 5, name: "hangzhou" },
  { id: 6, name: "chengdu" },
  { id: 7, name: "wuhan" },
  { id: 8, name: "xian" },
  { id: 9, name: "chongqing" },
];
const result = Object.groupBy(cityList, (city) => city.name[0]);

返回结果如下:

Object.groupBy 概述

{
    "b": [
        {
            "id": 1,
            "name": "beijing"
        }
    ],
    "s": [
        {
            "id": 2,
            "name": "shanghai"
        },
        {
            "id": 4,
            "name": "shenzhen"
        }
    ],
    "g": [
        {
            "id": 3,
            "name": "guangzhou"
        }
    ],
    "h": [
        {
            "id": 5,
            "name": "hangzhou"
        }
    ],
    "c": [
        {
            "id": 6,
            "name": "chengdu"
        },
        {
            "id": 9,
            "name": "chongqing"
        }
    ],
    "w": [
        {
            "id": 7,
            "name": "wuhan"
        }
    ],
    "x": [
        {
            "id": 8,
            "name": "xian"
        }
    ]
}

本文关于 JavaScript 数组分组 Object.groupBy 的介绍到此结束,更多相关内容请查阅本站往期文章或继续浏览后续内容,感谢大家的支持!

作者最新文章