面试官：说说你对函数式编程的理解？优缺点？

落日映苍穹つ 2022-10-22 10:55 156阅读 0赞

![b31c1d37313a1234d0b1eea8913a03f1.png][]

## 一、是什么 ##

函数式编程是一种"编程范式"（programming paradigm），一种编写程序的方法论

主要的编程范式有三种：命令式编程，声明式编程和函数式编程

相比命令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而非设计一个复杂的执行过程

举个例子，将数组每个元素进行平方操作，命令式编程与函数式编程如下

// 命令式编程
    var array = [0, 1, 2, 3]
    for(let i = 0; i < array.length; i++) {
        array[i] = Math.pow(array[i], 2)
    }
    
    // 函数式方式
    [0, 1, 2, 3].map(num => Math.pow(num, 2))

简单来讲，就是要把过程逻辑写成函数，定义好输入参数，只关心它的输出结果

即是一种描述集合和集合之间的转换关系，输入通过函数都会返回有且只有一个输出值

![d809c35c49205c21d2f03e3308c216a8.png][]

可以看到，函数实际上是一个关系，或者说是一种映射，而这种映射关系是可以组合的，一旦我们知道一个函数的输出类型可以匹配另一个函数的输入，那他们就可以进行组合

## 二、概念 ##

### 纯函数 ###

函数式编程旨在尽可能的提高代码的无状态性和不变性。要做到这一点，就要学会使用无副作用的函数，也就是纯函数

纯函数是对给定的输入返还相同输出的函数，并且要求你所有的数据都是不可变的，即纯函数=无状态+数据不可变

![5b5f4dd4bb8e88cd67f5f3c930a8849e.png][]

举一个简单的例子

let double = value=>value*2;

特性：

*  函数内部传入指定的值，就会返回确定唯一的值
 *  不会造成超出作用域的变化，例如修改全局变量或引用传递的参数

优势：

*  使用纯函数，我们可以产生可测试的代码

test('double(2) 等于 4', () => {
      expect(double(2)).toBe(4);
    })

*  不依赖外部环境计算，不会产生副作用，提高函数的复用性
 *  可读性更强 ，函数不管是否是纯函数  都会有一个语义化的名称，更便于阅读
 *  可以组装成复杂任务的可能性。符合模块化概念及单一职责原则

### 高阶函数 ###

在我们的编程世界中，我们需要处理的其实也只有“数据”和“关系”，而关系就是函数

编程工作也就是在找一种映射关系，一旦关系找到了，问题就解决了，剩下的事情，就是让数据流过这种关系，然后转换成另一个数据，如下图所示

![1e70778ebce00ee5d56d2ce11a65f9d2.png][]

在这里，就是高阶函数的作用。高级函数，就是以函数作为输入或者输出的函数被称为高阶函数

通过高阶函数抽象过程，注重结果，如下面例子

const forEach = function(arr,fn){
        for(let i=0;i<arr.length;i++){
            fn(arr[i]);
        }
    }
    let arr = [1,2,3];
    forEach(arr,(item)=>{
        console.log(item);
    })

上面通过高阶函数 `forEach`来抽象循环如何做的逻辑，直接关注做了什么

高阶函数存在缓存的特性，主要是利用闭包作用

const once = (fn)=>{
        let done = false;
        return function(){
            if(!done){
                fn.apply(this,fn);
            }else{
                console.log("该函数已经执行");
            }
            done = true;
        }
    }

### 柯里化 ###

柯里化是把一个多参数函数转化成一个嵌套的一元函数的过程

一个二元函数如下：

let fn = (x,y)=>x+y;

转化成柯里化函数如下：

const curry = function(fn){
        return function(x){
            return function(y){
                return fn(x,y);
            }
        }
    }
    let myfn = curry(fn);
    console.log( myfn(1)(2) );

上面的`curry`函数只能处理二元情况，下面再来实现一个实现多参数的情况

// 多参数柯里化；
    const curry = function(fn){
        return function curriedFn(...args){
            if(args.length<fn.length){
                return function(){
                    return curriedFn(...args.concat([...arguments]));
                }
            }
            return fn(...args);
        }
    }
    const fn = (x,y,z,a)=>x+y+z+a;
    const myfn = curry(fn);
    console.log(myfn(1)(2)(3)(1));

关于柯里化函数的意义如下：

*  让纯函数更纯，每次接受一个参数，松散解耦
 *  惰性执行

### 组合与管道 ###

组合函数，目的是将多个函数组合成一个函数

举个简单的例子：

function afn(a){
        return a*2;
    }
    function bfn(b){
        return b*3;
    }
    const compose = (a,b)=>c=>a(b(c));
    let myfn =  compose(afn,bfn);
    console.log( myfn(2));

可以看到`compose`实现一个简单的功能：形成了一个新的函数，而这个函数就是一条从 `bfn -> afn` 的流水线

下面再来看看如何实现一个多函数组合：

const compose = (...fns)=>val=>fns.reverse().reduce((acc,fn)=>fn(acc),val);

`compose`执行是从右到左的。而管道函数，执行顺序是从左到右执行的

const pipe = (...fns)=>val=>fns.reduce((acc,fn)=>fn(acc),val);

组合函数与管道函数的意义在于：可以把很多小函数组合起来完成更复杂的逻辑

## 三、优缺点 ##

#### 优点 ####

*  更好的管理状态：因为它的宗旨是无状态，或者说更少的状态，能最大化的减少这些未知、优化代码、减少出错情况
 *  更简单的复用：固定输入->固定输出，没有其他外部变量影响，并且无副作用。这样代码复用时，完全不需要考虑它的内部实现和外部影响
 *  更优雅的组合：往大的说，网页是由各个组件组成的。往小的说，一个函数也可能是由多个小函数组成的。更强的复用性，带来更强大的组合性
 *  隐性好处。减少代码量，提高维护性

#### 缺点： ####

*  性能：函数式编程相对于指令式编程，性能绝对是一个短板，因为它往往会对一个方法进行过度包装，从而产生上下文切换的性能开销
 *  资源占用：在 JS 中为了实现对象状态的不可变，往往会创建新的对象，因此，它对垃圾回收所产生的压力远远超过其他编程方式
 *  递归陷阱：在函数式编程中，为了实现迭代，通常会采用递归操作

## 最后 ##

这里也给大家包邮送**5**本最近很火的新书**《前端函数式演进》**

![068dc8f0d965de1bad83458a8e12213f.png][]

《前端函数式演进》是一部写给前端工程师的函数式编程实战指南，由阿里本地生活企业订餐前端负责人撰写。

作者结合自己在前端领域的大量工程实践经验，首先从前端开发者的角度介绍了函数式编程在前端领域的演进，以及前端必备的函数式编程知识；然后对React和RxJS等流行前端工具的函数式编程功能和思想进行了深入剖析，既可以帮助读者更好地理解和使用这些工具，又能给予读者技术选型方面的建议。此外，书中提供了平台级别的前端开发示例的多种实现，方便读者结合书中的理论进行印证和思考

### 参与方式 ###

#### 拼手气三本： ####

*  后台回复 666 获取抽奖码
 *  明晚 18:00 小程序自动开奖，中奖者24小时内填写收件信息，逾期视为作废

#### 点在看二本： ####

*  从在看列表随机抽两位小伙伴，中奖结果最终会公布到朋友圈，参于在看抽奖记得一定要加小编好友噢
 *  明晚 18:00 朋友圈公布中奖名单

![c464998e60bc324d254bf049cd06837b.gif][]

![6ba7d14bf3e6daf024151c1b48df66dd.png][]

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/81302150

\--The End--

系列正在更新：25/33

*  [面试官：说说你对正则表达式的理解？应用场景？][Link 1]  
    
 *  [面试官：说说你对DOM的理解，常见的操作有哪些？][DOM]
 *  [面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？][BOM_BOM]
 *  [面试官：JavaScript中本地存储的方式有哪些？区别及应用场景？][JavaScript]
 *  [面试官：举例说明你对尾递归的理解，有哪些应用场景][Link 2]
 *  [面试官：说说 JavaScript 中内存泄漏的几种情况？][JavaScript 1]
 *  [面试官系列：前端高频面试题汇总 | Vue面试题][_ Vue]

篇副有限，扫下方二维码查看往期

![d68e70ed16b5d2bd49a1ea85fed265ef.png][]

[b31c1d37313a1234d0b1eea8913a03f1.png]: /images/20221022/f81448cccb18469e8376799bbefa337e.png
[d809c35c49205c21d2f03e3308c216a8.png]: /images/20221022/3f52cd4940064945b8c04be43e99266b.png
[5b5f4dd4bb8e88cd67f5f3c930a8849e.png]: /images/20221022/5ae5d084bef94a2aa230f52708d4b214.png
[1e70778ebce00ee5d56d2ce11a65f9d2.png]: /images/20221022/39da634f7d0249a196c952ac502e1e4e.png
[068dc8f0d965de1bad83458a8e12213f.png]: /images/20221022/dd1821aeb9aa4c47be8dbb27dd66f744.png
[c464998e60bc324d254bf049cd06837b.gif]: /images/20221022/ca4777c73d444ffb8e00600d4beffd8b.png
[6ba7d14bf3e6daf024151c1b48df66dd.png]: /images/20221022/02ad10bf309e475881253c5148f3aec0.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c81acb67410c458664ea37ee0598e0e85783afdc771e92772c2e3f619d465002d8897bc7&idx=2&mid=2247486028&scene=21&sn=7efbff142f8966159b2fb1cdfee22f34#wechat_redirect
[DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8d0cb6741c63fa8c57b9b563b52ed2bf784c07980cbd832eb847cfd3f20b3f6d93f9735&idx=1&mid=2247486086&scene=21&sn=2a4320d54a65d71a5d5aab42dcde4e52#wechat_redirect
[BOM_BOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8cacb6741dce70f20ce120ee69fef2a8310513a62af0b84dc9f838f8f16a0d4cd0ae7ce&idx=2&mid=2247486108&scene=21&sn=d8feb34e4273ccca56e79853030e7036#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c92dcb67403b70aa91ea4c905b9132bbfe23878e956b9e45e25c395c4453d51effb7cc51&idx=2&mid=2247486331&scene=21&sn=dd7f3d2184ba37997986e19dd1765027#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8fccb6741ea44a2bdec53066645ee306ebda5e8888acece65811a2578aa94cf5ff1f7e6&idx=1&mid=2247486122&scene=21&sn=9c6642610382251b87ba1cc6d128ed72#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c894cb674182fc3696d53ed6e78f18fb64c21b8c8fc885c8f15c7a804abdb6d248faa1e1&idx=2&mid=2247486146&scene=21&sn=4acf4a04b4930e1c57636ab83f7ebaae#wechat_redirect
[_ Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c932cb6740246c85820d3d1aa4bbbdf785f91bfd6296f90f86afcd92a8e874e6af270d9e&idx=2&mid=2247486308&scene=21&sn=0ae22fb7d37b9640f455d06b3260314e#wechat_redirect
[d68e70ed16b5d2bd49a1ea85fed265ef.png]: /images/20221022/d5d387feb78a43399ffe7a6c3d33ae25.png