摘要:最近工作中需要寫一些運營數據報表的頁面,后端返回的數據都是未處理過的,所以,大量的運算任務交給了前端來做,這其中有一個功能就是對數據進行分組,一開始我自己也嘗試寫了一些,但代碼量比較大,顯得很繁瑣,直到后來在上看到了某位大牛寫的方法,非常簡
最近工作中需要寫一些運營數據報表的頁面,后端返回的數據都是未處理過的json,所以,大量的運算任務交給了前端來做,這其中有一個功能就是對數據進行分組,一開始我自己也嘗試寫了一些,但代碼量比較大,顯得很繁瑣,直到后來在stackoverflow上看到了某位大牛寫的方法,非常簡潔優(yōu)雅,代碼如下:
function groupBy( array , f ) { let groups = {}; array.forEach( function( o ) { let group = JSON.stringify( f(o) ); groups[group] = groups[group] || []; groups[group].push( o ); }); return Object.keys(groups).map( function( group ) { return groups[group]; }); } let list = [ {"name": "John","Average":15,"High":10,"DtmStamp":1358226000000}, {"name": "Jane","Average":16,"High":92,"DtmStamp":1358226000000}, {"name": "Jane","Average":17,"High":45,"DtmStamp":1358226000000}, {"name": "John","Average":18,"High":87,"DtmStamp":1358226000000}, {"name": "Jane","Average":15,"High":10,"DtmStamp":1358226060000}, {"name": "John","Average":16,"High":87,"DtmStamp":1358226060000}, {"name": "John","Average":17,"High":45,"DtmStamp":1358226060000}, {"name": "Jane","Average":18,"High":92,"DtmStamp":1358226060000} ]; let sorted = groupBy(list, function(item){ return [item.name]; }); console.log(sorted);
具體實現思路:
函數groupBy有兩個形參,一為對象數組,二為匿名函數(該函數功能:返回對象的某個指定屬性的屬性值并存放在數組中);
groupBy函數內,先創(chuàng)建一個空對象;
然后forEach遍歷對象數組,遍歷時要執(zhí)行的函數中只有一個形參o(數組中的每個元素);
由于下面函數調用是想用name來分組,因此let group = JSON.stringify( f(o) ),相當于先獲取到對象數組list中的name屬性對應的屬性值并放入數組中:["John"],然后再將屬性值轉換為json字符串:"["John"]";
groups[group] = groups[group] || [],在js中對象也是關聯(lián)數組,因此這里相當于做了兩件事,一是把group作為groups的key,二是將對應的value初始化,第一次執(zhí)行為空數組,循環(huán)執(zhí)行時找到相同的name時保持不變;
groups[group].push( o ),這句相當于把list中每個對象壓入數組中作為value;
最后,Object.keys(groups)是取出groups對象中的所有key,然后遍歷一個個key組成的新數組,返回分好了組的二維數組,至此大功告成~~~
結果如下:
[ [ { name: "John", Average: 15, High: 10, DtmStamp: 1358226000000 }, { name: "John", Average: 18, High: 87, DtmStamp: 1358226000000 }, { name: "John", Average: 16, High: 87, DtmStamp: 1358226060000 }, { name: "John", Average: 17, High: 45, DtmStamp: 1358226060000 } ], [ { name: "Jane", Average: 16, High: 92, DtmStamp: 1358226000000 }, { name: "Jane", Average: 17, High: 45, DtmStamp: 1358226000000 }, { name: "Jane", Average: 15, High: 10, DtmStamp: 1358226060000 }, { name: "Jane", Average: 18, High: 92, DtmStamp: 1358226060000 } ] ]
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91855.html
摘要:接收三個參數分別為回調和,其中與是可選參數。官網釋義排序一個列表組成一個組,并且返回各組中的對象的數量的計數。類似,但是不是返回列表的值,而是返回在該組中值的數目。 繼續(xù)前面的內容,前文我們提到了很多方法的講解,其實到這里就已經差不多了,因為大部分代碼其實都是套路,一些基礎函數再靈活變化就可以組成很多實用的功能。 _.sortBy = function(obj, iteratee,...
摘要:實現數組更多的高階函數吾輩的博客原文場景雖說人人平等,但有些人更加平等。若是有一篇適合萌新閱讀的自己實現數組更多操作的文章,情況或許會發(fā)生一些變化。類似于的初始值,但它是一個函數,避免初始值在所有分組中進行累加。 JavaScript 實現數組更多的高階函數 吾輩的博客原文: https://blog.rxliuli.com/p/fc... 場景 雖說人人平等,但有些人更加平等。 為...
摘要:聚合后沒有用函數,會返回一個用函數后會顯示計算結果組合之后,切片,查看的和??梢栽O定計算方法對列進行了切片,如果的均值小于,則不顯示二部的均值低于,所以結果中沒有二部數據。 本節(jié)學習groupby 引用激勵數據,連接數據庫jili表(代碼省略)數字簡單計算本節(jié)內容前面是運用sum/mean等函數對數字簡單計算 jili.mean() #求均值 jili.mean(axis = col...
摘要:否則,直接循環(huán)去拼接該值返回按照指定的方法對數組元素進行分組歸類。使用創(chuàng)建一個對象,對象的鍵是生成的結果,值是符合該鍵的所有數組元素組成的數組。微信公眾號秒,從入門到放棄之三 原文鏈接:JavaScript30秒, 從入門到放棄之Array(三)水平有限,歡迎批評指正 flattenDepth Flattens an array up to the specified depth....
摘要:隨機洗牌算法說實話,以前理解數組的排序,都是將數組按照一定的邏輯由大到小或者由小到大排序,我自己是沒有碰到過隨機打亂數組排序的問題。然后里用的是所謂的洗牌算法,很高效??偨Y又是三個知識點,分別是隨機洗牌分組和函數的實現,沒什么復雜的。 這是第三篇關于 Underscore 的源碼解讀,最近一段時間學的東西很少,自己太忙了,一方面忙著找實習,晚上回去還要寫畢業(yè)論文。畢業(yè)論文真的很憂傷,因...
閱讀 3773·2021-11-23 09:51
閱讀 4386·2021-11-15 11:37
閱讀 3523·2021-09-02 15:21
閱讀 2746·2021-09-01 10:31
閱讀 879·2021-08-31 14:19
閱讀 852·2021-08-11 11:20
閱讀 3308·2021-07-30 15:30
閱讀 1689·2019-08-30 15:54