天天看点

Javascript对数据进行分组及根据分组统计

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

继续阅读