js函数式编程初解

函数式编程

为什么要学习函数式编程

有项有趣的调查，全球程序员的平均代码量为：5行/人天。也就是说一天中你花费7.5小时去阅读代码（主要是研究这5函代码在哪里写，怎么写），然后花费30分钟来写完这5行代码，这就是程序员一天的工作。
我们所写的代码将来是要交给别人或者自己去维护，那么如何提高代码的可读性是项很重要的任务。函数式编程可以很好的做到这一点，所以学习函数式编程很重要的一点就是：提高代码可读性。当然还有其他因素：

• 函数式编程随着react的流行受到越来越多的关注
• vue3也拥抱函数式编程
• 函数式编程可以抛弃this
• 方便测试、方便并行处理
• 有很多库可以帮助我们进行函数式开发

什么是函数是编程

• 百度定义：简单说，“函数式编程"是一种"编程范式”（programming paradigm），也就是如何编写程序的方法论。
• 函数式编程（Functional Programming, FP）就是利于纯函数实现细粒度函数，再把细粒度函数进行函数组合。

函数VS程序

• 函数式编程中的函数并不是程序中的函数（方法），而是数学中的函数（映射关系，y = f(x)）；
• 程序就是一个任意的功能集合。它或许有许多个输入值，或许没有。它或许有一个输出值（ return 值），或许没有。
• 而函数则是接收输入值，并明确地 return 值

编程范式

什么是编程范式

解决编程中的问题的过程中使用到的一种模式，体现在思考问题的方式和代码风格上。

常见的几种编程范式

• 命令式编程
• 面向对象编程
• 函数式编程

不同的编程范式有不同的代码表现

• 命令式编程：通过命令式编程去让程序按步骤地执行操作。（不管你接不接受，这应该是我们学习编程接触到的第一个编程范式）

const name = 'world';
console.log(`hello ${name}`);

• 面向对象编程： 把整个程序抽象成现实生活中的一个对象，这个对象会包含属性和方法。通过类的概念，我们有了生成对象的一个工厂。使用 new 关键字创建一个对象，最后调用对象的方法

const Program = function(name) {
    this.name = name;
    this.greet = function() {
        console.log(`hello ${this.name}`);
    };
};
const program = new Program('world');
program.greet();

• 函数式编程： 通过函数的调用完成程序的功能

const greet = function(name) {
    return `hello ${name}`
};
console.log(greet('world'));

不同的编程范式适用的场景不同

• 命令式编程：流程顺序， 机器上的操作指令
• 面向对象编程：物体，游戏人物模型
• 函数式语言：数据处理，业务类前端

函数式编程的误区

刚接触函数式编程会存在一个误区：在一个程序中只有100%使用函数式编程，才可以叫做函数式编程。没有什么是绝对的，我们在项目过程中通常是使用命令式编程、面向对象的编程、函数式编程以及其它编程范式相互结合的。

函数是一等公民

为什么说函数是一等公民

• 《Programming Language Pragmatics》

In general, a value in a programming language is said to have first-class status if it can be passed as a parameter, returned from a subroutine, or assigned into a variable.

也就是说，在编程语言中，一等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量。

• 例如，字符串在几乎所有编程语言中都是一等公民，字符串可以做为函数参数，字符串可以作为函数返回值，字符串也可以赋值给变量。

• 对于各种编程语言来说，函数就不一定是一等公民了。

• 在js中，函数就是一个普通的对象（可以通过 new Function()），我们可以把函数存储到变量、数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’)来构造一个新的函数。

ps: 之所以说函数式一等公民，是因为在js语言中，函数满足一等公民的特性：

• 函数可以存储在变量中
• 函数可以作为参数
• 函数可以作为返回值

把函数赋值给变量

let fn = function(){
	console.log('hello world');
}

fn();

函数作为参数

[1, 2, 3].map( item => item ** 2);

函数作为返回值

function getGreep() {
	const greepPre = 'hello ';
	return function(name) {
		console.log(`${greepPre}${name}`)
	}
}

let greep = getGreep();
greep('world');

为什么要学习函数是一等公民

函数是一等公民是我们学习高阶函数、柯里化等的基础。

高阶函数

什么是高阶函数

函数是可以接受并且返回任何类型的值。一个函数如果可以接受或返回一个甚至多个函数，它被叫做高阶函数。
就是说，一个函数可以满足下面任一特点，就可以称之为高阶函数：

• 可以接受一个函数作为参数
• 可以把函数作为返回值

函数作为参数

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

函数作为返回值

function getGreep() {
	const greepPre = 'hello ';
	return function(name) {
		console.log(`${greepPre}${name}`)
	}
}

let greep = getGreep();
greep('world');

使用高阶函数的意义

• 帮助我们屏蔽细节，只需要关注于目标
• 抽象通用的问题

常用的高阶函数

forEach、map、ilter、every、some、find、reduce、sort

闭包

什么是闭包

当一个函数内部存在另一个函数的作用域时，对当前函数进行操作。当内部函数从外部函数引用变量，这被称作闭包。
实际上，闭包是它可以记录并且访问它作用域外的变量，甚至当这个函数在不同的作用域被执行

function getGreep() {
	const greepPre = 'hello ';
	return function(name) {
		console.log(`${greepPre}${name}`)
	}
}

let greep = getGreep();
greep('world');

闭包的本质

函数在执行的时候会放到一个执行栈上，当函数执行完毕之后会从执行栈上被移除，但是堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员。

// 生成计算数字的多少次幂的函数
function makePower (power) {
	return function (x) {
	  return Math.pow(x, power);
	}
}
let power2 = makePower(2);
let power3 = makePower(3);
console.log(power2(4));
console.log(power3(4));

纯函数

什么是纯函数

相同的输入永远会得到相同的输出，而且没有任何可观察的副作用。

数组的 slice 和 splice 分别是：纯函数和不纯的函数

• slice 返回数组中的指定部分，不会改变原数组
• splice 对数组进行操作返回该数组，会改变原数组

let numbers = [1, 2, 3, 4, 5]
 // 纯函数
 numbers.slice(0, 3)
 // => [1, 2, 3]
 numbers.slice(0, 3)
 // => [1, 2, 3]
 numbers.slice(0, 3)
 // => [1, 2, 3]
 // 不纯的函数
 numbers.splice(0, 3)
 // => [1, 2, 3]
 numbers.splice(0, 3)
 // => [4, 5]
 numbers.splice(0, 3)
 // => []

纯函数的好处

• 可缓存: 因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来

const _ = require('lodash')
function getArea (r) {
 return Math.PI * r * r
}
let getAreaWithMemory = _.memoize(getArea)
console.log(getAreaWithMemory(4))

• 可测试: 纯函数让测试更方便
• 并行处理
• 在多线程环境下并行操作共享的内存数据很可能会出现意外情况
• 纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (Web Worker)

副作用

// 不纯的
let mini = 18
function checkAge (age) {
 return age >= mini
}
// 纯的(有硬编码，后续可以通过柯里化解决)
function checkAge (age) {
 let mini = 18
 return age >= mini
}

副作用让一个函数变的不纯(如上例)，纯函数的根据相同的输入返回相同的输出，如果函数依赖于外部的状态就无法保证输出相同，就会带来副作用。

副作用来源：

• 配置文件
• 数据库
• 获取用户的输入

所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制它们在可控范围内发生。

柯里化

如何进行柯里化

当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变），然后返回一个新的函数接收剩余的参数，返回结果。

function checkAge (age) {
 let min = 18
 return age >= min
}
// 普通纯函数
function checkAge (min, age) {
 return age >= min
}
checkAge(18, 24)
checkAge(18, 20)
checkAge(20, 30)
// 柯里化
function checkAge (min) {
 return function (age) {
  return age >= min
}
}
// ES6 写法
let checkAge = min => (age => age >= min)
let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)
checkAge18(24)
checkAge18(20)

柯里化函数

// 普通纯函数
function checkAge (min, age) {
 return age >= min
}

function curry (func) {
 return function curriedFn (...args) {
  // 判断实参和形参的个数
  if (args.length < func.length) {
   return function () {
    return curriedFn(...args.concat(Array.from(arguments)))
  }
 }
  // 实参和形参个数相同，调用 func，返回结果
  return func(...args)
 }
}

let checkAge18 = curry(checkAge)(18)
let checkAge20 = curry(checkAge)(20)
checkAge18(24)
checkAge18(20)

lodash 中的柯里化函数 _.curry(func)

• 功能：创建一个函数，该函数接收一个或多个 func 的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。
• 参数：需要柯里化的函数
• 返回值：柯里化后的函数

const _ = require('lodash')
// 要柯里化的函数
function getSum (a, b, c) {
 return a + b + c
}
// 柯里化后的函数
let curried = _.curry(getSum)
// 测试
curried(1, 2, 3)
curried(1)(2)(3)
curried(1, 2)(3)

总结

• 柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数
• 这是一种对函数参数的’缓存’
• 让函数变的更灵活，让函数的粒度更小
• 可以把多元函数转换成一元函数，可以组合使用函数产生强大的功能

函数组合

问题

• 纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))
• 获取数组的最后一个元素再转换成大写字母， _.toUpper(_.first(_.reverse(array)))

什么是函数组合

• 如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数，

fn = compose(f1, f2, f3)
b = fn(a

• 函数组合默认是从右到左执行

// 多函数组合
function compose (...fns) {
 return function (value) {
  return fns.reverse().reduce(function (acc, fn) {
   return fn(acc)
  }, value)
 }
}

const _ = require('lodash')
const toUpper = s => s.toUpperCase()
const reverse = arr => arr.reverse()
const first = arr => arr[0]
const f = compose(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))

lodash 中的组合函数

lodash 中组合函数 flow() 或者 flowRight()，他们都可以组合多个函数

• flow() 是从左到右运行
• flowRight() 是从右到左运行，使用的更多一些

const _ = require('lodash')
const toUpper = s => s.toUpperCase()
const reverse = arr => arr.reverse()
const first = arr => arr[0]
const f = _.flowRight(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))

函数组合的特点

函数的组合满足结合律（数学中的结合律）： 在 compose(f, g, h) 中，我们和可以把g和h组合，还可以把f和g组合，结果都是一样的。

// 结合律（associativity）
let f = compose(f, g, h)
let associative = compose(compose(f, g), h) == compose(f, compose(g, h))
// true

lodash/fp

lodash 的 fp 模块提供了实用的对函数式编程友好的方法

// lodash 模块
const _ = require('lodash')
_.map(['a', 'b', 'c'], _.toUpper)
// => ['A', 'B', 'C']
_.map(['a', 'b', 'c'])
// => ['a', 'b', 'c']
_.split('Hello World', ' ')
// lodash/fp 模块
const fp = require('lodash/fp')
fp.map(fp.toUpper, ['a', 'b', 'c'])
fp.map(fp.toUpper)(['a', 'b', 'c'])
fp.split(' ', 'Hello World')
fp.split(' ')('Hello World')

函子

函子是函数式编程里面最重要的数据类型，也是基本的运算单位和功能单位。

什么是函子

• 容器：包含值和值的变形关系(这个变形关系就是函数)
• 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运行一个函数对值进行处理(变形关系)

// 一个容器，包裹一个值
class Container {
 // of 静态方法，可以省略 new 关键字创建对象
 static of (value) {
  return new Container(value)
}
 constructor (value) {
  this._value = value
}
 // map 方法，传入变形关系，将容器里的每一个值映射到另一个容器
 map (fn) {
  return Container.of(fn(this._value))
}
}
// 测试
Container.of(3)
.map(x => x + 2)
.map(x => x * x)

• 函数式编程的运算不直接操作值，而是由函子完成
• 函子就是一个实现了 map 契约的对象
• 我们可以把函子想象成一个盒子，这个盒子里封装了一个值
• 想要处理盒子中的值，我们需要给盒子的 map 方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
• 最终 map 方法返回一个包含新值的盒子（函子）

MayBe 函子

• 我们在编程的过程中可能会遇到很多错误，需要对这些错误做相应的处理
• MayBe 函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围）

class MayBe {
 static of (value) {
	return new MayBe(value)
 }
 constructor (value) {
  this._value = value
 }
 // 如果对空值变形的话直接返回 值为 null 的函子
 map (fn) {
  return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
 }
 isNothing () {
  return this._value === null || this._value === undefined
 }
}

// 传入具体值
MayBe.of('Hello World')
.map(x => x.toUpperCase())
// 传入 null 的情况
MayBe.of(null)
.map(x => x.toUpperCase())
// => MayBe { _value: null }

Either 函子

• Either 两者中的任何一个，类似于 if…else…的处理
• 异常会让函数变的不纯，Either 函子可以用来做异常处理

class Left {
 static of (value) {
  return new Left(value)
 }
 constructor (value) {
  this._value = value
 }
 map (fn) {
  return this
 }
}

class Right {
 static of (value) {
  return new Right(value)
 }
 constructor (value) {
  this._value = value
 }
 map(fn) {
  return Right.of(fn(this._value))
 }
}

function parseJSON(json) {
 try {
  return Right.of(JSON.parse(json));
 } catch (e) {
  return Left.of({ error: e.message});
 }
}

let r = parseJSON('{ "name": "zs" }')
    .map(x => x.name.toUpperCase())
console.log(r)

IO 函子

• IO 函子中的 _value 是一个函数，这里是把函数作为值来处理
• IO 函子可以把不纯的动作存储到 _value 中，延迟执行这个不纯的操作(惰性执行)，包装当前的纯操作
• 把不纯的操作交给调用者来处理

const fp = require('lodash/fp')
class IO {
 static of (x) {
  return new IO(function () {
   return x
 })
}
 constructor (fn) {
  this._value = fn
 }
 map (fn) {
  // 把当前的 value 和 传入的 fn 组合成一个新的函数
  return new IO(fp.flowRight(fn, this._value))
 }
}
// 调用
let io = IO.of(process).map(p => p.execPath)
console.log(io._value())

Task 异步执行

folktale 一个标准的函数式编程库

const fs = require('fs');
const { task } = require('folktale/concurrency/task')

function readFile(filename) {
 return task(resolver => {
  fs.readFile(filename, 'utf-8', (err, data) => {
   if (err) resolver.reject(err)
   resolver.resolve(data)
  })
 })
}
// 调用 run 执行
readFile('package.json')
 .map(split('\n'))
 .map(find(x => x.includes('version')))
 .run().listen({
  onRejected: err => {
   console.log(err)
 },
  onResolved: value => {
   console.log(value)
 }
})

参考资料

• JavaScript 函数式编程初窥
• JavaScript 轻量级函数式编程
• 函数式编程入门教程