JavaScript中6 个reduce()实例

简介: reduce 方法在数组的每个元素上执行提供的回调函数迭代器。它传入前一个元素计算的返回值,结果是单个值,它是在数组的所有元素上运行迭代器的结果。

reduce 方法在数组的每个元素上执行提供的回调函数迭代器。它传入前一个元素计算的返回值,结果是单个值,它是在数组的所有元素上运行迭代器的结果。

迭代器函数逐个遍历数组的元素,在每一步中,迭代器函数将当前数组值添加到上一步的结果中,直到没有更多元素要添加。

语法

参数包含回调函数和可选的初始值,如下:

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

回调函数

回调函数接受一下四个参数:

  • accumulator:前一个回调函数产生的前一个值,即累计器
  • currentValue:数组遍历的当前元素,即当前值
  • currentIndex:当前索引
  • sourceArray:原数组

初始值

初始值参数是可选的,它是第一次调用回调时将前一个值初始化为的值。如果未指定初始值,则将前一个值初始化为初始值,将当前值初始化为数组中的第二个值。

reduce() 方法是一种有价值的方法,在某些情况下,它可能会节省时间或减少编码的行数。在本文中,将展示 JavaScript 中 reduce() 方法的六个实例。

关于日常项目中可能会遇到的代码片段,可以参阅专栏《碎片时间学习Javascript代码》,里面包含更多的代码实例。

1. 数组求和

const sum = (array) =>
    array.reduce((accumulator, currentValue) => {
        return accumulator + currentValue;
    }, 0);
console.log(sum([1, 2, 3, 45])); // 51

2. 数组展平

使用 reduce(),可以很容易将多维数组转换为一维集合。

const flatten = (array) =>
    array.reduce((accumulator, currentValue) => {
        return accumulator.concat(currentValue);
    });
console.log(
    flatten([
        [2, 3, 5],
        [1, 2, 4],
        [8, 5, 5],
    ])
);

3. 创建Pipeline

此外,可以减少函数以及数字和字符串,假设有一系列数学函数。例如,有以下功能:

function increment(input) {
    return input + 1;
}
function decrement(input) {
    return input - 1;
}
function double(input) {
    return input * 2;
}

此外,希望对订单使用 incrementdoubledecrement。因此,可以为此创建管道。然后,可以将它与 reduce() 一起使用。

const pipeline = [increment, double, decrement];
const funPipeline = (funcs, value) =>
    funcs.reduce(function (total, func) {
        return func(total);
    }, value);
console.log(funPipeline(pipeline, 10)); // 21

4. 数组重复项计算

例如,有一个字符串数组,它们是一个颜色数组,使用 reduce()  将其中每种颜色的重复次数计算出来,如下:

const colors = [
    "green",
    "red",
    "red",
    "yellow",
    "red",
    "yellow",
    "green",
    "green",
];
const countToMap = (array) =>
    array.reduce((prev, apple) => {
        if (prev[apple] >= 1) prev[apple]++;
        else prev[apple] = 1;
        return prev;
    }, {});
console.log(countToMap(colors)); // { green: 3, red: 3, yellow: 2 }

5. 数组中出现奇数次的整数

使用 reduce() 来查找在给定数组中出现奇数次的整数,如下:

const findOdd = (a) => a.reduce((a, b) => a ^ b);
console.log(findOdd([1, 2, 2, 1])); // 0
console.log(findOdd([1, 2, 2, 1, 2, 3, 3])); // 2

6. 查找数组的最大子数组和

使用此函数,可以找到给定数组的最大子数组和,如下:

const maxSequence = (a, sum = 0) =>
    a.reduce((max, v) => Math.max((sum = Math.max(sum + v, 0)), max), 0);
console.log(maxSequence([1, 2, 3, 4])); // 10

总结

了解 JavaScript 中一些内置高阶函数的用例,可以帮助提高编码技能。


相关文章
|
2月前
|
前端开发 JavaScript
基础 JavaScript 实例
基础 JavaScript 实例
24 1
|
3月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
7月前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
151 0
|
4月前
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
98 1
|
4月前
|
JavaScript
js之选项卡制作实例
js之选项卡制作实例
35 0
|
5月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
90 1
|
5月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
42 0
|
6月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
112 0
|
6月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
100 0