前端必学函数式编程（三）

　　在前面的文章，我们谈了基础之基础，重要之重要偏函数，偏函数通过函数封装，实现了减少传参数量的目的，解决了手动指定实参的麻烦。
　　更具重要意义的是：
　　当函数只有一个形参时，我们能够比较容易地组合它们。这种单元函数，便于进行后续的组合函数；
　　没错，本篇就是谈关于组合函数。它是函数编程的重中之重之重之重重重！组合函数含义
　　函数编程就像拼乐高！
　　乐高有各式各样的零部件，我们将它们组装拼接，拼成一个更大的组件或模型。
　　函数编程也有各种功能的函数，我们将它们组装拼接，用于实现某个特定的功能。
　　下面来看一个例子，比如我们要使用这两个函数来分析文本字符串：functionwords（str）｛returnString（str）。toLowerCase（）。split（sb）。filter（functionalpha（v）｛return〔w〕。test（v）；｝）；｝functionunique（list）｛varuniqList〔〕；for（leti0；ilist。length；i）｛if（uniqList。indexOf（list〔i〕）1）｛uniqList。push（list〔i〕）；｝｝returnuniqList；｝vartextTocomposetwofunctionstogether；varwordsFoundwords（text）；varwordsUsedunique（wordsFound）；wordsUsed；〔to，compose，two，functions，together〕
　　不用细看，只用知道：我们先用words函数处理了text，然后用unique函数处理了上一处理的结果wordsFound；
　　这样的过程就好比生产线上加工商品，流水线加工。
　　想象一下，如果你是工厂老板，还会怎样优化流程、节约成本？
　　这里作者给了一种解决方式：去掉传送带！
　　即减少中间变量，我们可以这样调用：varwordsUsedunique（words（text））；wordsUsed
　　确实，少了中间变量，更加清晰，还能再优化吗？
　　我们还可以进一步把整个处理流程封装到一个函数内：functionuniqueWords（str）｛returnunique（words（str））；｝uniqueWords（text）
　　这样就像是一个黑盒，无需管里面的流程，只用知道这个盒子输入是什么！输出是什么！输入输出清晰，功能清晰，非常干净！如图：
　　与此同时，它还能被搬来搬去，或再继续组装。
　　我们回到uniqueWords（）函数的内部，它的数据流也是清晰的：uniqueWordsuniquewordstext封装盒子
　　上面的封装uniqueWords盒子很nice，如果要不断的封装像uniqueWords的盒子，我们要一个一个的去写吗？functionuniqueWords（str）｛returnunique（words（str））；｝functionuniqueWordsA（str）｛returnuniqueA（wordsA（str））；｝functionuniqueWordsB（str）｛returnuniqueB（wordsB（str））；｝。。。
　　所以，一切为了偷懒，我们可以写一个功能更加强大的函数来实现自动封装盒子：functioncompose2（fn2，fn1）｛returnfunctioncomposed（origValue）｛returnfn2（fn1（origValue））；｝；｝ES6箭头函数形式写法varcompose2（fn2，fn1）origValuefn2（fn1（origValue））；
　　接着，调用就变成了这样：varuniqueWordscompose2（unique，words）；varuniqueWordsAcompose2（uniqueA，wordsA）；varuniqueWordsBcompose2（uniqueB，wordsB）；
　　太清晰了！任意组合
　　上面，我们组合了两个函数，实际上我们也可以组合N个函数；finalValuefunc1func2。。。funcNorigValue
　　比如用一个compose函数来实现（敲重点）：functioncompose（。。。fns）｛returnfunctioncomposed（result）｛拷贝一份保存函数的数组varlistfns。slice（）；while（list。length0）｛将最后一个函数从列表尾部拿出并执行它resultlist。pop（）（result）；｝returnresult；｝；｝ES6箭头函数形式写法varcompose（。。。fns）result｛varlistfns。slice（）；while（list。length0）｛将最后一个函数从列表尾部拿出并执行它resultlist。pop（）（result）；｝returnresult；｝；
　　基于前面uniqueWords（。。）的例子，我们进一步再增加一个函数来处理（过滤掉长度小于等于4的字符串）：functionskipShortWords（list）｛varfilteredList〔〕；for（leti0；ilist。length；i）｛if（list〔i〕。length4）｛filteredList。push（list〔i〕）；｝｝returnfilteredList；｝vartextTocomposetwofunctionstogether；varbiggerWordscompose（skipShortWords，unique，words）；varwordsUsedbiggerWords（text）；wordsUsed；〔compose，functions，together〕
　　这样compose函数就有三个入参且都是函数了。我们还可以利用偏函数的特性实现更多：functionskipLongWords（list）｛。。｝varfilterWordspartialRight（compose，unique，words）；固定unique函数和words函数varbiggerWordsfilterWords（skipShortWords）；varshorterWordsfilterWords（skipLongWords）；biggerWords（text）；shorterWords（text）；
　　filterWords函数是一个更具有特定功能的变体（根据第一个函数的功能来过滤字符串）。compose变体
　　compose（。。）函数非常重要，但我们可能不会在生产中使用自己写的compose（。。），而更倾向于使用某个库所提供的方案。了解其底层工作的原理，对我们强化理解函数式编程也非常有用。
　　我们理解下compose（。。）的另一种变体递归的方式实现：functioncompose（。。。fns）｛拿出最后两个参数var〔fn1，fn2，。。。rest〕fns。reverse（）；varcomposedFnfunctioncomposed（。。。args）｛returnfn2（fn1（。。。args））；｝；if（rest。length0）returncomposedFn；returncompose（。。。rest。reverse（），composedFn）；｝ES6箭头函数形式写法varcompose（。。。fns）｛拿出最后两个参数var〔fn1，fn2，。。。rest〕fns。reverse（）；varcomposedFn（。。。args）fn2（fn1（。。。args））；if（rest。length0）returncomposedFn；returncompose（。。。rest。reverse（），composedFn）；｝；
　　通过递归进行重复的动作比在循环中跟踪运行结果更易懂，这可能需要更多时间去体会；
　　基于之前的例子，如果我们想让参数反转：varbiggerWordscompose（skipShortWords，unique，words）；变成varbiggerWordspipe（words，unique，skipShortWords）；
　　只需要更改compose（。。）内部实现这一句就行：。。。while（list。length0）｛从列表中取第一个函数并执行resultlist。shift（）（result）；｝。。。
　　虽然只是颠倒参数顺序，这二者没有本质上的区别。抽象能力
　　你是否会疑问：什么情况下可以封装成上述的盒子呢？
　　这就很考验抽象的能力了！
　　实际上，有两个或多个任务存在公共部分，我们就可以进行封装了。
　　比如：functionsaveComment（txt）｛if（txt！）｛comments〔comments。length〕txt；｝｝functiontrackEvent（evt）｛if（evt。name！undefined）｛events〔evt。name〕evt；｝｝
　　就可以抽象封装为：functionstoreData（store，location，value）｛store〔location〕value；｝functionsaveComment（txt）｛if（txt！）｛storeData（comments，comments。length，txt）；｝｝functiontrackEvent（evt）｛if（evt。name！undefined）｛storeData（events，evt。name，evt）；｝｝
　　在做这类抽象时，有一个原则是，通常被称作DRY（dontrepeatyourself），即便我们要花时间做这些非必要的工作。
　　抽象能让你的代码走得更远！比如上例，还能进一步升级：functionconditionallyStoreData（store，location，value，checkFn）｛if（checkFn（value，store，location））｛store〔location〕value；｝｝functionnotEmpty（val）｛returnval！；｝functionisUndefined（val）｛returnvalundefined；｝functionisPropUndefined（val，obj，prop）｛returnisUndefined（obj〔prop〕）；｝functionsaveComment（txt）｛conditionallyStoreData（comments，comments。length，txt，notEmpty）；｝functiontrackEvent（evt）｛conditionallyStoreData（events，evt。name，evt，isPropUndefined）；｝
　　这样if语句也被抽象封装了。
　　抽象是一个过程，程序员将一个名字与潜在的复杂程序片段关联起来，这样该名字就能够被认为代表函数的目的，而不是代表函数如何实现的。通过隐藏无关的细节，抽象降低了概念复杂度，让程序员在任意时间都可以集中注意力在程序内容中的可维护子集上。《程序设计语言》
　　我们在本系列初始提到：一切为了创造更可读、更易理解的代码。
　　从另一个角度，抽象就是将命令式代码变成声命式代码的过程。从怎么做转化成是什么。
　　命令式代码主要关心的是描述怎么做来准确完成一项任务。声明式代码则是描述输出应该是什么，并将具体实现交给其它部分。
　　比如ES6增加的结构语法：functiongetData（）｛return〔1，2，3，4，5〕；｝命令式vartmpgetData（）；varatmp〔0〕；varbtmp〔3〕；声明式var〔a，，，b〕getData（）；
　　开发者需要对他们程序中每个部分使用恰当的抽象级别保持谨慎，不能太过，也不能不够。阶段小结
　　函数组合是为了符合声明式编程风格，即关注是什么，而非具体做什么。
　　它能将一个函数调用的输出路由跳转到另一个函数的调用上，然后一直进行下去，它借助compose（。。）或它的变体实现
　　我们期望组合中的函数是一元的（输入输出尽量是一个），这个也是前篇有提到的很重要的一个点。
　　组合声明式数据流是支撑函数式编程其他特性的最重要的工具之一！
　　以上！我是掘金安东尼：一名人气前端技术博主（文章100w阅读量）
　　终身写作者（INFP写作人格）
　　坚持与热爱（简书打卡1000日）
　　我能陪你一起度过漫长技术岁月吗（以梦为马）
　　觉得不错，给个点赞和关注吧（这是我最大的动力）b（）d