JavaScript數組中相同的元素進行分組(數據聚合)groupBy函數詳解
前言
今天在打算從js端時序數據庫TSDB中，按相同的類型的數據排在一起，并且取同一時間段最新的數據，經過查詢這種思想叫做數據聚合，就是返回的數據要根據一個屬性來做計算。
一、數據聚合
1.groupBy()函數
聚合用groupBy這個函數，它傳兩個形參一為對象數組，二為匿名函數（該函數功能：返回對象的某個指定屬性的屬性值并存放在數組中）
groupBy: function(array, func){
var groups = {};
array.forEach(function(element){
var group = JSON.stringify(func(element));
groups[group] = groups[group] || []; //第一次執(zhí)行為空數組
//groups[group] = [] //這樣寫就會覆蓋之前的數據，視情況而用
groups[group].push([element,group]);//這里可以單獨傳element，本人是需要用到group才需要進行push
});
return Object.keys(groups).map(function(group){
return groups[group];
});
},這里返回的是數組，需要返回key所對應的數組可以
return Object.keys(groups).map(function(group){
return groups[group];
});Object.keys(groups)是取出groups對象中的所有key，然后遍歷一個個key組成的新數組，返回分好了組的二維數組
- .groupBy函數內，先創(chuàng)建一個空對象；
- 然后forEach遍歷對象數組，遍歷時要執(zhí)行的函數中只有一個形參element（數組中的每個元素）；
- 由于下面函數調用是想用name來分組，因此let group = JSON.stringify( func(element) )，相當于先獲取到數組中的想要用來排序的屬性（這里我用返回的new Date(item.timestamp * 1000).getHours()，就是時間戳轉換出的小時）對應的屬性值并放入數組中，然后再將屬性值轉換為json字符串；
- groups[group] = groups[group] || []，在js中對象也是關聯數組，因此這里相當于做了兩件事，一是把group作為groups的key，二是將對應的value初始化，第一次執(zhí)行為空數組，循環(huán)執(zhí)行時找到相同的name時保持不變；
- groups[group] = groups[group] || []，這里也可以寫成groups[group] = []，這樣的話每次push進去的數據就會覆蓋之前的數據，從而達到每次都能獲取同一時間段內的最新數據。
- groups[group].push([element,group])，這句相當于把list中每個對象壓入數組中作為value；
2.sortData()函數
寫好groupBy函數后就可以調用進行排序了：
sortData: function(Data){
var sorted = this.groupBy(Data, function(item){
return new Date(item.timestamp * 1000).getHours(); // 返回需要分組的對象
// return item.name; // 返回需要分組的對象
});
return sorted;
}, 這里的return可以返回數組中參數進行比較，比如item中name屬性。item是groupBy函數func(element)中的element
二、ECS6箭頭函數寫法
上面是ECS5的寫法，到了ECS6之后JS就引入箭頭函數，下面是ECS6含箭頭函數的寫法。
1.sortClass()函數
sortClass(Data){
const groupBy = (array, func) => {
let groups = {};
array.forEach((element)=>{
let group = JSON.stringify(func(element));
groups[group] = groups[group] || [];
groups[group].push(element);
});
return Object.keys(groups).map((group) =>{
return groups[group];
})
};
const sorted = groupBy(Data, (item) =>{
return item.name;
})
return sorted;
}2.運行結果
這就是運行sortClass(res.query)之后得到的結果，這里本人是timestamp時間戳來進行排序，而紅框中的數據就是push[element,group]中的group。
三、按需聚合（結合實際使用）
上面是對數據庫中數據聚合得到是數組每個key對于都是當前最新的值（只有一個），如果這里要求要保留每個key都對于兩個最新的值，則需要對groupBy函數進行改動一下了。
1.groupBy()函數
/**
* author: CSH
* 函數功能：給定參數對數組進行分組并排序
* @param {Object} array [需要排序的數組]
* @param {Object} func [該函數參數用于返回用于分組排序的對象]
*/
groupBy: function(array, func){
var groups = {};
array.forEach(function(element){
var group = JSON.stringify(func(element));
groups[group] = groups[group] || []; //第一次執(zhí)行為空數組
// groups[group] = []; // 這樣就能得到當前小時時間段內最新的數據
groups[group].push([element,group]);
groups[group].length >= 3 ? groups[group].shift() : null; // 只保留當前數組最新兩組數據
});
return Object.keys(groups).map(function(group){
return groups[group];
});
},在js中對數組只保留最新兩項數據需要用到JS中數組里的 shift()方法 （位移元素）了，位移與彈出等同，但處理首個元素而不是最后一個。shift() 方法會刪除首個數組元素，并把所有其他元素“位移”到更低的索引了（類似于隊列一樣）。使用該方法就可以保證數組內的元素都是最新兩項。
2.sortData()函數（無改動）
/**
* author: CSH
* 函數功能：給定數組，并返回需要分組的對象，然后根據該對象進行分組排序返回新的數組
* @param {Object} sortData [需要數據聚合的數組]
*/
sortClass: function(sortData){
var sorted = this.groupBy(sortData, function(item){
return new Date(item.timestamp * 1000).getHours(); // 返回需要分組的對象
// return item.name; // 返回需要分組的對象
});
return sorted;
},對groupBy()函數進行改動之后，在用sortData進行調用返回就能得到想要的數據了。
總結
以上就是今天要講的內容，本文僅僅簡單介紹了JS數據聚合的方法，ECS5和ECS6分別都有不同的寫法。
到此這篇關于JavaScript數組中相同的元素進行分組（數據聚合） groupBy函數的文章就介紹到這了,更多相關js數組分組groupBy函數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在js中有一個運算符可以幫助我們判斷一個值的類型，它就是typeof運算符。下面通過本文給大家分享JavaScript中如何判斷一個值的類型，需要的朋友參考下吧2017-09-09
下面小編就為大家介紹一下基于js中的存儲鍵值對以及注意事項。希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
JS判斷元素為數字的奇異寫法分享，需要的朋友可以參考下2012-08-08
這篇文章主要為大家詳細介紹了ajaxfileupload.js實現上傳文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要介紹了tracking.js實現前端人臉識別功能，本文通過實例代碼截圖的形式給大家展示的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了詳解JS中Array對象擴展與String對象擴展的相關資料,需要的朋友可以參考下2016-01-01
懶加載也叫做延遲加載、按需加載,指的是在長網頁中延遲加載圖片數據,是一種較好的網頁性能優(yōu)化的方式,那么如何實現前端代碼的按需加載（懶加載）呢,本文給大家介紹了三種實現方式,需要的朋友可以參考下2025-06-06
這篇文章主要為大家詳細介紹了js+Html實現表格可編輯操作，能動態(tài)添加刪除行，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
200行代碼實現blockchain 區(qū)塊鏈實例詳解
這篇文章主要介紹了200行代碼實現blockchain 區(qū)塊鏈的相關知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了js 動態(tài)為textbox添加下拉框數據源的方法,需要的朋友可以參考下2014-04-04