理解 Array.reduce()-js教程-PHP中文网

理解 Array.reduce()

WBOY

发布： 2024-08-22 19:09:03

原创

887 人浏览过

Understanding 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 }

登录后复制

重要这里要注意的是初始值是一个空对象。当我们浏览商店中的商品时，我们会用计数填充该商品。