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