JavaScript中6 个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 中一些内置高阶函数的用例,可以帮助提高编码技能。

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » JavaScript中6 个reduce()实例

发表评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情