本文主要是介绍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 ?? 空值合并运算符
这篇关于javascript Array groupBy javascript中如何根据列表元素中的某个字段对列表进行分组操作?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!