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

本文主要是介绍javascript Array groupBy javascript中如何根据列表元素中的某个字段对列表进行分组操作？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 ?? 空值合并运算符

这篇关于javascript Array groupBy javascript中如何根据列表元素中的某个字段对列表进行分组操作？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---