相联络列： 从零初步的前端筑基之旅(面试必备，持续更新～)

什么是函数式编程

  • 是一种编程范型，它将电脑运算视为数学上的函数核算，而且避免运用程序状况以及易变方针。
  • 函数式编程愈加侧重程序实行T K T c B的效果 e [ : z | o而非实行的进程，倡议运用若干简略的实行单元让核算效果不断渐进，逐层推导杂乱的运算，而X w r a Z不是规划一个杂乱的实行进程。
  • 函数式编程的思维进: x z Q P l程是完全不0 F ; T同的，它的着眼点是函x ( C g k V c } ^数，而不是进程，它侧重的是怎样通过函数的组合变换去处理问题，而不是我通过写B ` o { e 1什么样的语句去处理问题

为什么叫函数式编程

根据学术上函数的界说，函数就是一种描绘调集和调集之间的转换联络，输入通过函数都会回来有且? D P r B $ ? t只需一个输出值。函数实践上是一个联络，或许说是一种映射，而这种映射联络是能够组合的。

在我们的编程世界中，我们需求处理的其实也只需“数据”和“联络”，而联络就是函数。我们所谓的编程作业也不过就是在找一种映射联络，一旦联络找到了，问题就处理了，剩下的工作，就是让数据流过这种联络，然后转换成另一个数据。c 0 J 6 n i . u

函数式编程的特征

函数是一等公民。

你能够像对待任何其他数& ? N 7据类型相同对待它们——把它们存在数组里，当作参数传递，赋值给变量…等等。运用总有回来值的表达式而不是语句y 5 u q F 6 –

// 函数式编程-函数作为回来参数
const add = (x) =~ c c 6 5 1 l> {
return plus = (y) => {
return x + y;
}
};
let plus1 = add(1);
let plus2 = add(2);
console.log(pm B , { t K Ilus1(1)); // 22 ] A A
console.log(plus2Y 1 7 ?(1)); //z V x 2 E 3

声明式编程 (Declarative Programming)

不再指示核算机怎样作业，而是指出我们清晰期望得到的效果。与指令式不同，声明式意味着我们要写表达式，而不h % Y D – Q ; A是一步一步的指示。

以 SQL 为例，它就没有“先做这个，再做那个z z E y J L A ) l”的指令，有的仅仅一个指明我们想要从数据库取什么数据的表达式。至于怎样取数据则是由它自己决议的。以后数据库升级也好，SQL 引擎优化也好，根柢不需求更改查询语句。

无状况和数据不可变 (St{ ? y $ Watelessness and ImM H * 0mutax K @ l wble data)

这是函数式编程的中心概念：

  • 数据f w 8 ~ n ( h不可变： 它要求你全部的数据都是不可变的，这意味着假如你想批改一个方针，那你应该创立一个新L I Q的方针用来批改，而不E 8 / o M Q J 9是批改已有的方针。
  • 无状况： 主要是侧重关于一个函数，不管你何G b ! } ) W s L G时工作，它都应该像第一次工作相同，给定A M H相同的输入，给出相同的6 R i ^ N q M输出，完全不依赖外部状+ U r d况的变化。
// 比较 ArrE S q may 中的 slice 和 splk # 3  = j hice
let test = [1, 2, 3, 4, 5];
// slice 为纯函数，回来一个新的数组
console.log(test.slice(0, 3)); // [1, 2, 3]
console.lo= { u 8 0g(test); // [1, 2, 3, 4, 5]
// splice则会批改参数数组
console.log(test.splice(0, 3)); // [1, 2, 3]
console.H P ? u Z 5  wlog(test);w 1 ( // [4, 5]

函数应该纯天然，无副作用

纯函数是这样一种函数，即相同的输入，永久会得到相同的输出，而且没有任何可查询的副作用。

副作用是指，函数内部与外部互动，发生运算以外的其他效果。 例如在函数调用的进程中，运用并批改到了外部的变量，那么就是一个有副作用的函数。

副作用或许包括，但不限于：

  • 更改文件体系
  • 往数据库插入记载
  • 发送一个 http 央求
  • 可变数据
  • 打印/log
  • 获取用户输入
  • DOM 查x S & W d询
  • 访问体系状况

纯函数的长处：

  1. 可缓存性。

    纯函数* d + . J g M D N能够根据输入来做缓存。

  2. 可移植性／自文档化。

    • 可6 = {移植性能够意味着把函+ Z ~ ( T数序列化（ser0 ? y rializing）并通过 socket 发送。也能够意味着代码能够在 web workers 中工作。
    • 纯函数是完全自给自足的，它需求的全部东西: A ! K F都能轻易获得。纯函数的依赖很清晰，因而更易于查询和了解

    ***; K 7*

  3. 可检验性（Testay / b $ h B e = Bble）

    纯函数让检验愈加简单。我们不需求编造一个“真实的”支付网关，或许每一次检验之前都要配备、之后都要断言状况（assert the state）。只需简略地给函数一个输入，然后断言输出就好了。

  4. 合理性（Reasonable）

    许多人信任运用纯函数最大的长处是_引用透` Y ) A & 1明性_（refeB B h 4 0 & + ) Erential transparency）。假如一段代码能够替换成它实行所得的效果，而且是在不改动整个程序行为的前提下替换的，那么我们就说这段代码是引用通明的。

    由于纯函数总是能够根据相同的输入回来相同G M 6 @的输出，所以它们就能够保证总是回来同一个效果，这也就N S ? s = v (保证了引用通明性。

  5. 并行代码x ) ; e r 2 ?

    我们能够并行工作恣意纯函数。由于纯函数根柢不需求访问共享的内存，而且根据其r C . p Y界说，纯c – J ( q ? S U函数y : h l l G % I i也不会因副作用而进入竞赛态（race condit@ V ^ 0 0 O Cion）。

面向方针语言的问题是，它们永久都要随身携带那些隐式的环境。你只需求一个香蕉，但$ x 2 t u & q却得到一个拿着香蕉的大猩猩…以及整个丛林

惰性实行（Lazy Eval ] quation）

函数只在需求的时分实行，不发生无含义的中心Q l j } D变量。自始至终都$ F ] M在写函数，只需在终究的时分才通过调用 发生实践的效果。

函数式编程中有两种操作是必不可少的：柯里化（Currying）和函数组合（Compose）

柯里化

把O / | M v q N接受多个参数的函数变换成接受一& ! $个单一参数(初步函数的第一个参数)的函数，只传递给函数一部分参数来调用K = _ G W | 8 h r它，让它回来一个函数去处理剩下的参数。

函数式编程 + 柯里化，将提取成柯里化的函数部分配备好之后，可作为参数传入，简化操作流程。

// 给 list 中每个元素先加 1，再加 5，再减 1
let list = [1, 2, 3, 4, 5];
//正常做O % * q 0 +法
let list1 = list.map((value) => {
return value + 1;
});
let list2 = list1.map((value) =&gP ;  Zt; {
return value + 5;
});r 2 @ Y # 6 j N 4
let list3 = list2.map((value) =&g8 C 6 x { Q J +t; {
return value - 1;
});
console.log(list3); // [6, 7, 8, 9, 10]
// 柯里化
const changeList = (num) => {
retur D b F h ]  . 0rn (data) => {
return data + num
}
};
let list1 = list.map(chaZ ~ 6 S G 2 P H ongeList(1)).map(changeList(5)).map(changeList(-1));
console.log(list1); // [6, 7, 8, 9, 10]

回来的函数就通过闭包的办法记住了传入8 W 9 O D的第一个参数

一次次地调用它实z 1 d 0 |在是有点4 % F繁琐，我们能够运用一个特别的 curry 帮忙函数（helper function）使这类函数的界说和调用愈加简单。

var curry = require('lodash').cu~ U ~ ! + Drry;
var match = curry(function(whr ? } j #  eat, str) {
return str.match(what);
});
var replace = curryK   @(function([ m M _what, replacem@ k C 3 ` zent, str) {
return str.replaf + V J Fce(what, replacement);
});
var filter = curry(function(f, ary) {
retu^ # x f e N - 9rn arR U  k { # q qy.filter(f);
});
var map = curry(function(f, ary) {
return ary.map(f);
});

上面的代码中遵循的是一种简略，一同也非常重要D w & ! 8的方式。即战略性地把要操作的数据（String， Array）放到终究一个参数里。

你能够一次性地调用 curry 函数，也能够z | H X每次只传一个参数分屡次调用。

match(/s+/g, "hello world");
/G + #/ [  ~ Z X ^' ' ]
match(/s+/g)("hello world");
// [ ' ' ]
var hasSpaces = match(/s+/g);
// function(x) { return x.match(/s+/g) }
hasSpaces("heln ; v h lo world");
// [ ' ' ]
hasSpaces("spaceless");
// null

这里标明的是一种“预加载”函数的能力，通过传递一到两个参数调用函数，就能得到一个记住了这些参数的新函数。

curry 的用途非常广泛，就像在 hasSpaces、findSpaces 和 censorl w i {ed 看到的那样，只需传给函数一些参数，就能得到一个新S V B g { p a函数。

用 map 简略地把参数是单个元素的函数包裹一下，就能把它转换成B @ = R F j参数为数组的函数。

va 7 q S F Z ] k ear getChildren = fP ~ R ^ ! _ y ]unction(x) {
return x.childNodes;
};
var allTheChildren = map(getChildren);

只传给函数一部分参数一般也叫做_局部调a n r G d _用_（partial application），能够很多减少样板文件代码（boilerplate code）。

当我们议论_纯函数_的时分，我们说它们接受一个输入回来一个输出。cury | D = t Cry 函数所做的正是这样：每传递一个参数调用函数，就回来一个新函数处理剩下的参数。这就是一个输入对应一个输出啊。哪怕输出是另一个函数，它也是纯函数。

函数组合

函数组合的意图是将多个函数组合成一个函数。

const compose = (f, g) => {
return (x) => {
return f(g(x));
};
};

在 compose 的界说中，g 将先于 f 实行，因而就创立了一个从右到左的数据流。组合的概念直接来自于数学讲义，从右向左实行愈加能够反映数学上的含义} { b u |。

全部的组合都有一个特性

// 结合律（associativity）
var associative = compose(f, compose(g, h)) == c ? & ] M C Z S compose(compose* 9 E H(f, g), h);
// true

所以，假如我们想把字符串变为大写(假定head，reverse，toUpperCase 函数存在)，能够这么写：

compose(toUpperCase, compose(head, reverse));
// 或许
compose(compose(toUpperCase, hV V b # r { I d yead),j F @ X z reverse);

结合律的一大长处是任何一个函数分组都能够被拆开来，然后再以它们自己的组合办法打包在一同。关于怎样组合，并没有标准的答案——我们仅仅以自己喜爱的办法搭乐高积木罢了。

pointfree

pointfree 方式指的是，函数无须提及即将操作的数据是什么? { : 5 ,样的。一等公民的函数、柯里化（curry）以及组合r V + & & t h D 4协作起来非常有助于完结这种方式。

//H ; W M ! y 非 pointfree，由于提到了数据：word
var snakeCase1 d O v S = function (word) {
return word.toLowerCase().replace(/s+/ig, '_');
};
// pointfree
var snakeCase = compose(replace(/s+/ig, '_'), toLowed P | . = * S [rCase);

运用 cu@ B 4rry，我们能够做到让每个函数都先接纳数据，然后操作数据，终究再把数据传递到下一个函数那里去。另外注意在 poie P 3ntfree 版别中，不需求 word 参数就能结构v [ .函数` 0 $ a 4 $；而在非 pointfree 的版Z J D O $ , f 0别中，有必要N d # c `要有 word 才能进行全部操作。pointfree 方式能够帮忙我们减少不必要的命名，让代码坚持简洁和通用。

debug

假如在 debug 组合的时分遇到了困难，那么能够运用下面这个有用的，但是不纯的 trace 函数来追寻代码的实行状况。

var trace = curry(function(tag, x){
consG m 4 ( @ g ] 7ole.log(tag, x);
return x;
})Q d L F d - 4 = S;

优势

  1. 更好的E X D b Z R P F管理状况。由于它的宗旨是无状况，或许说更少的状况。而往常DOM的开发中，由于DOM的视觉呈现依托于状况变化，所以不可避免的发生了非常多的状况，3 u t @ : z K (而且不同组件或许还相互依赖。以FP来编程，能R ^ P U L最大化的减少这些不知道、优化代码、减少犯错状况。
  2. 更简略的复用。极Z R N X R , } c p点的FP代码应该是每一行代码都是一个函数，当然我们不需求这么极点。我们尽量的把进程逻辑以更纯的函数来完结，固定输t V ] . 5 : s 5 4入->固定输出，没有其他外部变量影响，而且无副作用。这样代码复用时，完全不需求考虑它的内部完结和外部影响。
  3. 更优雅的组H E y合。往大的说，网页是由各个组件组成的。往小的说，一个函数也或许是由多个小函数组成的。参看上面第二点，更强的复用性，带来更强壮的组合性。
  4. 隐性长处。减少代码量，进步保护性。

缺陷

  1. 功能：函数式编程相往往会对一个办法进行过度包装，然后发生上下文切换的功能开支。一同，在 JS 这种非函数式s B c , ( ^ R语言中，函数式的办法必定会比直接写语句指令慢（引擎会针对许多指令做特别优化）。
  2. 资源占用：在 JS 中为了完结方针U = a y状况的不可变，往往会创立新的方针，因而，它对废物收回（Garbage Collection）所发生f d + f q的压力远远超越其他编程办法。这在某些场合会发生非常W 1 ? e严重的问题。
  3. 递归骗局：在函数式编程中，为了完结迭代，一般会选用递归操Q ; m E & & + v e作，为了减少递归的功能开支，我们往往会把递归写成尾递归方式，以便让解析器进行优化。但是众所周知，JS 是不支持尾递归优化的.
  4. 代码不易读。特别了解FP的人或许会觉得这段代码一望而知。而不了解的人，遇到写的不流通的代码，看懂代码，得脑子里先演算半小时。

前端范畴，我们能看到许多函数式编程的影子：ES6 中加入了箭w L q t 4 =头函N R K c ( G {数，Redux 引进 Elm 思路下降 Flux 的杂乱性，React16.6 初步推出 React.memo()，使得 pure functional components 成为或许，16.8 初步主推 Hook，6 Q ? M ! j建议运用 pF ^ c 4ure function 进行组件编写……

假如你收成了新知识，` S 7 0 `请在做侧边栏第一个按钮用力点一下～

懒人收拾的js函数式编程解说

参看文档：

  1. JavaScript函数式编程
  2. JavaScript 函数式编程到底是个啥
  3. 函数式编程指北