JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中,我們經(jīng)常需要對(duì)數(shù)組中對(duì)象的屬性進(jìn)行統(tǒng)計(jì)。例如,我們可能有一個(gè)包含產(chǎn)品名稱和數(shù)量的數(shù)組,我們需要統(tǒng)計(jì)每個(gè)產(chǎn)品名稱出現(xiàn)的次數(shù),并將其數(shù)量相加。在本文中,我們將介紹如何使用JavaScript來實(shí)現(xiàn)這一功能。
實(shí)現(xiàn)方法
我們可以使用reduce()
方法和一個(gè)對(duì)象來統(tǒng)計(jì)數(shù)組中相同關(guān)鍵詞的數(shù)量。reduce()
方法是JavaScript中的一個(gè)高階函數(shù),它接收一個(gè)回調(diào)函數(shù)作為參數(shù),并迭代數(shù)組中的每個(gè)元素?;卣{(diào)函數(shù)上一次的返回值將成為下一次調(diào)用時(shí)的第一個(gè)參數(shù)。
const products = [ { name: 'Apple', num: 2 }, { name: 'Orange', num: 1 }, { name: 'Banana', num: 3 }, { name: 'Apple', num: 4 } ] const result = products.reduce((acc, cur) => { if (acc[cur.name]) { acc[cur.name] += cur.num } else { acc[cur.name] = cur.num } return acc }, {})
在上面的代碼中,我們定義了一個(gè)products
數(shù)組,它包含了四個(gè)產(chǎn)品的名稱和數(shù)量。然后,我們使用reduce()
方法將products
數(shù)組轉(zhuǎn)換為一個(gè)對(duì)象。在回調(diào)函數(shù)中,我們檢查當(dāng)前元素的名稱是否已經(jīng)存在于對(duì)象中,如果是,則將數(shù)量相加,否則將當(dāng)前元素添加到對(duì)象中。
使用方法
將上面的代碼放入一個(gè)函數(shù)中,將products
數(shù)組作為參數(shù)傳遞給它,然后調(diào)用這個(gè)函數(shù)即可得到統(tǒng)計(jì)結(jié)果。
function countKeywords(products) { const result = products.reduce((acc, cur) => { if (acc[cur.name]) { acc[cur.name] += cur.num } else { acc[cur.name] = cur.num } return acc }, {}) return Object.entries(result).map(([name, num]) => ({ name, num })) }
在上面的代碼中,我們定義了一個(gè)名為countKeywords()
的函數(shù),并將products
數(shù)組作為參數(shù)傳遞給它。函數(shù)返回一個(gè)新的數(shù)組,其中包含每個(gè)產(chǎn)品名稱以及相應(yīng)的數(shù)量。
測(cè)試方法
我們可以使用以下代碼來測(cè)試countKeywords()
函數(shù):
const products = [ { name: 'Apple', num: 2 }, { name: 'Orange', num: 1 }, { name: 'Banana', num: 3 }, { name: 'Apple', num: 4 } ] console.log(countKeywords(products))
在上面的代碼中,我們定義了一個(gè)products
數(shù)組,并將其作為參數(shù)傳遞給countKeywords()
函數(shù)。然后,我們將結(jié)果打印到控制臺(tái)中。
結(jié)論
在JavaScript中,我們可以使用reduce()
方法和一個(gè)對(duì)象來統(tǒng)計(jì)數(shù)組中相同關(guān)鍵詞的數(shù)量。使用reduce()
方法可以簡(jiǎn)化代碼,而使用對(duì)象可以提高效率。通過封裝這些代碼并編寫一些測(cè)試用例,我們可以輕松地在JavaScript中實(shí)現(xiàn)這一功能。
以上就是JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于JavaScript統(tǒng)計(jì)數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
深入理解JavaScript系列(12) 變量對(duì)象(Variable Object)
JavaScript編程的時(shí)候總避免不了聲明函數(shù)和變量,以成功構(gòu)建我們的系統(tǒng),但是解釋器是如何并且在什么地方去查找這些函數(shù)和變量呢2012-01-01純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
用瀑布流來展現(xiàn)照片再好不過了,我的思路大概是一張一張的圖片插入,當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán),即這一行插入進(jìn)去了2013-04-04JS實(shí)現(xiàn)超簡(jiǎn)單的漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)超簡(jiǎn)單的漢字轉(zhuǎn)拼音功能,結(jié)合實(shí)例形式分析了javascript漢字轉(zhuǎn)換成拼音的函數(shù)定義與使用技巧,需要的朋友可以參考下2016-12-12js getBoundingClientRect() 來獲取頁(yè)面元素的位置
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁(yè)面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁(yè)面中的絕對(duì)位置。2010-11-11基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器
這篇文章主要介紹了基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器,并通過實(shí)例代碼介紹了基于element-ui el-slider實(shí)現(xiàn)滑動(dòng)限位器的方法,需要的朋友可以參考下2024-02-02JavaScript實(shí)現(xiàn)H5接金幣功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)H5接金幣功能,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02ExtJS實(shí)現(xiàn)文件下載的方法實(shí)例
這篇文章介紹了ExtJS實(shí)現(xiàn)文件下載的方法實(shí)例,有需要的朋友可以參考一下2013-11-11輕松實(shí)現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼
輕松實(shí)現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼...2007-09-09