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