iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JS中的reduce fold unfold用法
  • 674
分享到

详解JS中的reduce fold unfold用法

2024-04-02 19:04:59 674人浏览 安东尼
摘要

目录fold(reduce)使用for...of使用while循环更像fold的实现unfold数组实现生成器实现unfold实现总结fold(reduce) 说说reduce吧,

fold(reduce)

说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold,本质上就是一个折叠数组的过程,把数组中的多个值经过运算变成一个值,每次运算都会有一个函数处理,这个函数就是reduce的核心元素,称之为reducer,reducer函数是个2元函数,返回1个单值,常见的add函数就是reducer


const addReducer = (x, y) => x + y;

这个add函数就是一个reducer,最常见的用法就是结合数组的reduce方法来用


[1, 2, 3, 4, 5].reduce(addReducer, 0) // 15

为了更好的理解reduce,下面用不同的思路实现一遍这个函数

使用for...of


const reduce = (f, init, arr) => {
  let acc = init;
  for (const item of arr) {
    acc = f(acc, item);
  }
  return acc
}
// 执行
reduceFor(addReducer, 0, [1, 2, 3, 4, 5])  // 15

使用while循环


reduce = (f, init, arr) => {
  let acc = init;
  let current;
  let i = 0;
  while ((current = arr[i++])) {
    acc = f(acc, current);
  }
  return acc;
}

// 执行
reduceFor(addReducer, 0, [1, 2, 3, 4, 5])  // 15

更像fold的实现

上面的实现也都好理解,但好像没有体现出来折叠(fold)这个过程,折叠应该是对数组的层层挤压操作,上面的实现数组和逻辑其实是分开了,而且也引入了比较多的中间变量,虽然是在内部没有副作用吧。
其实换个思路想一下,如果把状态通过参数来传递,就可以更好的体现fold的过程,这里的参数是值是指逐渐变化的数组和计算值,并可以尽可能的做到无状态,真正纯函数的实现是没有表达式,只有语句的,这个可以用递归做到。下面的实现是用尾递归实现的reduce,可以在实现的过程中就看出数组和计算值是怎样变化的。非常符合fold这个称谓


function reduce(f, init, arr) {
  if (arr.length === 0) return init;
  const [head, ...rest] = arr;
  return reduceRecursion(f, f(init, head), rest);
}

// 执行
reduceFor(addReducer, 0, [1, 2, 3, 4, 5])  // 15

unfold

fold反过来就是unfold,unfold顾名思义就是根据一个反过来的reducer,来生成一系列的值。此时这个如果说原来的reducer实现类似于(a, b) -> c,那反过来就是c -> [a, b], 生成序列是一个很基本的操作,但就是这个基本的操作,也有很多实现的思路,在介绍unfold之前,看一下实现序列的其他方法,最后来做一个对比。

序列的实现


range(0, 100, 5)

期待结果

[0, 5, 10, ... 95]

数组实现

这个就不多说了,大家应该都知道。


range = (first, last, step) => {
  const n = (last - first) / step + 1;
  return Array.from({ length: n - 1 })
            .map((_, index) => first + index * step);
}
// 也可以使用from的第二个参数
// Array.from({ length: n }, (_, i) => first + i * step);

生成器实现

生成序列还有一个利器,那就是generator,生成器生成器,就是用来生成数据的。generator返回一个迭代器,也很容易生成序列


function* range(first, last, step) {
  let acc = first;
  while (acc < last) {
    yield acc;
    acc = acc + step;
  }
}
[...range(0, 100, 5)]

两者相比,generator更注重生成的过程,Array注重数据变化的过程。

unfold实现

在实现unfold之前,首先梳理一下实现思路,和fold一样,也是用递归,且要在实现的过程中看到对应数据的变化。大体过程如下

0 -> [0, 5]

5 -> [5, 10]

10 -> [10, 15]

15 -> [15, 20]

...

90 -> [90, 95]

95 -> [95, 100]

可以看出过程恰恰是fold反过来,符合c -> [a, b]因为初始值肯定为一个数组,所以unfold只需要两个参数,实现如下。


function unfold(f, init) {
  const g = (f, next, acc) => {
    const result = f(next);
    const [head, last] = result || [];
    console.log(last);
    return result ? g(f, last, acc.concat(head)) : acc;
  };
  return g(f, init, []);
}

range = R.curry((first, last, step) =>
  unfold(next => next < last && [next, next + step], 0)
)

// 执行
range(0, 100, 5)

总结

以上就是结合reduce和一个生成序列的例子简单介绍了一下fold和unfold这两个在fp编程中很重要的概念,当然他们功能不只是生成序列,还有很多很强大的功能

以上就是详解js中的reduce fold unfold用法的详细内容,更多关于JS的资料请关注编程网其它相关文章!

--结束END--

本文标题: 详解JS中的reduce fold unfold用法

本文链接: https://www.lsjlt.com/news/125309.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解JS中的reduce fold unfold用法
    目录fold(reduce)使用for...of使用while循环更像fold的实现unfold数组实现生成器实现unfold实现总结fold(reduce) 说说reduce吧, ...
    99+
    2024-04-02
  • javascript中的reduce fold unfold怎么用
    这篇文章给大家分享的是有关javascript中的reduce fold unfold怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript的作用是什么1、能够嵌入动态文本于HTML页面。2、对...
    99+
    2023-06-14
  • JS中数组reduce()的用法
    本篇内容介绍了“JS中数组reduce()的用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • Python3中map()、reduce()、filter()的用法详解
    目录1.map()2.filter()3.reduce()Python3中的map()、reduce()、filter() 这3个一般是用于对序列进行操作的内置函数,它们经常需要与 ...
    99+
    2024-04-02
  • JS中的reduce()方法使用小结
    目录一、语法二、实例三、其他相关方法过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可...
    99+
    2024-04-02
  • JavaScript中reduce()详解及使用方法
    目录reduce():总结:reduce 应用场景:1.数组里所有值的和2.累加数组中对象的值3.将二维数组转为一维数组4.计算数组中每个元素出现的次数5.按属性对object分类6...
    99+
    2023-05-18
    js中reduce详解 js中reduce的用法 js reduce
  • JAVA8 Stream流中的reduce()方法详解
    目录reduce()简介reduce三个override的方法公共集合reduce()简介 Reduce 原意:减少,缩小根据指定的计算模型将Stream中的值计算得到一个...
    99+
    2023-02-28
    JAVA8 Stream reduce()方法 JAVA8 Stream reduce
  • Python3中map(),reduce(),filter()的详细用法
    目录前言1.map()2.filter()3.reduce()前言 Python3中的map()、reduce()、filter() 这3个一般是用于对序列进行操作的内置函数,它们经...
    99+
    2024-04-02
  • JS数组方法reduce的妙用分享
    目录1. 基本用法2. 使用技巧(1)数组求和(2)扁平数组(3)数组分组(4)使用 reduce() 代替 filter().map()(5)统计数组元素出现次数(6)串行执行异步...
    99+
    2023-02-01
    JS 数组方法reduce JS reduce使用 JS reduce
  • js中如何使用reduce()方法数组去重
    小编给大家分享一下js中如何使用reduce()方法数组去重,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript可以直...
    99+
    2023-06-14
  • web前端中js reduce方法的使用是怎样的
    web前端中js reduce方法的使用是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。web前端教程分享js reduce方法使用教程,reduce() 方法接收一个函...
    99+
    2023-06-04
  • 详解javascript reduce函数的原理和用法
    reduce函数是Javascript中一个非常常用的函数,它可以大大简化我们对数组的操作。在这篇文章中,我们将详细讲解reduce函数的原理以及如何实现它。一、reduce函数的概念reduce函数是Javascript中一个非常重要的函...
    99+
    2023-05-14
  • js中javascript:void(0)用法详解
    在 JavaScript 中,`javascript:void(0)` 是一个特殊的表达式,通常用于标记一个链接或按钮的"无效"状态...
    99+
    2023-09-14
    java
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2024-04-02
  • js中Object.create实例用法详解
    1、用Object.create()方法创建新对象,并使用现有对象提供新对象的proto。 2、提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象。 实例 ...
    99+
    2024-04-02
  • JS中fetch()用法实例详解
    目录了解fetch没有fetch时我们获取异步资源的方式:使用fetch后我们获取异步资源的方式fetch的语法fetch的Response对象1.同步属性2.判断请求是否成功发出3...
    99+
    2024-04-02
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2024-04-02
  • JavaScript中reduce()的用法实例
    前言 过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单...
    99+
    2024-04-02
  • 详解Python中高阶函数(map,filter,reduce,sorted)的使用
    目录什么是高阶函数自定义一个高阶函数常用的内置高阶函数map函数参数说明功能实例filter函数功能实例reduce函数功能实例sorted函数参数说明功能实例sort和sorted...
    99+
    2024-04-02
  • 详解JavaScript数组reduce()方法的高级技巧
    目录1、语法2、实例解析 initialValue 参数3、reduce的简单用法4、reduce的高级用法reduce()方法可以搞定的东西,for循环,或者forEach方法有时...
    99+
    2023-03-24
    JavaScript reduce()方法用法 JavaScript reduce()方法 JavaScript reduce
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作