理解 Array.reduce()

介紹

在學習 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 方法有很多非常酷的應用程序，並且使用起來非常簡潔。您對該方法還有其他用例或有趣的技巧嗎？我很想知道！

以上是理解 Array.reduce()的詳細內容。更多資訊請關注PHP中文網其他相關文章！