JavaScript高階API數(shù)組reduce函數(shù)使用示例
正文
前面我們講了數(shù)組的一些基本方法,今天給大家講一下數(shù)組的reduce(),它是數(shù)組里面非常重要也是比較難的函數(shù),那么這篇文章就好好給大家介紹下reduce函數(shù)。
還是老樣子,我們直接在應(yīng)用中學(xué)習(xí),直接上例子。讓我們先定義一個(gè)包含幾個(gè)對(duì)象的數(shù)組,注意觀察下這個(gè)數(shù)組,可以看到里面有兩個(gè)對(duì)象的age都是30。(下面會(huì)用到)
// 一個(gè)包含幾個(gè)人物對(duì)象的數(shù)組。 const people = [ { name: "John", age: 20 }, { name: "Jane", age: 22 }, { name: "Joe", age: 23 }, { name: "Jack", age: 24 }, { name: "Jackson", age: 30 }, { name: "Jeff", age: 30 }, ]
1.求數(shù)組中所有對(duì)象的年齡和
通過(guò)數(shù)組的reduce方法可以很方便的實(shí)現(xiàn)求和。reduce方法有兩個(gè)參數(shù),第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù),第二個(gè)參數(shù)是初始值。下面就講下這兩個(gè)參數(shù),回調(diào)函數(shù),有四個(gè)參數(shù),函數(shù)體處理自己的邏輯。第二個(gè)參數(shù),它的值決定回調(diào)函數(shù)第一個(gè)參數(shù)的初始值。重點(diǎn)就是這個(gè)初始值。(文末會(huì)詳細(xì)介紹這幾個(gè)參數(shù))
// 注意init 什么類(lèi)型 res就是什么類(lèi)型的 // res的初始值為0 ,求和所以得從0開(kāi)始 const sum = people.reduce((res, cur) => res+cur.age, 0) console.log(`結(jié)果:${sum}`); // 結(jié)果:149 // 如果我們把初始值設(shè)為100 那么結(jié)果應(yīng)該是149+100了 const sum = people.reduce((res, cur) => res+cur.age, 100) console.log(`結(jié)果:${sum}`); // 結(jié)果:249
2.按照年齡分組
(比如上面有兩個(gè)人都是30歲,那么他們應(yīng)該分在一起)
const sum = people.reduce((res, cur) => { // console.log(res,cur); const age = cur.age if (res[age] == null) { // 這里需要使用[]動(dòng)態(tài)獲取age值 , 用.age會(huì)有不一樣的效果 res[age] = [] } // 通過(guò)push插入值 res[age].push(cur.name) return res }, {}) code1.png
3.將數(shù)組對(duì)象轉(zhuǎn)化為對(duì)象
name為key ,age為value
// 寫(xiě)法1 const sum = people.reduce((res, cur) => { const name = cur.name res[name]=cur.age return res }, {}) // 寫(xiě)法2 解構(gòu)返回值 化簡(jiǎn) const sum = people.reduce((res, cur) => ({ ...res, [cur.name] : cur.age }), {}) // 寫(xiě)法3 回調(diào)方法的第二個(gè)參數(shù)也可以解構(gòu) const sum = people.reduce((res, { name, age }) => ({ ...res, [name] : age }), {}) // 結(jié)果都是一樣的 console.log(sum) image.png
4.參數(shù)打印
最后看下各個(gè)參數(shù)打印的結(jié)果,以及不寫(xiě)定義初始值的情況
// 1.定義初始值 const sum = people.reduce((res, cur, index, array) => { console.log('?? ~ file: ~ res', res) console.log('?? ~ file: ~ cur', cur) console.log('?? ~ file: ~ index', index) console.log('?? ~ file: ~ array', array) return res + cur.age }, 0)
可以看到輸出結(jié)果,第一個(gè)參數(shù)res等于初始值0
const sum = people.reduce((res, cur, index, array) => { console.log('?? ~ file: ~ res', res) console.log('?? ~ file: ~ cur', cur) console.log('?? ~ file: ~ index', index) console.log('?? ~ file: ~ array', array) return res + cur.age })
總結(jié)
總結(jié)下回調(diào)函數(shù)中的四個(gè)參數(shù)
- 第一個(gè)參數(shù)
1.第一次迭代:當(dāng)給了初始值時(shí),它的初始值就為該值。然后通過(guò)該值去執(zhí)行相關(guān)邏輯操作,第二次迭代它的值就為上次迭代的結(jié)果。后面依次類(lèi)推。
2.第一次迭代:當(dāng)沒(méi)有給初始值時(shí),它的初始值就是數(shù)組本身的第一個(gè)迭代對(duì)象。
后續(xù)(同上)
建議:最好給一個(gè)初始值,因?yàn)樗鼪Q定你最終需要什么類(lèi)型的結(jié)果(它決定回調(diào)函數(shù)的第一個(gè)參數(shù))。
- 第二個(gè)參數(shù)是當(dāng)前迭代的對(duì)象;
1.當(dāng)沒(méi)有給初始值時(shí),它的初始值就是數(shù)組本身的第一個(gè)迭代對(duì)象;
2.當(dāng)給了初始值時(shí),它的初始值就是數(shù)組本身的第二個(gè)迭代對(duì)象
- 第三個(gè)參數(shù)是第二個(gè)參數(shù)的索引
第四個(gè)參數(shù)是將要迭代的所有對(duì)象的數(shù)組(簡(jiǎn)單說(shuō)就是數(shù)組本身)
對(duì)于reduce()我們只需要弄清楚其參數(shù)與返回值,那么基本就掌握該函數(shù)了。
以上就是JavaScript高階API數(shù)組reduce函數(shù)使用示例的詳細(xì)內(nèi)容,更多關(guān)于JavaScript數(shù)組API reduce的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript中自動(dòng)插入分號(hào)的規(guī)則詳解
JavaScript?提供了?automatic?semicolon?insertion?(ASI)自動(dòng)插入分號(hào)規(guī)則,在不加分號(hào)的情況下,會(huì)自動(dòng)補(bǔ)充分號(hào)來(lái)分隔不同語(yǔ)句,下面我們就來(lái)具體了解一下這一規(guī)則吧2024-01-01無(wú)縫滾動(dòng)改進(jìn)版支持上下左右滾動(dòng)(封裝成函數(shù))
無(wú)縫滾動(dòng)改進(jìn)版,封裝成函數(shù),同時(shí)支持上下左右無(wú)縫滾動(dòng)。2012-12-12Canvas?drawImage方法實(shí)現(xiàn)圖片壓縮詳解
這篇文章主要為大家介紹了Canvas?drawImage方法實(shí)現(xiàn)圖片壓縮詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11echarts學(xué)習(xí)筆記之圖表自適應(yīng)問(wèn)題詳解
最近發(fā)現(xiàn)一個(gè)問(wèn)題,echarts圖初始化后不能自適應(yīng)瀏覽器的縮放,所以下面這篇文章就來(lái)給大家介紹了關(guān)于echarts圖表自適應(yīng)問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11新手入門(mén)js閉包學(xué)習(xí)過(guò)程解析
這篇文章主要介紹了新手入門(mén)js閉包學(xué)習(xí)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JavaScript中數(shù)組Array.sort()排序方法詳解
本篇文章主要介紹了JavaScript中數(shù)組Array.sort()的排序方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03

JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能