JavaScript之?dāng)?shù)組高階API—reduce _生活百科

一文搞懂JavaScript數(shù)組中最難的數(shù)組API——reduce()前面我們講了數(shù)組的一些基本方法，今天給大家講一下數(shù)組的reduce(),它是數(shù)組里面非常重要也是比較難的函數(shù)，那么這篇文章就好好給大家介紹下reduce函數(shù) 。還是老樣子，我們直接在應(yīng)用中學(xué)習(xí)，直接上例子。讓我們先定義一個(gè)包含幾個(gè)對象的數(shù)組，注意觀察下這個(gè)數(shù)組，可以看到里面有兩個(gè)對象的age都是30 。(下面會(huì)用到)
// 一個(gè)包含幾個(gè)人物對象的數(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ù)組中所有對象的年齡和通過數(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 什么類型 res就是什么類型的// res的初始值為0，求和所以得從0開始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é)果：2492.按照年齡分組（比如上面有兩個(gè)人都是30歲，那么他們應(yīng)該分在一起）【JavaScript之?dāng)?shù)組高階API—reduce】const sum = people.reduce((res, cur) => {// console.log(res,cur);const age = cur.ageif (res[age] == null) {// 這里需要使用[]動(dòng)態(tài)獲取age值，用.age會(huì)有不一樣的效果res[age] = []}// 通過push插入值res[age].push(cur.name)return res}, {})code1.png3.將數(shù)組對象轉(zhuǎn)化為對象，name為key，age為value// 寫法1const sum = people.reduce((res, cur) => {const name = cur.nameres[name]=cur.agereturn res}, {})// 寫法2 解構(gòu)返回值化簡const sum = people.reduce((res, cur) => ({...res,[cur.name] : cur.age}), {})// 寫法3 回調(diào)方法的第二個(gè)參數(shù)也可以解構(gòu)const sum = people.reduce((res, { name, age }) => ({...res,[name] : age}), {})// 結(jié)果都是一樣的console.log(sum)image.png4.最后看下各個(gè)參數(shù)打印的結(jié)果，以及不寫定義初始值的情況// 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)returnres + 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)returnres + cur.age})

文章插圖
5.總結(jié)下回調(diào)函數(shù)中的四個(gè)參數(shù)第一個(gè)參數(shù)：1.第一次迭代：當(dāng)給了初始值時(shí)，它的初始值就為該值。然后通過該值去執(zhí)行相關(guān)邏輯操作，第二次迭代它的值就為上次迭代的結(jié)果。后面依次類推。2.第一次迭代：當(dāng)沒有給初始值時(shí)，它的初始值就是數(shù)組本身的第一個(gè)迭代對象。后續(xù)（同上）建議：最好給一個(gè)初始值，因?yàn)樗鼪Q定你最終需要什么類型的結(jié)果（它決定回調(diào)函數(shù)的第一個(gè)參數(shù)）。第二個(gè)參數(shù)是當(dāng)前迭代的對象；（1.當(dāng)沒有給初始值時(shí)，它的初始值就是數(shù)組本身的第一個(gè)迭代對象；2.當(dāng)給了初始值時(shí)，它的初始值就是數(shù)組本身的第二個(gè)迭代對象）第三個(gè)參數(shù)是第二個(gè)參數(shù)的索引第四個(gè)參數(shù)是將要迭代的所有對象的數(shù)組(簡單說就是數(shù)組本身)對于reduce()我們只需要弄清楚其參數(shù)與返回值，那么基本就掌握該函數(shù)了。