角度转度分秒lisp函数_征服JavaScript面试：什么是函数组合？

“征服 Javascript 面试”是我写的一系列文章&＃xff0c;来帮助面试者准备他们在面试 Javascript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。

函数式编程正在接管 Javascript 世界。就在几年前&＃xff0c;只有少数 Javascript 程序员知道函数式编程是什么。然而&＃xff0c;在过去 3 年内&＃xff0c;我所看到的每个大型应用程序代码库都大量用到了函数式编程理念。

函数组合就是组合两到多个函数来生成一个新函数的过程。将函数组合在一起&＃xff0c;就像将一连串管道扣合在一起&＃xff0c;让数据流过一样。

简而言之&＃xff0c;函数 f 和 g 的组合可以被定义为 f(g(x))&＃xff0c;从内到外(从右到左)求值。也就是说&＃xff0c;求值顺序是&＃xff1a;

1. x
2. g
3. f

下面我们在代码中更近距离观察一下这个概念。假如你想把用户的全名转换为 URL Slug&＃xff0c;给每个用户一个个人信息页面。为了实现此需求&＃xff0c;你需要经历一连串的步骤&＃xff1a;

1. 将姓名根据空格分拆(split)到一个数组中
2. 将姓名映射(map)为小写
3. 用破折号连接(join)
4. 编码 URI 组件

如下是一个简单的实现&＃xff1a;

const toSlug &＃61; input &＃61;> encodeURIComponent( input.split(&＃39; &＃39;) .map(str &＃61;> str.toLowerCase()) .join(&＃39;-&＃39;));Javascript

还不赖...但是假如我告诉你可读性还可以更强一点会怎么样呢&＃xff1f;

假设每个操作都有一个对应的可组合的函数。上述代码就可以被写为&＃xff1a;

const toSlug &＃61; input &＃61;> encodeURIComponent( join(&＃39;-&＃39;)( map(toLowerCase)( split(&＃39; &＃39;)( input ) ) ));console.log(toSlug(&＃39;JS Cheerleader&＃39;)); // &＃39;js-cheerleader&＃39;Javascript

这看起来比我们的第一次尝试更难读懂&＃xff0c;但是先忍一下&＃xff0c;我们就要解决。

为了实现上述代码&＃xff0c;我们将组合几种常用的工具&＃xff0c;比如 split()、join() 和 map()。如下是实现&＃xff1a;

const curry &＃61; fn &＃61;> (...args) &＃61;> fn.bind(null, ...args);const map &＃61; curry((fn, arr) &＃61;> arr.map(fn));const join &＃61; curry((str, arr) &＃61;> arr.join(str));const toLowerCase &＃61; str &＃61;> str.toLowerCase();const split &＃61; curry((splitOn, str) &＃61;> str.split(splitOn));Javascript

除了 toLowerCase() 外&＃xff0c;所有这些函数经产品测试的版本都可以从 Lodash/fp 中得到。可以像这样导入它们&＃xff1a;

import { curry, map, join, split } from &＃39;lodash/fp&＃39;;

也可以像这样导入&＃xff1a;

const curry &＃61; require(&＃39;lodash/fp/curry&＃39;);const map &＃61; require(&＃39;lodash/fp/map&＃39;);//...

这里我偷了点懒。注意这个 curry 从技术上来说&＃xff0c;并不是一个真正的柯里化函数。真正的柯里化函数总会生成一个一元函数。这里的 curry 只是一个偏函数应用。请参考“柯里化和偏函数应用之间的区别是什么&＃xff1f;”这篇文章。不过&＃xff0c;这里只是为了演示用途&＃xff0c;我们就把它当作一个真正的柯里化函数好了。

回到我们的 toSlug() 实现&＃xff0c;这里有一些东西真的让我很烦&＃xff1a;

const toSlug &＃61; input &＃61;> encodeURIComponent( join(&＃39;-&＃39;)( map(toLowerCase)( split(&＃39; &＃39;)( input ) ) ));console.log(toSlug(&＃39;JS Cheerleader&＃39;)); // &＃39;js-cheerleader&＃39;Javascript

对我来说&＃xff0c;这里的嵌套太多了&＃xff0c;读起来有点让人摸不着头脑。我们可以用一个会自动组合这些函数的函数来扁平化嵌套&＃xff0c;就是说&＃xff0c;这个函数会从一个函数得到输出&＃xff0c;并自动将它传递给下一个函数作为输入&＃xff0c;直到得到最终值为止。

细想一下&＃xff0c;好像数组中有一个函数可以做差不多的事情。这个函数就是 reduce()&＃xff0c;它用一系列值为参数&＃xff0c;对每个值应用一个函数&＃xff0c;最后累加成一个结果。值本身也可以函数。但是 reduce() 是从左到右递减&＃xff0c;为了匹配上面的组合行为&＃xff0c;我们需要它从右到左缩减。

好事情是刚好数组也有一个 reduceRight() 方法可以干这事&＃xff1a;

const compose &＃61; (...fns) &＃61;> x &＃61;> fns.reduceRight((v, f) &＃61;> f(v), x);

像 .reduce() 一样&＃xff0c;数组的 .reduceRight() 方法带有一个 reducer 函数和一个初始值(x)为参数。我们可以用它从右到左迭代数组&＃xff0c;将函数依次应用到每个数组元素上&＃xff0c;最后得到累加值(v)。

用 compose&＃xff0c;我们就可以不需要嵌套来重写上面的组合&＃xff1a;

const toSlug &＃61; compose( encodeURIComponent, join(&＃39;-&＃39;), map(toLowerCase), split(&＃39; &＃39;));console.log(toSlug(&＃39;JS Cheerleader&＃39;)); // &＃39;js-cheerleader&＃39;Javascript

当然&＃xff0c;lodash/fp 也提供了 compose()&＃xff1a;

import { compose } from &＃39;lodash/fp&＃39;;

或者:

const compose &＃61; require(&＃39;lodash/fp/compose&＃39;);

当以数学形式的组合从内到外的角度来思考时&＃xff0c;compose 是不错的。不过&＃xff0c;如果想以从左到右的顺序的角度来思考&＃xff0c;又该怎么办呢&＃xff1f;

还有另外一种形式&＃xff0c;通常称为 pipe()。Lodash 称之为 flow():

const pipe &＃61; (...fns) &＃61;> x &＃61;> fns.reduce((v, f) &＃61;> f(v), x);const fn1 &＃61; s &＃61;> s.toLowerCase();const fn2 &＃61; s &＃61;> s.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;);const fn3 &＃61; s &＃61;> s &＃43; &＃39;!&＃39;const newFunc &＃61; pipe(fn1, fn2, fn3);const result &＃61; newFunc(&＃39;Time&＃39;); // emit!Javascript

可以看到&＃xff0c;这个实现与 compose() 几乎完全一样。唯一的不同之处是&＃xff0c;这里是用 .reduce()&＃xff0c;而不是 .reduceRight()&＃xff0c;即是从左到右缩减&＃xff0c;而不是从右到左。

下面我们来看看用 pipe() 实现的 toSlug() 函数&＃xff1a;

const toSlug &＃61; pipe( split(&＃39; &＃39;), map(toLowerCase), join(&＃39;-&＃39;), encodeURIComponent);console.log(toSlug(&＃39;JS Cheerleader&＃39;)); // &＃39;js-cheerleader&＃39;Javascript

对于我来说&＃xff0c;这要更容易读懂一些。

骨灰级的函数式程序员用函数组合定义他们的整个应用程序。而我经常用它来消除临时变量。仔细看看 pipe() 版本的 toSlug()&＃xff0c;你会发现一些特殊之处。

在命令式编程中&＃xff0c;在一些变量上执行转换时&＃xff0c;在转换的每个步骤中都会找到对变量的引用。而上面的 pipe() 实现是用无点的风格写的&＃xff0c;就是说完全找不到它要操作的参数。

我经常将管道(pipe)用在像单元测试和 Redux 状态 reducer 这类事情上&＃xff0c;用来消除中间变量。中间变量的存在只用来保存一个操作到下一个操作之间的临时值。

这玩意开始听起来会比较古怪&＃xff0c;不过随着你用它练习&＃xff0c;会发现在函数式编程中&＃xff0c;你是在和相当抽象、广义的函数打交道&＃xff0c;而在这样的函数中&＃xff0c;事物的名称没那么重要。名称只会碍事。你会开始把变量当作是多余的样板。

就是说&＃xff0c;我认为无点风格可能会被用过头。它可能会变得太密集&＃xff0c;较难理解。但是如果你搞糊涂了&＃xff0c;这里有一个小窍门...你可以利用 flow 来跟踪是怎么回事&＃xff1a;

const trace &＃61; curry((label, x) &＃61;> { console.log(&＃96;&＃61;&＃61; ${ label }: ${ x }&＃96;); return x;});Javascript

如下是你用它来跟踪的方法&＃xff1a;

const toSlug &＃61; pipe( trace(&＃39;input&＃39;), split(&＃39; &＃39;), map(toLowerCase), trace(&＃39;after map&＃39;), join(&＃39;-&＃39;), encodeURIComponent);console.log(toSlug(&＃39;JS Cheerleader&＃39;));// &＃39;&＃61;&＃61; input: JS Cheerleader&＃39;// &＃39;&＃61;&＃61; after map: js,cheerleader&＃39;// &＃39;js-cheerleader&＃39;processing

trace() 只是更通用的 tap() 的一种特殊形式&＃xff0c;它可以让你对流过管道的每个值执行一些行为。明白了么&＃xff1f;管道(Pipe)&＃xff1f;水龙头(Tap)&＃xff1f;可以像下面这样编写 tap()&＃xff1a;

const tap &＃61; curry((fn, x) &＃61;> { fn(x); return x;});lisp

现在你可以看到为嘛 trace() 只是一个特殊情况下的 tap() 了&＃xff1a;

const trace &＃61; label &＃61;> { return tap(x &＃61;> console.log(&＃96;&＃61;&＃61; ${ label }: ${ x }&＃96;));};

你应该开始对函数式编程是什么样子&＃xff0c;

以及偏函数应用和柯里化如何与函数组合协作&＃xff0c;来帮助你编写可读性更强的程序有点感觉了。

上就是今天的分享啦~

如果大家有问题或者想了解更多的

技术干货可以私信发送【微信】加朗妹儿微信哟~