詳解JavaScript數(shù)組reduce()方法的高級(jí)技巧
reduce()方法可以搞定的東西,for循環(huán),或者forEach方法有時(shí)候也可以搞定,那為啥要用reduce()?這個(gè)問(wèn)題,之前我也想過(guò),要說(shuō)原因還真找不到,唯一能找到的是:通往成功的道路有很多,但是總有一條路是最捷徑的,亦或許reduce()逼格更高…
1、語(yǔ)法
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ù))
- previousValue (上一次調(diào)用回調(diào)返回的值,或者是提供的初始值(initialValue))
- currentValue (數(shù)組中當(dāng)前被處理的元素)
- index (當(dāng)前元素在數(shù)組中的索引)
- array (調(diào)用 reduce 的數(shù)組)
initialValue (作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。)
2、實(shí)例解析 initialValue 參數(shù)
先看第一個(gè)例子:
var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }) console.log(arr, sum); 1 2 1 3 3 2 6 4 3 [1, 2, 3, 4] 10
這里可以看出,上面的例子index是從1開始的,第一次的prev的值是數(shù)組的第一個(gè)值。數(shù)組長(zhǎng)度是4,但是reduce函數(shù)循環(huán)3次。
再看第二個(gè)例子:
var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; },0) //注意這里設(shè)置了初始值 console.log(arr, sum); 0 1 0 1 2 1 3 3 2 6 4 3 [1, 2, 3, 4] 10
這個(gè)例子index是從0開始的,第一次的prev的值是我們?cè)O(shè)置的初始值0,數(shù)組長(zhǎng)度是4,reduce函數(shù)循環(huán)4次。
結(jié)論:如果沒(méi)有提供initialValue,reduce 會(huì)從索引1的地方開始執(zhí)行 callback 方法,跳過(guò)第一個(gè)索引。如果提供initialValue,從索引0開始。
注意:如果這個(gè)數(shù)組為空,運(yùn)用reduce是什么情況?
var arr = []; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }) // 報(bào)錯(cuò),"TypeError: Reduce of empty array with no initial value"
但是要是我們?cè)O(shè)置了初始值就不會(huì)報(bào)錯(cuò),如下:
var arr = []; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; },0) console.log(arr, sum); // [] 0
所以一般來(lái)說(shuō)我們提供初始值通常更安全
3、reduce的簡(jiǎn)單用法
當(dāng)然最簡(jiǎn)單的就是我們常用的數(shù)組求和,求乘積了。
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
4、reduce的高級(jí)用法
(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
到此這篇關(guān)于詳解JavaScript數(shù)組reduce()方法的高級(jí)技巧的文章就介紹到這了,更多相關(guān)JavaScript reduce()方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崙?zhàn)之登錄頁(yè)面制作(5)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之登錄頁(yè)面制作代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Javascript中call,apply,bind方法的詳解與總結(jié)
本文主要Javascript中call,apply,bind方法的進(jìn)行全面分析,并在文章結(jié)尾對(duì)call,apply,bind方法的聯(lián)系和區(qū)別做了總結(jié),具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12js計(jì)算兩個(gè)時(shí)間之間天數(shù)差的實(shí)例代碼
這篇文章主要介紹了js計(jì)算兩個(gè)時(shí)間之間天數(shù)差的實(shí)例代碼,有需要的朋友可以參考一下2013-11-11JavaScript學(xué)習(xí)筆記--常用的互動(dòng)方法
本文對(duì)JavaScript中常用的互動(dòng)方法進(jìn)行實(shí)例分析介紹,圖文并茂,有需要的朋友可以看下2016-12-12網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
本文介紹一種網(wǎng)頁(yè)中實(shí)現(xiàn)右鍵功能的方案–contextMenu,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02