当前位置：首页 > 文章列表 > 文章 > 前端 > 理解 Arrayreduce()

理解 Arrayreduce()

来源：dev.to 2024-08-22 22:36:51 0浏览收藏

本篇文章给大家分享《理解 Arrayreduce()》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

理解 Arrayreduce()

介绍

在学习 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 }

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