天天看點

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

繼續閱讀