JS數(shù)組reduce()方法原理及使用技巧解析
1、語法
arr.reduce(callback,[initialValue])
reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素,接受四個(gè)參數(shù):初始值(或者上一次回調(diào)函數(shù)的返回值),當(dāng)前元素值,當(dāng)前索引,調(diào)用 reduce 的數(shù)組。
callback (執(zhí)行數(shù)組中每個(gè)值的函數(shù),包含四個(gè)參數(shù))
1、previousValue (上一次調(diào)用回調(diào)返回的值,或者是提供的初始值(initialValue))
2、currentValue (數(shù)組中當(dāng)前被處理的元素)
3、index (當(dāng)前元素在數(shù)組中的索引)
4、array (調(diào)用 reduce 的數(shù)組)
initialValue (作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。)如果沒有提供initialValue,reduce 會(huì)從索引1的地方開始執(zhí)行 callback 方法,跳過第一個(gè)索引。如果提供initialValue,從索引0開始。
2、reduce的簡(jiǎn)單用法
var arr = [1, 2, 3, 4]; var sum = arr.reduce((x,y)=>x+y) var mul = arr.reduce((x,y)=>x*y) console.log( sum ); //求和,10 console.log( mul ); //求乘積,24
1) 計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; let nameNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
2)數(shù)組去重
let arr = [1,2,3,4,4,1] let newArr = arr.reduce((pre,cur)=>{ if(!pre.includes(cur)){ return pre.concat(cur) }else{ return pre } },[]) console.log(newArr);// [1, 2, 3, 4]
3)將二維數(shù)組轉(zhuǎn)化為一維
let arr = [[0, 1], [2, 3], [4, 5]] let newArr = arr.reduce((pre,cur)=>{ return pre.concat(cur) },[]) console.log(newArr); // [0, 1, 2, 3, 4, 5]
4)將多維數(shù)組轉(zhuǎn)化為一維
let arr = [[0, 1], [2, 3], [4,[5,6,7]]] const newArr = function(arr){ return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) } console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
5)對(duì)象里的屬性求和
var result = [ { subject: 'math', score: 10 }, { subject: 'chinese', score: 20 }, { subject: 'english', score: 30 } ]; var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, 0); console.log(sum) //60
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解
下面小編就為大家?guī)硪黄猍js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JS實(shí)現(xiàn)運(yùn)動(dòng)緩沖效果的封裝函數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)運(yùn)動(dòng)緩沖效果的封裝函數(shù),涉及JavaScript時(shí)間函數(shù)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-02-02js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
現(xiàn)在大多數(shù)網(wǎng)站都會(huì)添加這種功能:當(dāng)滾動(dòng)條滾動(dòng)到頁面的下方時(shí),頁面的右下角會(huì)顯示出來一個(gè)“回到頂部”的按鈕或連接;那么,如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實(shí)現(xiàn)方法,感興趣的你可不要走開哦2013-01-01HTML+JS模擬實(shí)現(xiàn)QQ下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+JavaScript模擬實(shí)現(xiàn)QQ中的下拉菜單效果。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-05-05JavaScript 轉(zhuǎn)義字符JSON parse錯(cuò)誤研究
這篇文章主要為大家介紹了JavaScript 轉(zhuǎn)義字符JSON parse錯(cuò)誤研究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置
這篇文章主要給大家介紹了關(guān)于wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置的相關(guān)資料,wangEditor是一款基于原生JavaScript封裝,開源免費(fèi)的富文本編輯器,支持常規(guī)的文字排版操作、插入圖片、插入視頻、插入代碼等功能,需要的朋友可以參考下2023-12-12js實(shí)現(xiàn)TAB切換對(duì)應(yīng)不同顏色的代碼
這篇文章主要介紹了js實(shí)現(xiàn)TAB切換對(duì)應(yīng)不同顏色的代碼,涉及javascript頁面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08