快捷導(dǎo)航

JS數(shù)組實(shí)現(xiàn)分類(lèi)統(tǒng)計(jì)實(shí)例代碼

更新時(shí)間：2018年09月30日 08:26:36 作者：SwitchCase_

本文通過(guò)實(shí)例代碼給大家介紹了js數(shù)組實(shí)現(xiàn)分類(lèi)統(tǒng)計(jì)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

將水果數(shù)組中同類(lèi)的水果合并為一條并求出總數(shù)

var fruits = 
[{
  name: 'apple',
  value: 1
}, 
{
  name: 'apple',
  value: 2
}, // 總計(jì)3個(gè)蘋(píng)果
{
  name: 'banana',
  value: 2
}, 
{
  name: 'banana',
  value: 3
}]; // 總計(jì)5個(gè)香蕉

var fruitTotal = []; // 存最終數(shù)據(jù)結(jié)果

// 數(shù)據(jù)按照水果名稱(chēng)進(jìn)行歸類(lèi)
var nameContainer = {}; // 針對(duì)鍵name進(jìn)行歸類(lèi)的容器
fruits.forEach(item => {
  nameContainer[item.name] = nameContainer[item.name] || [];
  nameContainer[item.name].push(item);
});

console.log(nameContainer); // 按照水果名稱(chēng)歸類(lèi)完成：{ apple: Array(2), banana: Array(2) }

// 統(tǒng)計(jì)不同種類(lèi)水果的數(shù)量
var fruitName = Object.keys(nameContainer); // 獲取水果種類(lèi)：["apple", "banana"]
fruitName.forEach(nameItem => {
  let count = 0;
  nameContainer[nameItem].forEach(item => {
    count += item.value; // 遍歷每種水果中包含的條目計(jì)算總數(shù)
  });
  fruitTotal.push({'name': nameItem, 'total': count});
});

console.log(fruitTotal);
// 輸出結(jié)果：
// [{ name: "apple", total: 3 },
// { name: "banana", total: 5 }]

總結(jié)

以上所述是小編給大家介紹的JS數(shù)組實(shí)現(xiàn)分類(lèi)統(tǒng)計(jì)實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

淺談webpack對(duì)樣式的處理
這篇文章主要介紹了淺談webpack對(duì)樣式的處理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
JavaScript利用正則表達(dá)式去除日期中的“-”
第一種，將日期字符串先截取，然后拼接；第二種，就是利用正則表達(dá)式去掉“-”本例選擇第二種，比較快捷不容易出錯(cuò)
2014-07-07
JavaScript計(jì)算出現(xiàn)精度丟失問(wèn)題的解決方法
Javascript作為一門(mén)大型編程語(yǔ)言,在日常開(kāi)發(fā)中難免會(huì)涉及到大量的數(shù)學(xué)計(jì)算,然而,浮點(diǎn)數(shù)在計(jì)算過(guò)程中可能出現(xiàn)精度的問(wèn)題,下面我們就來(lái)學(xué)習(xí)一下Javascript中高精度計(jì)算及其相關(guān)知識(shí)吧
2023-11-11
js控制頁(yè)面的全屏展示和退出全屏顯示的方法
這篇文章主要介紹了js控制頁(yè)面的全屏展示和退出全屏顯示的方法,實(shí)例分析了javascript控制頁(yè)面全屏效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來(lái)，以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問(wèn)題
2011-10-10
js獲取html頁(yè)面代碼中圖片地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了js獲取html代碼中圖片地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-03-03
JS定時(shí)器使用,定時(shí)定點(diǎn),固定時(shí)刻,循環(huán)執(zhí)行詳解
下面小編就為大家?guī)?lái)一篇JS定時(shí)器使用,定時(shí)定點(diǎn),固定時(shí)刻,循環(huán)執(zhí)行詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
在JS方法中返回多個(gè)值的方法匯總
本文給大家匯總了在javascript方法中返回多個(gè)值的方法，都是在個(gè)人項(xiàng)目中檢驗(yàn)過(guò)的，這里推薦給大家，有需要的小伙伴可以參考下。
2015-05-05
JavaScript時(shí)間戳與時(shí)間相互轉(zhuǎn)換的常用方法
這篇文章主要介紹了JavaScript時(shí)間戳與時(shí)間相互轉(zhuǎn)換的常用方法,包括獲取當(dāng)前時(shí)間戳、時(shí)間戳轉(zhuǎn)時(shí)間對(duì)象、時(shí)間戳轉(zhuǎn)格式化字符串、時(shí)間字符串轉(zhuǎn)時(shí)間戳等,還討論了常見(jiàn)應(yīng)用場(chǎng)景如計(jì)算時(shí)間差、倒計(jì)時(shí)和UTC與本地時(shí)間互轉(zhuǎn),需要的朋友可以參考下
2025-04-04
有趣的JavaScript隱式類(lèi)型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類(lèi)型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類(lèi)型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05