javascript Array groupBy javascript中如何根据列表元素中的某个字段对列表进行分组操作?

文章目录

    • Intro
    • demo
    • 参考

Intro

完整描述:SQL中有 group by xxx 的筛选方式。而在 javascript 中,如何实现以下需求?
根据某个列表元素中的某个条件(可能是多个字段),将列表中的元素分成几组。

目前(2024-06-09) javascript 的 Array 类型还没有对外提供类似于 groupby 的方法。
所以我们只能自己实现了。
你可以自己实现,多用几次for循环,达到分组效果。
也可以参考以下,借助于Array.prototype.reduct API遍历一次就得到分组后的数据。

demo

// 原数据格式 [obj...]
var productDataList = [{ category: "Fruits", price: "$1", stocked: true, name: "Apple" },{ category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },{ category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },{ category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },{ category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
];// 用 Array.prototype.reduct 实现类似于 groupBy 的效果。
var categoryAndObjMapList = productDataList.reduce((result, currValue) => {let currCategory = currValue.category;// 当前分类已经有了,非空数组,则向对应分类下的列表中新增一个元素if (Object.keys(result).includes(currCategory)) {result[currCategory].push(currValue);} else {// 初始化新的分类,并同时设置第一个元素result[currCategory] = [currValue];}console.log({currCategory, result});return result;
}, {});// 转换后的数据格式:{ "分类1": [obj...], "分类2": [obj...] }
console.log(categoryAndObjMapList);
{"Fruits": [{ "category": "Fruits", "price": "$1", "stocked": true, "name": "Apple" },{ "category": "Fruits", "price": "$1", "stocked": true, "name": "Dragonfruit" },{ "category": "Fruits", "price": "$2", "stocked": false, "name": "Passionfruit" }],"Vegetables": [{ "category": "Vegetables", "price": "$2", "stocked": true, "name": "Spinach" },{ "category": "Vegetables", "price": "$4", "stocked": false, "name": "Pumpkin" },{ "category": "Vegetables", "price": "$1", "stocked": true, "name": "Peas" }]
}

其中起到 groupBy 作用的方法实现部分,可以简写为如下:

var categoryAndObjMapList = productDataList.reduce((result, currValue) => {let currCategory = currValue.category;result[currCategory] = (result[currCategory]) ?? [];	// 如果 result[currCategory] 已有值则不变,如为空则设置为空数组。result[currCategory].push(currValue);return result;
}, {});

参考

  • javascript Array.prototype.reduct
  • javascript ?? 空值合并运算符

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/25443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024.6.9 三

类的运算符重载 我们很多时候对变量可以使用加减来操作,很方便实用 所以我们也想对类也进行类似的操作,比如 “” 定义为某两个量相加, " - " 定义为两个对象里某个列表长度相减等等 此时我们就需要用到运算符重载了 我们先来了解类的专有方法: *init : …

《经典图论算法》广度优先搜索

摘要: 1,广度优先搜索介绍 2,广度优先搜索的解题步骤 3,广度优先搜索的代码实现 1,广度优先搜索介绍 广度优先搜索(Breadth-first search,BFS),又称宽度优先搜索,简单的说&#xff0…

赶紧收藏!2024 年最常见 20道分布式、微服务面试题(六)

上一篇地址:赶紧收藏!2024 年最常见 20道分布式、微服务面试题(五)-CSDN博客 十一、如何实现微服务之间的通信?有哪些常见的通信协议? 微服务架构是一种将应用程序作为一组小的服务来开发的方法&#xff…

把系统引导做到U盘,实现插上U盘才能开机

前言 有个小伙伴提出了这样一个问题:能不能把U盘制作成电脑开机的钥匙? 小白稍微思考了一下,便做了这样一个回复:可以。 至于为什么要思考一下,这样会显得我有认真思考他提出的问题。 Windows7或以上系统均支持UEF…

Flutter项目开发模版,开箱即用

前言 当前案例 Flutter SDK版本:3.22.2 每当我们开始一个新项目,都会 引入常用库、封装工具类,配置环境等等,我参考了一些文档,将这些内容整合、简单修改、二次封装,得到了一个开箱即用的Flutter开发模版…

memory动态内存管理学习之unique_ptr

此头文件是动态内存管理库的一部分。std::unique_ptr 是一种智能指针,它通过指针持有并管理另一对象,并在 unique_ptr 离开作用域时释放该对象。在发生下列两者之一时,用关联的删除器释放对象: 管理它的 unique_ptr 对象被销毁。…

YOLOv8 极简分割代码并输出各类别像素占比

文章目录 前言功能概述必要环境一、代码结构1. 参数定义2. 定义检测器类3. 计算各类别像素占比3.1 遍历每个检测到的目标3.2 获取当前目标的掩码和类别3.3 将掩码转换为整数多边形3.4 创建空白掩码图像并填充多边形3.5 计算掩码像素数3.6 计算掩码多边形的质心3.7 计算像素占比…

中证指数绿色金融

一、 绿色金融问题的方向 问题: 什么是绿色金融? 答案: 绿色金融是指支持环境改善、气候变化缓解和资源效率提升的金融活动,包括绿色信贷、绿色债券、绿色基金等。 问题: 绿色金融与ESG投资有何区别? 答案: ESG投资是一种考虑环境&#xff0…

发光二极管十大品牌

日常电路设计中,LED是必用的元器件之一,辅助判定电路异常。 十大发光二极管品牌-LED灯珠生产厂家哪家好-LED发光二极管厂家前十-Maigoo品牌榜

Zabbix6.0自定义监控项

文章目录 一、自定义监控整体流程二、自定义监控案例1、监控TCP 443端口案例2、监控服务器异地登入(带参监控项) 一、自定义监控整体流程 操作端流程备注Agent端1️⃣ linux:通过命令、脚本取出对应的值2️⃣ linux:根据zbx要求按照格式、编写配置文件、…

Sui Generis如何为艺术家弥合Web3的鸿沟

Sui Generis是一家于3月推出的NFT拍卖行,其联合创始人兼CEO Gab9说其愿景是——更好、更大、更强! 表面上看,Sui Generis是备受欢迎的Tombheads NFT拍卖行的重新品牌化,该拍卖行今年早些时候从Fantom区块链迁移出来。但它于3月31…

WooYun-2016-199433 -phpmyadmin-反序列化RCE-getshell

参考资料: Phpmyadmin 脚本/设置.php反序列化漏洞 (WooYun-2016-199433)复现_phpmyadmin scriptssetup.php 反序列化漏洞-CSDN博客 https://blog.csdn.net/haoxue__/article/details/129368455利用pearcmd.php文件包含拿shell(L…

找出链表倒数第k个元素-链表题

LCR 140. 训练计划 II - 力扣(LeetCode) 快慢指针。快指针臂慢指针快cnt个元素到最后; class Solution { public:ListNode* trainingPlan(ListNode* head, int cnt) {struct ListNode* quick head;struct ListNode* slow head;for(int i …

如何学习Golang语言!

第一部分:Go语言概述 起源与设计哲学:Go语言由Robert Griesemer、Rob Pike和Ken Thompson三位Google工程师设计,旨在解决现代编程中的一些常见问题,如编译速度、运行效率和并发编程。主要特点:Go语言的语法简单、编译…

人体部位眼耳手腿分类数据集4376张4类别

数据集类型:图像分类用,不可用于目标检测无标注文件 数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):4376 分类类别数:4 类别名称:["Ears","Eyes&quo…

计算机组成刷题一轮(包过版)

搭配食用 计算机组成原理一轮-CSDN博客 目录 一、计算机系统概述 选择 计算机系统组成 冯诺依曼机 软件和硬件的功能 CPU等概念 计算机系统的工作原理 机器字长 运行速度 求MIPS 编译程序 机器语言程序 平均CPI和CPU执行时间 综合应用 存储程序原理 二…

Python3 笔记:字符串的 replace() 和 expandtabs()

1、replace() 方法把字符串中的 old(旧字符串) 替换成 new(新字符串),如果指定第三个参数max,则替换不超过 max 次。 语法:str.replace(old, new[, max]) 参数: old:将被替换的子字符串。 new…

System Verilog实现流水灯

文章目录 一 System Verilog1.1 Systemverilog简介1.2 与verilog的区别1.2.1 两态数据类型(1,0)1.2.2 枚举类型和用户自定义类型1.2.3 数组与队列1.2.4 字符串1.2.5 结构体和联合体1.2.6 常量1.2.7 过程语句等等 二 流水灯代码三 实验效果总结参考资料 一…

基于睡眠声音评估睡眠质量

随着健康意识的增强,人们越来越关注睡眠质量。确保获得充足的高质量睡眠对于维持身体健康和心理平衡至关重要。专业的睡眠状态测量主要通过多导睡眠图(PSG)进行。然而,PSG会给受试者带来显著的身体负担,并且在没有专业…

十大人工智能企业

​​​​​​链接:​​​​​​人工智能品牌排行-人工智能十大公司-人工智能十大品牌-Maigoo品牌榜