函数式编程初探

函数式编程思想在最近几年变得异常流行,让我们抛开语言本身,一起来看下什么是函数式编程,以及如何应用于js的代码设计。

\color{#ed6c00}{声明式编程}

编程语言分为:命令式和声明式。函数式编程就属于声明式编程;声明式编程特征如下:

命令式编程是行动导向,因而算法是显性而目标是隐形的;

声明式编程是目标驱动,因而目标是显性而算法是隐形的;

举个🌰:

// 命令式
let leaders = [];
for(let i = 0; i < teams.length; i++){
  leaders.push(teams[i].leader)
}
// 声明式
let keaders = teams.map(item => item.leader)

通过上面的例子大家应该很明显的感觉到声明式和命令式的区别了吧,本文讲的是属于声明式的函数式编程,如果对命令式编程感兴趣的话推荐看看汇编,毕竟计算机底层就是命令式编程来完成的而汇编最为接近。

\color{#ed6c00}{什么是函数式编程}

函数式编程,又称泛函编程,是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。

​函数式编程,又称泛函编程,是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。

“范”即典范、模范。“范式”即模式方法;“函数式编程”就是使用函数来编程的一种编程模式。

常见的编程范式有:函数式编程、面向对象编程、面向过程编程等等;对我们前端小伙伴来说最熟悉的js就是面向对象编程思想,它和函数式编程思想的区别如下:

面向对象 (OOP):可理解为对数据封装。通过这种封装使代码更易于理解;

函数式编程 (FP):是一种抽象过程的思维,即对动作进行抽象,通过最少的改变使得代码更易于理解维护;

简单来说区别就是面向对象关注数据,而函数式编程则关注过程即动作

\color{#ed6c00}{函数式编程特点}

  • 一级公民函数:赋予函数作为数据值的能力,即普通变量能做什么函数就可以做什么,例如函数作为入参返回值等;
  • 高阶匿名函数:函数和lambda 语法的应用使高阶函数变得易于实现;
  • 闭包:不赘述;
  • 纯粹性:不允许任何副作用,如改变外部变量等;
  • 不可变性:不允许用表达式来产生新的数据结构来代替一个已存在的数据结构;
  • 递归:不赘述;

以上是函数式编程的特点。对于前端必用的Javascript语言来说除了纯粹性和不可变性以外的特性都是支持的。

对于不可变性来说,js是个弱类型语言需要额外的支持,现在有一些三方库如Immutable.js等可以提供支持;

对于纯粹性来说,我们需要制定一些规范进行支持;

\color{#ed6c00}{什么是纯函数}

函数式编程是将电脑运算视为数学上的函数计算,数学上的函数就是纯函数,就是函数式编程的基础 。下图就是一个数学上的函数:

函数是不同数值之间的特殊关系:每一个输入值返回且只返回一个输出值即一个或多个x可对应一个y;

而下图这种一个输入(x)对应多个输出(y)的关系就不是函数:

\color{#ed6c00}{纯函数特点}

  • 相同输入必定返回相同输出;
  • 不会修改以参数形式传递过来的对象;
  • 它不依赖于函数外部任何状态或数据的变化,必须只依赖于其输入参数;
  • 不会产生任何可观察的副作用,例网络请求,IO读写或dom操作查询、写日志、在屏幕输出、写文件、触发任何外部进程、调用另一个有副作用的函数等。

花一分钟再记一遍纯函数的特点;

我们来测试一下,以下四个函数哪些是纯函数?

// 函数一
function add (x, y) {
  return x + y
}
// 函数二
let count = 0;
function addCount () {
  count ++;
}
// 函数三
function random (min, max) {
return Math.floor(Math.random() + (max - min)) + min;
}
// 函数四
function setColor (el, color) {
  el.style.color = color;
}

想好了么?答案如下:
\color{red}{}
1、是纯函数、无副作用;
2、不是纯函数、输出不确定、有副作用(修改了外部的变量);
3、不是纯函数,输出不确定,无副作用;
4、不是纯函数,修改了dom,对外有副作用(改变了dom的颜色);

我们再来一个🌰,下面change函数是纯函数么?

function setColor (el, color) {
  el.style.color = color;
}
function change (fn, els, color) {
  els.map(item => (fn(item, color)))
}
// els为dom集合
change(setColor, els, 'blue')

答案:

不是,虽然change函数本身没有修改dom,但是,我们强调一点,纯函数的依赖必须是无影响的,也就是说在内部任何操作都不能对外造成影响,但是setColor函数改变了dom的样式,所以它不是纯函数。那么如何将其转化成一个纯函数呢,我们来看下一个概念:柯里化

\color{#ed6c00}{柯里化}

部分应用和复合是函数式编程的重要特征。在采用命令式编程的时候,每当我们需要抽象出一个新功能的时候,就相应的定义一个函数来实现。但是在函数式编程中,我们就可以通过部分应用和复合来使用现有函数拼接成新的函数,类似于搭积木。柯里化就是部分应用的例子。柯里化(currying)是把接受多个参数的函数转换成接受一个单一参数(函数的第一个参数)的函数,并且返回接受余下参数并且返回结果的新函数,简言之就是把一个多参数函数转化成单参数函数。听起来很乱吧,我们看个🌰:

// 柯里化前
function add (x, y) {
  return x + y;
}
add(1, 2)

// 柯里化后
function addX (y) {
  return function (x) {
    return x + y
  }
}
add(2)(1)

通过给函数addX传递参数y生成了一个可以做加法运算并返回结果的新函数。中途返回生成的函数 是一种对参数的“缓存”。

我们来看看之前不纯change函数如何提纯。

function setColor (el, color) {
  el.style.color = color;
}
function change (fn, els, color) {
  els.map(item => (fn(item, color)))
}
// els为dom集合
change(setColor, els, 'blue')

每次调用change函数的时候我们都希望参数 fn 的值setColor,因为我想把不同的色给到不同的dom上。改写后如下:

function change(fn) {
  return fucntion (els, color) {
    Array.from(els).map(item => fn(item.color))
  }
}
let newSetColor = change(setColor)
newSetColor(els, 'blue')

改写后无论fn是什么,return出的都是唯一确定的函数,在change中只是执行return语句,setColor很熟并未在change上执行,所以change对外并没有产生影响。这是change就是一个纯函数啦~

之前说过部分应用和复合是函数式编程的重要特征,部分应用说完了,让我们看看函数的复合。

\color{#ed6c00}{函数复合}

如果一个变量a=1,我们希望先执行+3(F函数),然后再+5(G函数),最后得到结果是20;那么可以先将F、G合并成K操作,之后a直接执行K就可以得到a=20,会写为G(F(1));

function F (x) {
  return x + 3
}
function G (x) {
  return x * 5
}
// 输出20
G(F(1));

现在,如果我们要做一系列操作,先+1再+2再+3再+4再+5再+4再+6.。。要写成A(B(C(D(E(F(...))))))么?

正常情况下是不会出现这种"神仙代码"的,通过代码复合我们可以很轻易解决“洋葱代码”的问题,现在来实现一个compose方法来进行复合;

redux中也有组合函数的实现,精华在最后一句。

\color{#ed6c00}{总结}

日常开发中,我们针对工程代码一定会有以下思考:

  • 这个组件是否需要重构才能实现新来的需求?
  • 改了这里,别的方法会不会受到影响?
  • 代码是否冗余?
  • 如何给函数添加单元测试?
  • 代码是否清晰,方便别人接手二次开发?

通过本文可以发现函数式编程可以很好的解决以上问题。虽然说了函数式编程的各种好处,不过还是存在以下问题:

  • 由于函数式编程大规模使用高阶函数,所以他比指令时变成需要多得多的内存和处理能力;
  • 容易产生过度设计、降低代码的可读性;
  • 对开发者的程序设计能力有一定要求;
  • 代码量会有明显上升;
    OOP和FP不是截然对立的思维, 在程序编写中实际上会相互渗透、合理的结合使用。

感谢阅读。

以上。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容