资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS函数式编程 - 函数组合与柯里化

JS函数式编程 - 函数组合与柯里化

MingjunYang / 1731人阅读

摘要：而在函数式编程中方法是独立于数据的，我们可以把上面以函数式的方式在写一遍你肯定会说，你是在逗我。对比两个生成新函数的过程，没有柯里化的相对而言就有一点啰嗦了。

我们都知道单一职责原则，其实面向对象的SOLID中的S(SRP, Single responsibility principle)。在函数式当中每一个函数就是一个单元，同样应该只做一件事。但是现实世界总是复杂的，当把现实世界映射到编程时，单一的函数就没有太大的意义。这个时候就需要函数组合和柯里化了。

链式调用

如果用过jQuery的都晓得啥是链式调用，比如$(".post").eq(1).attr("data-test", "test").javascript原生的一些字符串和数组的方法也能写出链式调用的风格：

"Hello, world!".split("").reverse().join("") // "!dlrow ,olleH"

首先链式调用是基于对象的，上面的一个一个方法split, reverse, join如果脱离的前面的对象"Hello, world!"是玩不起来的。

而在函数式编程中方法是独立于数据的，我们可以把上面以函数式的方式在写一遍：

const split = (tag, xs) => xs.split(tag)
const reverse = xs => xs.reverse()
const join = (tag, xs) => xs.join(tag)

join("",reverse(split("","Hello, world!"))) // "!dlrow ,olleH"

你肯定会说，你是在逗我。这比链式调用好在哪儿了？这里还是依赖于数据的啊，没有传递`"Hello, world!"，你这一串一串的函数组合也转不起来啊。这里唯一的好处也就是那几个多带带的方法可以复用了。莫慌，后面还有那么多内容我怎么也会给你优化（忽悠）好的。再进行改造前，我们先介绍两个概念，部分应用和柯里化。

部分应用

部分应用是一种处理函数参数的流程，他会接收部分参数，然后返回一个函数接收更少的参数。这个就是部分应用。我们用bind来实现一把:

const addThreeArg = (x, y, z) => x + y + z;

const addTwoArg = addThreeNumber.bind(null, 1)
const addOneArg = addThreeNumber.bind(null, 1, 2)

addTwoArg(2, 3) // 6
addOneArg(7) // 10

上面利用bind生成了另外两个函数，分别接受剩下的参数，这就是部分应用。当然你也可以通过其他方式实现。

部分应用存在的问题

部分应用主要的问题在于，它返回的函数类型无法直接推断。正如前面所说，部分应用返回一个函数接收更少的参数，而没有规定返回的参数具体是多少个。这也就是一些隐式的东西，你需要去查看代码。才知道返回的函数接收多少个参数。

柯里化

柯里化定义：你可以调一个函数，但是不一次将所有参数传给它。这个函数会返回一个函数去接收下一个参数。

const add = x => y => x + y
const plusOne = add(1)
plusOne(10) // 11

柯里化的函数返回一个只接收一个参数的函数，返回的函数类型可以预测。

当然在实际开发中，有很多的函数都不是柯里化的，我们可以使用一些工具函数来转化：

const curry = (fn) => { // fn可以是任何参数的函数
  const arity = fn.length;

  return function $curry(...args) {
    if (args.length < arity) {
      return $curry.bind(null, ...args);
    }

    return fn.call(null, ...args);
  };
};

也可以用开源库Ramda里提供的curry方法。

哦，柯里化。有什么用呢？

举个例子

const currySplit = curry((tag, xs) => xs.split(tag))
const split = (tag, xs) => xs.split(tag)

// 我现在需要一个函数去split ","

const splitComma = currySplit(",") //by curry

const splitComma = string => split(",", string)

可以看到柯里化的函数生成新函数时，和数据完全没有关系。对比两个生成新函数的过程，没有柯里化的相对而言就有一点啰嗦了。

函数组合

先给代码：

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

其实compose做的事情一共两件：

接收一组函数，返回一个函数，不立即执行函数

组合函数，将传递给他的函数从左到右组合。

可能有同学对上面的reduceRight不是很熟悉，我给个2元和3元的例子：

const compose = (f, g) => (...args) => f(g(...args))
const compose3 = (f, g, z) => (...args) => f(g(z(...args)))

函数调用是从左到右，数据流也是一样的从左到右。当然你可以定义从右到左的，不过从语义上来说就不那么表意了。

好，现在让我们来优化一下最开始的例子：

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const reverseWords = compose(join(""), reverse, split(""))

reverseWords("Hello,world!");

是不是简洁易于理解多了。这里的reverseWords也是我们之前讲过的Pointfree的代码风格。不依赖数据和外部状态，就是组合在一起的一个函数。

Pointfree我在上一篇介绍过JS函数式编程 - 概念，也阐述了其优缺点，有兴趣的小伙伴可以看看。

函数组合的结合律

先回顾一下小学知识加法结合律：a+(b+c)=(a+b)+c。我就不解释了，你们应该能理解。

回过来看函数组合其实也存在结合律的：

compose(f, compose(g, h)) === compose(compose(f, g), h);

这个对于我们编程有一个好处，我们的函数组合可以随意组合并且缓存:

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const getReverseArray = compose(reverse, split(""))

const reverseWords = compose(join(""), getReverseArray)

reverseWords("Hello,world!");

脑图补充：

OK，下一篇介绍一下范畴轮，和函子。

GPU云服务器 云服务器 js函数式编程视频 函数式编程 函数式编程指针 函数式编程语言?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98329.html

相关文章

  • SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

    摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

    csRyan 评论0 收藏0

  • JavaScript函数式编程，真香之组合(一)

    摘要：组合的概念是非常直观的，并不是函数式编程独有的，在我们生活中或者前端开发中处处可见。其实我们函数式编程里面的组合也是类似，函数组合就是一种将已被分解的简单任务组织成复杂的整体过程。在函数式编程的世界中，有这样一种很流行的编程风格。 JavaScript函数式编程，真香之认识函数式编程(一) 该系列文章不是针对前端新手，需要有一定的编程经验，而且了解 JavaScript 里面作用域，闭...

    mengbo 评论0 收藏0

  • JavaScript函数式编程(一)

    摘要：所以下面介绍一些函数式编程的知识和概念。函数式编程的一个明显的好处就是这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码。 原文链接 引言 说到函数式编程，大家可能第一印象都是学院派的那些晦涩难懂的代码，充满了一大堆抽象的不知所云的符号，似乎只有大学里的计算机教授才会使用这些东西。在曾经的某个时代可能确实如此，但是近年来随着技术的发展，函...

    hedzr 评论0 收藏0

  • JavaScript函数式编程（一）

    摘要：所以下面介绍一些函数式编程的知识和概念。函数式编程的一个明显的好处就是这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码。我会在下一篇文章中介绍函数式编程的更加高阶一些的知识，例如等等概念。 一、引言 说到函数式编程，大家可能第一印象都是学院派的那些晦涩难懂的代码，充满了一大堆抽象的不知所云的符号，似乎只有大学里的计算机教授才会使用这些东...

    Shihira 评论0 收藏0

  • JavaScript 函数式编程技巧 - 柯里化

    摘要：作为函数式编程语言，带来了很多语言上的有趣特性，比如柯里化和反柯里化。在一些函数式编程语言中，会定义一个特殊的占位变量。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化，累积传入的参数，最后执行。作为函数式编程语言，JS带来了很多语言上的有趣特性，比如柯里化和反柯里化。 这里可以对照另外一篇介绍 JS 反柯里化 的文章一起看~ 1. 简介 柯里化（Currying）...

    edgardeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

MingjunYang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<