轻松玩转函数式编程

87204154 2020-09-24

最近和一些同学讨论了函数式编程,很多同学总觉得听起来很高大上,但用起来却无从下手。于是我抽时间捋了捋,将平时工作中用到的函数式编程案例和思想整理了出来,相信阅读本文后,大家都能快速上手函数式编程。

函数式编程目前使用范围非常广,常用的框架,语言几乎都能看到它的身影。

前端框架:react、vue 的 hooks 用法。

打包工具:webpack 的 webpack-chain 用法。

工具库:underscore、lodash、ramda。

部署方式:serverless。

后端:java、c# 中的 lamda 表达式。

本文将通过以下 3 个部分来深入函数式编程。

编程范式

函数式编程

函数式编程常见案例

编程范式

编程范式 指的是一种编程风格,它描述了程序员对程序执行的看法。在编程的世界中,同一个问题,可以站在多个角度去分析解决,这些不同的解决方案就对应了不同的编程风格。

常见的编程范式有:

命令式编程

面向过程编程

C

面向对象编程

C++、C#、Java

声明式编程

函数式编程

Haskell

命令式编程

命令式编程 是使用最广的一种编程风格,它是站在计算机的角度去思考问题,主要思想是 关注计算机执行的步骤,即一步一步告诉计算机先做什么再做什么。

由于存在很多需要控制的步骤,所以命令式编程普遍存在以下特点:

控制语句

循环语句:while、for

条件分支语句:if else、switch

无条件分支语句:return、break、continue

变量

赋值语句

根据这些特点,我们来分析一个命令式编程案例:

// 需求:筛选出数组中为奇数的子集合

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 步骤1:定义执行结果变量

let reult = [];

// 步骤2:控制程序循环调用

for (let i = 0; i < array.length; i++) {

// 步骤3:判断筛选条件

if (array[i] % 2 !== 0) {

// 步骤4:加入执行结果

reult.push(array[i]);

}

}

// 步骤5:得到最终的结果 result

以上代码通过 5 个步骤,实现了数组的筛选,这并没有什么问题,但细心的同学可能会感到疑惑:这样写的代码量太长了,而且并不语义化,只有阅读完每一行的代码,才知道具体执行的是什么逻辑。

没错,这就是命令式编程的典型特点,除此之外,还有以下几点:

命令式编程的每一个步骤都可以由程序员定义,这样可以更精细化、更严谨地控制代码,从而提高程序的性能。

命令式编程的每一个步骤都可以记录中间结果,方便调试代码。

命令式编程需要大量的流程控制语句,在处理多线程状态同步问题时,容易造成逻辑混乱,通常需要加锁来解决。

声明式编程

声明式编程 同样是一种编程风格,它通过定义具体的规则,以便系统底层可以自动实现具体功能。主要思想是 告诉计算机应该做什么,但不指定具体要怎么做。

由于需要定义规则来表达含义,所以声明式编程普遍存在以下特点:

代码更加语义化,便于理解。

代码量更少。

不需要流程控制代码,如:for、while、if 等。

接下来,我们将上文中的数组筛选,用声明式的方式重构一下:

// 筛选出数组中为奇数的子集合

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const reult = array.filter((item) => item % 2 !== 0);

可以看到,声明式编程没有冗余的操作步骤,代码量非常少,并且非常语义化,当我们读到 filter 的时候,自然而然就知道是在做筛选。

我们再看一个案例:

# 使用 sql 语句,查询 id 为 25 的学生

select * from students where id=25

在上述代码中,我们只是告诉计算机,我想查找 id 为 25 的同学,计算机就能给我们返回对应的数据了,至于是怎么查找出来的,我们并不需要关心,只要结果是正确的即可。

除了上述例子之外,还有很多声明式编程的案例:

html 用来声明了网页的内容。

css 用来声明网页中元素的外观。

正则表达式,声明匹配的规则。

有了以上几个案例,我们来总结一下声明式编程的优缺点:

声明式编程不需要编写复杂的操作步骤,可以大大减少开发者的工作量。

声明式编程的具体操作都是底层统一管理,可以降低重复工作。

声明式编程底层实现的逻辑并不可控,不适合做更精细化的优化。

函数式编程

函数式编程 属于声明式编程中的一种,它的主要思想是 将计算机运算看作为函数的计算,也就是把程序问题抽象成数学问题去解决。

函数式编程中,我们可以充分利用数学公式来解决问题。也就是说,任何问题都可以通过函数(加减乘除)和数学定律(交换律、结合律等),一步一步计算,最终得到答案。

函数式编程中,所有的变量都是唯一的值,就像是数学中的代数 x、y,它们要么还未解出来,要么已经被解出为固定值,所以对于:x=x+1 这样的自增是不合法的,因为修改了代数值,不符合数学逻辑。

除此之外,严格意义上的函数式编程也不包括循环、条件判断等控制语句,如果需要条件判断,可以使用三元运算符代替。

文章开头我们提到了 webpack-chain,我们一起来看一下:

// 使用 webpack-chain 来编写 webpack 配置。

const Config = require('webpack-chain');

const config = new Config();

config.

.entry('index')

.add('src/index.js')

.end()

.output

.path('dist')

filename('my-first-webpack.bundle.js');

config.module

.rule('compile')

.test(/\.js$/)

.use('babel')

.loader('babel-loader')

module.exports = config;

可以看到,webpack-chain 可以通过链式的函数 api 来创建和修改 webpack 配置,从而更方便地创建和修改 webpack 配置。试想一下,如果一份 webpack 配置需要用于多个项目,但每个项目又有一些细微的不同配置,这个应该怎么处理呢?

如果使用 webpack-chain 去修改配置,一个函数 api 就搞定了,而使用命令式的编程,则需要去逐步遍历整个 webpack 配置文件,找出需要修改的点,才能进行修改,这无疑就大大减少了我们的工作量。

函数式编程的特点

根据维基百科权威定义,函数式编程有以下几个特点:

函数是一等公民

函数可以和变量一样,可以赋值给其他变量,也可以作为参数,传入一个函数,或者作为别的函数返回值。

只用表达式,不用语句:

表达式是一段单纯的运算过程,总是有返回值。

语句是执行某种操作,没有返回值。

也就是说,函数式编程中的每一步都是单纯的运算,而且都有返回值。

无副作用

不会产生除运算以外的其他结果。

同一个输入永远得到同一个数据。

不可变性

不修改变量,返回一个新的值。

引用透明

函数的运行不依赖于外部变量,只依赖于输入的参数。

以上的特点都是函数式编程的核心,基于这些特点,又衍生出了许多应用场景:

纯函数:同样的输入得到同样的输出,无副作用。

函数组合:将多个依次调用的函数,组合成一个大函数,简化操作步骤。

高阶函数:可以加工函数的函数,接收一个或多个函数作为输入、输出一个函数。

闭包:函数作用域嵌套,实现的不同作用域变量共享。

柯里化:将一个多参数函数转化为多个嵌套的单参数函数。

偏函数:缓存一部分参数,然后让另一些参数在使用时传入。

惰性求值:预先定义多个操作,但不立即求值,在需要使用值时才去求值,可以避免不必要的求值,提升性能。

递归:控制函数循环调用的一种方式。

尾递归:避免多层级函数嵌套导致的内存溢出的优化。

链式调用:让代码更加优雅。

这些应用场景都大量存在于我们的日常工作中,接下来我们通过几个案例来实战一下。

函数式编程常见案例

基于函数式编程的应用场景,我们来实现几个具体的案例。

函数组合

柯里化

偏函数

高阶函数

尾递归

链式调用

1、函数组合,组合多个函数步骤。

function compose(f, g) {

return function () {

return f.call(this, g.apply(this, arguments));

};

}

function toLocaleUpperCase(str) {

return str.toLocaleUpperCase();

}

function toSigh(str) {

return str + "!";

}

// 将多个函数按照先后执行顺序组合成一个函数,简化多个调用步骤。

const composedFn = compose(toSigh, toLocaleUpperCase);

console.log("函数组合:", composedFn("msx"));

// 函数组合:MSX!

2、柯里化,将一个多参数函数转化为多个嵌套的单参数函数。

// 柯里化

function curry(targetfn) {

var numOfArgs = targetfn.length;

return function fn(...rest) {

if (rest.length < numOfArgs) {

return fn.bind(null, ...rest);

} else {

return targetfn.apply(null, rest);

}

};

}

// 加法函数

function add(a, b, c, d) {

return a + b + c + d;

}

// 将一个多参数函数转化为多个嵌套的单参数函数

console.log("柯里化:", curry(add)(1)(2)(3)(4));

// 柯里化:10

3、偏函数,缓存一部分参数,然后让另一些参数在使用时传入。

// 偏函数

function isTypeX(type) {

return function (obj) {

return Object.prototype.toString.call(obj) === `[object ${type}]`;

};

}

// 缓存一部分参数,然后让另一些参数在使用时传入。

const isObject = isTypeX("Object");

const isNumber = isTypeX("Number");

console.log("偏函数测试:", isObject({ a: 1 }, 123)); // true

console.log("偏函数测试:", isNumber(1)); // true

4、惰性求值,预先定义多个操作,但不立即求值,在需要使用值时才去求值,可以避免不必要的求值,提升性能。

// 这里使用 C# 中的 LINQ 来演示

// 假设数据库中有这样一段数据 db.Gems [4,15,20,7,3,13,2,20];

var q =

db.Gems

.Select(c => c < 10)

.Take(3)

// 只要不调用 ToList 就不会求值

// 在具体求值的时候,会将预先定义的方法进行优化整合,以产生一个最优的解决方案,才会去求值。

.ToList();

上述代码中,传统的求值会遍历 2 次,第一次遍历整个数组(8 项),筛选出小于 10 的项,输出 [4,7,3,2],第二次遍历这个数组(4 项),输出 [4,7,3]。

如果使用惰性求值,则会将预先定义的所有操作放在一起进行判断,所以只需要遍历 1 次就可以了。在遍历的同时判断 是否小于 10 和 小于 10 的个数是否为 3,当遍历到第 5 项时,就能输出 [4,7,3]。

相比传统求值遍历的 8+4=12 项,使用惰性求值则只需遍历 5 项,程序的运行效率也就自然而然地得到了提升。

5、高阶函数,可以加工函数的函数(接收一个或多个函数作为输入、输出一个函数)。

// React 组件中,将一个组件,封装为带默认背景色的新组件。

// styled-components 就是这个原理

function withBackgroundRedColor (wrapedComponent) {

return class extends Component {

相关推荐

86447318 / 0评论 2019-10-23