Javascript对数据进行分组及根据分组统计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS分组及计数</title>
</head>
<body>
<script>
var data = [
{
date: "5-23",
info: "你吃饭了吗!",
},
{
date: "5-23",
info: "我吃了!你呢?",
},
{
date: "5-23",
info: "我也吃了",
},
{
date: "5-24",
info: "早上好啊",
},
{
date: "5-24",
info: "你也早",
},
]; // 总计5个香蕉
var dataContainer = {}; //存分组的
data.map((item) => {
//对数据进行遍历
//dataContainer['5-23'] (给dataContainer对象添加了一个'5-23'键名) = dataContainer['5-23'] (第一次循环dataContainer['5-23'] 没有值,所以为undefined) || []
dataContainer[item.date] = dataContainer[item.date] || [];
dataContainer[item.date].push(item);
});
console.log(dataContainer);
/*
* {
5-23:[
{
date: "5-23",
info: "你吃饭了吗!",
},
]
5-24:[
{
date: "5-24",
info: "早上好啊",
},
]
}
*/
var total = []; //最后统计结束的数据
var dataName = Object.keys(dataContainer); // 获取分组的键名:["5-23", "5-24"] Object.keys:可以将对象的键名存到一个数组中去
dataName.map((nameItem) => {
//循环键名
let count = 0; //每个分组的count 都会在外层循环清0
dataContainer[nameItem].map((item) => {
count++; // 遍历每个种类,每循环一次,该分组的count 就 +1
});
//内层循环结束后,在外层最后,将你需要的数据,存到一个对象中去即可
total.push({ name: nameItem, total: count });
});
console.log(total);
/*
[
{
"name": "5-23", //种类
"total": 3 //每个种类的数据总条数
},
{
"name": "5-24", //种类
"total": 2 //每个种类的数据总条数
}
]
*/
</script>
</body>
</html>
js基础恶补ing