JavaScript数组分组groupBy示例详解

 更新时间:2023年12月19日 11:24:43   作者:远小帅  
JavaScript 最近发布了一个方法 Object.groupBy,可以对可迭代对象中的元素进行分组,这篇文章主要介绍了JavaScript数组分组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]);

返回结果:

{
    "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数组分组groupBy的文章就介绍到这了,更多相关JavaScript数组groupBy内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js让一行页脚保持在底部

    js让一行页脚保持在底部

    所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;
    2008-04-04
  • Textarea与懒惰渲染实现代码

    Textarea与懒惰渲染实现代码

    2008年有啊第一次性能优化时,我们曾用textarea来存贮需要懒惰渲染的节点
    2012-01-01
  • 看看“疫苗查询”小程序有温度的代码

    看看“疫苗查询”小程序有温度的代码

    近日,一篇《疫苗之王》刷爆了朋友圈,疫苗的安全问题被推到了风口浪尖,腾讯安全反诈实验室团队推出了“腾讯安心计划”小程序,方便用户便捷地查询疫苗安全信
    2018-07-07
  • 前端判断节假日的详细代码举例

    前端判断节假日的详细代码举例

    因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?这篇文章主要给大家介绍了关于前端判断节假日的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • javascript折半查找详解

    javascript折半查找详解

    这篇文章主要介绍了javascript折半查找详解的相关资料,需要的朋友可以参考下
    2015-01-01
  • 使用BootStrap实现用户登录界面UI

    使用BootStrap实现用户登录界面UI

    本文给大家介绍使用BootStrap实现用户登录界面UI,布局风格采用左右各一半的风格设计,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-08-08
  • js计算任意值之间随机数的方法

    js计算任意值之间随机数的方法

    这篇文章主要介绍了js计算任意值之间随机数的方法,分析了Math.random函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript数组类型Array相关的属性与方法详解

    JavaScript数组类型Array相关的属性与方法详解

    这篇文章主要给大家介绍了关于JavaScript数组类型Array相关的属性与方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • js学习总结_基于数据类型检测的四种方式(必看)

    js学习总结_基于数据类型检测的四种方式(必看)

    下面小编就为大家带来一篇js学习总结_基于数据类型检测的四种方式(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 10个JavaScript的编程小技巧分享

    10个JavaScript的编程小技巧分享

    这篇文章主要是来和大家分享10个JavaScript中的编程小技巧,文中的示例代码简洁易懂,对我们学习JavaScript开发有一定的帮助,需要的可以参考一下
    2023-05-05

最新评论