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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现拖动滑块拼图验证功能(html5、canvas)

    JavaScript实现拖动滑块拼图验证功能(html5、canvas)

    这篇文章主要介绍了JavaScript实现拖动滑块拼图验证(html5、canvas),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • JavaScript验证一个url的方法总结

    JavaScript验证一个url的方法总结

    最近遇到几次需要校验URL的,使用这篇文章小编就为大家整理了一下几个JavaScript校验URL的方法,文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下
    2023-12-12
  • 详解JavaScript的另类写法

    详解JavaScript的另类写法

    这篇文章主要介绍了详解JavaScript的另类写法的相关资料,需要的朋友可以参考下
    2016-04-04
  • 学习drag and drop js实现代码经典之作

    学习drag and drop js实现代码经典之作

    今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成, 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格。我觉得很好。
    2009-04-04
  • js open() 与showModalDialog()方法使用介绍

    js open() 与showModalDialog()方法使用介绍

    项目开发中经常要用到js open() 与showModalDialog()方法,下面有个不错的示例,喜欢的朋友可以研究下
    2013-09-09
  • js实现延时加载Flash的方法

    js实现延时加载Flash的方法

    这篇文章主要介绍了js实现延时加载Flash的方法,较为详细的分析了通过元素替换实现JavaScript延时加载flash的相关原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js改变Iframe中Src的方法

    js改变Iframe中Src的方法

    这篇文章主要介绍了js改变Iframe中Src的方法,涉及javascript操作网页元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • java与javascript之间json格式数据互转介绍

    java与javascript之间json格式数据互转介绍

    对象转为字符串:通过JSON.encode方法,这个是json.js里面的方法,引入到当前文件就可以了,下面整理的比较详细一点,感兴趣的朋友不要错过
    2013-10-10
  • js 控制下拉菜单刷新的方法

    js 控制下拉菜单刷新的方法

    js 控制下拉菜单刷新的方法,需要的朋友可以参考一下
    2013-03-03
  • 通过微信公众平台获取公众号文章的方法示例

    通过微信公众平台获取公众号文章的方法示例

    这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论