位置: IT常识 - 正文

【JS】js数组分组,javascript实现数组的按属性分组(js数组分组并排序)

编辑:rootadmin
【JS】js数组分组,javascript实现数组的按属性分组

推荐整理分享【JS】js数组分组,javascript实现数组的按属性分组(js数组分组并排序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js数组分隔符,js数组分割方法,js 数组切分,js将数组分割为新的数组,js 数组切分,js数组分隔符,js数组分隔符,js数组分组,内容如对您有帮助,希望把文章链接给更多的朋友!

项目代码中有很多时候需要按一定的条件实现按属性分组

1、forEach实现let arr = [ {name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 18}, {name: '赵六', age: 20}, {name: '孙七', age: 21},];let obj = {};arr.forEach(item => { if (!obj[item.age]) { obj[item.age] = []; } obj[item.age].push(item);});console.log(obj);// {// 18: [{name: '张三', age: 18}, {name: '王五', age: 18}],// 20: [{name: '李四', age: 20}, {name: '赵六', age: 20}],// 21: [{name: '孙七', age: 21}],// }2、reduce实现

你可以使用JavaScript的 Array.prototype.reduce() 方法来将数组分组。这是一种高级的方法,它可以将数组元素组合成一个单值。在这种情况下,你可以使用它来把数组元素放到一个对象中,其中对象的键是分组的条件,值是所有满足条件的元素组成的数组。

例如,假设你有一个数组,其中包含了若干个人的信息,你想按照性别来分组:

const people = [{ name: 'Alice', gender: 'female' }, { name: 'Bob', gender: 'male' }, { name: 'Charlie', gender: 'male' }, { name: 'Diana', gender: 'female' },];const groups = people.reduce((groups, person) => { const key = person.gender; if (!groups[key]) { groups[key] = []; } groups[key].push(person); return groups;}, {});console.log(groups);// Output:// {// female: [// { name: 'Alice', gender: 'female' },// { name: 'Diana', gender: 'female' },// ],// male: [// { name: 'Bob', gender: 'male' },// { name: 'Charlie', gender: 'male' },// ],// }

上面的代码使用了 reduce() 方法,它接受一个回调函数和一个初始值。回调函数的参数分别是每次遍历时的累计值(也就是 groups 变量)和当前元素(也就是 person 变量)。每次遍历时,回调函数都会返回一个新的累计值。在这个例子中,累计值是一个对象,它

4、对没有属性名的数组进行分组

要将数组中的元素按照一定的规则分成多组,可以使用 JavaScript 中的 Array.prototype.reduce() 方法。

【JS】js数组分组,javascript实现数组的按属性分组(js数组分组并排序)

例如,假设你有一个数组,要将它按照奇偶性分成两组,可以这样写:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];const groupBy = (arr, fn) => arr.reduce((acc, el) => { const key = fn(el); if (!acc[key]) { acc[key] = []; } acc[key].push(el); return acc; }, {});const groups = groupBy(numbers, (n) => (n % 2 === 0 ? 'even' : 'odd'));console.log(groups);// Output:// {// even: [2, 4, 6, 8],// odd: [1, 3, 5, 7, 9]// }

在上面的代码中,我们定义了一个函数 groupBy,它接受两个参数:要分组的数组和一个函数,该函数根据元素的某个属性或特征返回一个唯一的键。然后,我们使用 reduce() 方法遍历数组中的所有元素,并根据返回的键将它们分组到累加器对象中。

你也可以使用这种方法将数组中的元素按照任何你喜欢的规则分组,只需要更改分组函数即可。

4、对具有属性名的数组进行分组

要对数组进行分组,你可以使用以下方法之一:

1.使用 reduce() 方法:function groupBy(arr, key) { return arr.reduce((acc, curr) => { (acc[curr[key]] = acc[curr[key]] || []).push(curr); return acc; }, {});}

使用方法:

const people = [ { name: 'Alice', age: 21 }, { name: 'Bob', age: 22 }, { name: 'Charlie', age: 23 }, { name: 'Dave', age: 24 }, { name: 'Eve', age: 22 },];const groupedPeople = groupBy(people, 'age');console.log(groupedPeople);// 打印结果:// {// 21: [{ name: 'Alice', age: 21 }],// 22: [{ name: 'Bob', age: 22 },{ name: 'Eve', age: 25 }],// 23: [{ name: 'Charlie', age: 23 }],// 24: [{ name: 'Dave', age: 24 }],// }2.使用 map() 和 reduce() 方法:function groupBy(arr, key) { return arr.map(item => item[key]).reduce((acc, curr, i) => { acc[curr] = acc[curr] || []; acc[curr].push(arr[i]); return acc; }, {});}

使用方法与第一种方法相同。

请注意,这些方法都是基于原始数组进行分组,并创建一个新对象,该对象具有将数组中每个元素分组到相应分组中的属性。 如果要在原始数组上进行分组,则可以使用以下方法之一:

使用 Array.prototype.forEach() 方法:

function groupBy(arr, key) { arr.forEach(item => { item[key] = item[key] || []; item[key].push(item); });}

使用方法:

const people = [ { name: 'Alice', age: 21 }, { name: 'Bob', age: 22 }, { name: 'Charlie', age: 23 }, { name: 'Dave', age: 24 }, { name: 'Eve', age: 22 },];groupBy(people, 'age');console.log(people);// 打印结果:// [// { name: 'Alice', age: 21, ageGroup: [{ name: 'Alice', age: 21 }] },// { name: 'Bob', age: 22, ageGroup: [{ name: 'Bob', age: 22 }] },// { name: 'Charlie', age: 23, ageGroup: [{ name: 'Charlie', age: 23 }] },// { name: 'Dave', age: 24, ageGroup: [{ name: 'Dave', age: 24 }] },// { name: 'Eve', age: 25, ageGroup: [{ name: 'Eve', age: 25 }] }// ]3. 使用 map() 方法:function groupBy(arr, key) { return arr.map(item => { item[key] = item[key] || []; item[key].push(item); return item; });}

使用方法与第一种方法相同。 请注意,这些方法都是基于原始数组进行分组,并将每个元素分组到原始数组中的相应元素中。 如果要创建新数组,请使用第一二种方法。

本文链接地址:https://www.jiuchutong.com/zhishi/298897.html 转载请保留说明!

上一篇:Torch计算方法(torch测定)

下一篇:视觉SLAM总结——SuperPoint / SuperGlue(视觉slam ba)

  • 苹果手机最近删除在哪里找(苹果手机最近删除的照片删了还能恢复吗)

    苹果手机最近删除在哪里找(苹果手机最近删除的照片删了还能恢复吗)

  • 苹果电话声音小怎么办(苹果电话声音小调哪里设置)

    苹果电话声音小怎么办(苹果电话声音小调哪里设置)

  • 什么是黑盒测试(什么是黑盒测试与白盒测试?他们适用于哪些测试?)

    什么是黑盒测试(什么是黑盒测试与白盒测试?他们适用于哪些测试?)

  • 手机使用年限(手机使用年限多久)

    手机使用年限(手机使用年限多久)

  • 华为nova7se有呼吸灯吗(华为nova7什么功能可以直接呼叫)

    华为nova7se有呼吸灯吗(华为nova7什么功能可以直接呼叫)

  • vrchat怎么改模型(vrchat怎么改模型参数)

    vrchat怎么改模型(vrchat怎么改模型参数)

  • 华为nova7怎么没有耳机插孔(华为nova7怎么没有开发人员选项)

    华为nova7怎么没有耳机插孔(华为nova7怎么没有开发人员选项)

  • 手机进水主板坏了能修吗(手机进水主板坏了,里面照片还能有么)

    手机进水主板坏了能修吗(手机进水主板坏了,里面照片还能有么)

  • 钉钉注销后对方知道吗(钉钉注销后对方能看到吗)

    钉钉注销后对方知道吗(钉钉注销后对方能看到吗)

  • ppt2010版本中有几种视图(PPT2010版本中有几种视图)

    ppt2010版本中有几种视图(PPT2010版本中有几种视图)

  • 淘宝退货可以申请几次(淘宝退货可以申请两次吗)

    淘宝退货可以申请几次(淘宝退货可以申请两次吗)

  • 存储器分为哪两种(存储器分为哪两级)

    存储器分为哪两种(存储器分为哪两级)

  • ipad mini2屏幕怎么拆(ipad mini6屏幕)

    ipad mini2屏幕怎么拆(ipad mini6屏幕)

  • 手机可以呼叫转移吗(手机可以呼叫转移到400电话吗)

    手机可以呼叫转移吗(手机可以呼叫转移到400电话吗)

  • 手机显示充电但是充不进去怎么办(手机显示充电但是充的特别慢怎么办)

    手机显示充电但是充不进去怎么办(手机显示充电但是充的特别慢怎么办)

  • 小米cc9pro怎么调节屏幕亮度(小米cc9pro帧数设置)

    小米cc9pro怎么调节屏幕亮度(小米cc9pro帧数设置)

  • 快手直播违规怎么举报(快手直播违规怎么写申诉)

    快手直播违规怎么举报(快手直播违规怎么写申诉)

  • lr如何去紫边(acr去紫边)

    lr如何去紫边(acr去紫边)

  • 荣耀v20怎么关闭后台运行(荣耀v20怎么关闭纯净模式)

    荣耀v20怎么关闭后台运行(荣耀v20怎么关闭纯净模式)

  • 天猫小黑盒到底是干嘛的(天猫小黑盒的好处)

    天猫小黑盒到底是干嘛的(天猫小黑盒的好处)

  • 天猫精灵智能音箱怎么用(天猫精灵智能音响哪个音质好)

    天猫精灵智能音箱怎么用(天猫精灵智能音响哪个音质好)

  •  智能扫一扫连接wifi(智能扫一扫连接wifi)

    智能扫一扫连接wifi(智能扫一扫连接wifi)

  • 手机wps怎么画直线(手机wps画直线)

    手机wps怎么画直线(手机wps画直线)

  • 抖音直播怎么全屏(抖音直播怎么全程回放)

    抖音直播怎么全屏(抖音直播怎么全程回放)

  • 新版爱奇艺影吧在哪(爱奇艺影吧2021)

    新版爱奇艺影吧在哪(爱奇艺影吧2021)

  • 小米充电特效怎么设置(小米充电特效怎么不显示)

    小米充电特效怎么设置(小米充电特效怎么不显示)

  • 行政事业性收据发票记帐
  • 企业给员工交公积金国家有规定的
  • 起重机属于固定资产哪个类别
  • 增值税发票四舍五入
  • 个税系统添加不了新的单位
  • 个人向个人借款100万交税吗
  • 收到股东投资款怎么做账
  • 法人向企业注资有风险吗
  • 无法收回的应收账款情况说明
  • 土地增值税清算扣除项目
  • 固定资产递延所得税负债
  • 银行余额调节表模板
  • 存货的主要内容包括什么
  • 小企业税金及附加会计分录
  • 契税可以银行转让吗
  • 公司认缴增资需要什么流程呢
  • 登记变更是什么意思
  • 住房公积金相关文件
  • windows10如何开启远程
  • 腾讯手游助手使命召唤怎么滑铲
  • 收到投标保证金利息会计分录
  • 高速过路费抵扣进项怎么填报
  • 门店出纳的工作内容
  • Win11截图工具怎么设置快捷键
  • win10系统关机后自动开机怎么办
  • 补缴社保费可以投诉,也可以申请仲裁吗
  • PHP:pcntl_sigwaitinfo()的用法_PCNTL函数
  • 北极野生动物
  • 微信接口开发平台
  • centos 安装php
  • 微信登录接口购买
  • php登录注册整套源码
  • vue 父组件调用子组件效果
  • python 统计学包
  • Github ChatGPT-Web:了解最新AI技术的前沿应用!
  • yii框架教程
  • 补交去年增值税怎么做账
  • 个体工商户建账办法最新
  • 个人完税证明有什么用途
  • 金蝶软件凭证修改怎么做
  • inner join用法示例
  • 工程建设期间发生的差旅费
  • 原始凭证的基本内容有会计分录吗
  • 抵债资产如何做债权转让
  • 付设备款的会计分录
  • 对公账户付个人工资怎么入账
  • 企业计提福利费按多少提
  • 发票怎么打印的出来
  • 生产成本的主要构成要素
  • 其他应收款平行记账科目
  • 一级资本充足率不得低于
  • 生产成本是费用要素吗
  • 分公司需要独立核算和报税吗
  • mysql中间件有哪些
  • 运行软件时遇到的问题
  • 苹果序列号查询
  • xp系统重启后自动还原怎么办
  • linux的ntp服务
  • linux快速清空大日志文件
  • win7如何设置共享
  • windows的批处理是如何实现的
  • win7服务在哪里打开
  • Linux dpkg-query 命令用法详解(Debian Linux中软件包的查询工具)
  • 朝鲜引擎
  • 史上最全的领域学说
  • cocos2dx4.0入门
  • 简述opengl的编程步骤
  • rsa加解密过程是什么
  • html截取字符串
  • vue.js购物车
  • python的删除命令
  • html折叠
  • javascript原生函数的源代码
  • 风力发电,光伏发电还有哪些
  • 税务干部转正工作总结
  • 申报税务登记日期怎么填
  • 新疆电子税务局下载app
  • oecd国家是什么意思
  • 推进落实类似的词语
  • 电子缴款凭证可以用于报销吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设