介紹
在學(xué)習(xí) javascript 入門課程并學(xué)習(xí)數(shù)組的所有不同方法時(shí)。我不太了解reduce方法的真正威力,只有在第二次回顧它之后我才意識(shí)到這個(gè)方法是多么有用。我希望這篇文章能讓一些人更清楚地了解此方法的工作原理以及何時(shí)使用它。
方法
array.prototype.reduce(callbackfunction)
array.prototype.reduce(callbackfunction,initialvalue)
這個(gè)方法到底有什么作用呢?
reduce() 方法使用回調(diào)函數(shù)處理數(shù)組的每個(gè)元素,將結(jié)果累積為單個(gè)值。如果提供了初始值,則將其用作起點(diǎn);否則,使用第一個(gè)數(shù)組元素,并從第二個(gè)元素開始迭代。
回調(diào)函數(shù)參數(shù)
callbackfunction(累加器、currentvalue、currentindex、數(shù)組){}
累加器
上一次迭代的累積結(jié)果或初始值(如果提供)。
當(dāng)前值
當(dāng)前正在處理的數(shù)組元素的值。
當(dāng)前索引
當(dāng)前元素的索引,如果提供了初始值,則從 0 開始,否則為 1。
大批
正在執(zhí)行reduce()方法的數(shù)組。
初始值
當(dāng)使用沒有初始值的reduce方法時(shí),回調(diào)函數(shù)將獲取數(shù)組的第一個(gè)元素并將其初始化為累加器,然后迭代數(shù)組的其余部分。
使用案例
使用reduce方法最常見的例子是數(shù)組的求和。
const ages = [23, 15, 45, 13, 66, 54, 38]; let sumofages = ages.reduce(function(sumofages, currentage){ sumofages = sumofages + currentage; return sumofages; }); // 254
登錄后復(fù)制
雖然這正是reduce方法的優(yōu)點(diǎn)和擅長之處,但它還有更多的功能。
獲取組的最大年齡
const ages = [23, 15, 45, 13, 66, 54, 38]; let oldestperson = ages.reduce(function(maxage, currentage){ if(currentage>maxage){ maxage = currentage; } return maxage; }); // 66
登錄后復(fù)制
這里我們使用reduce方法來保存我們?cè)跀?shù)組中遇到的最高年齡,并在迭代整個(gè)數(shù)組后返回該值。
刪除數(shù)組中的重復(fù)項(xiàng)
const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear']; let itemcatalogue = store.reduce(function(uniquestoreitems, currentitem){ if(!uniquestoreitems.includes(currentitem)){ uniquestoreitems.push(currentitem); } return uniquestoreitems; }, []); // ['apple', 'pear', 'orange']
登錄后復(fù)制
重要的是這里要注意的是,對(duì)于reduce方法中的初始值,我們提供一個(gè)空數(shù)組[]。這意味著累加器現(xiàn)在是一個(gè)數(shù)組,并且我們的回調(diào)函數(shù)僅推送該數(shù)組中尚未存在的項(xiàng)目。結(jié)果我們刪除了重復(fù)項(xiàng)。
獲取數(shù)組中的項(xiàng)目數(shù)
const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear']; let itemCount = store.reduce(function(count, currentItem){ count[currentItem] = (count[currentItem] || 0) + 1; return count; }, {}); // { apple: 3, pear: 2, orange: 1 }
登錄后復(fù)制
重要這里需要注意的是,初始值是一個(gè)空對(duì)象。當(dāng)我們?yōu)g覽商店中的商品時(shí),我們會(huì)用計(jì)數(shù)填充該商品。
結(jié)論
首先,如果您已經(jīng)讀到這里,感謝您的閱讀!我寫這篇文章的主要目的是為了鞏固我對(duì)reduce方法的理解,我希望你也能在這里學(xué)到一些新東西! reduce 方法有很多非常酷的應(yīng)用程序,并且使用起來非常簡潔。您對(duì)該方法還有其他用例或有趣的技巧嗎?我很想知道!