介绍

在学习 Javascript 入门课程并学习数组的所有不同方法时。我不太了解reduce方法的真正威力，只有在第二次回顾它之后我才意识到这个方法是多么有用。我希望这篇文章能让一些人更清楚地了解此方法的工作原理以及何时使用它。

方法

Array.prototype.reduce(callbackFunction)
Array.prototype.reduce(callbackFunction, 初始值)

这个方法到底有什么作用呢？

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 方法有很多非常酷的应用程序，并且使用起来非常简洁。您对该方法还有其他用例或有趣的技巧吗？我很想知道！