JS之函数式编程

函数式编程的思想手写一些常用api方法

• 手写forEach

const forEach = (arr, fn) => {
  for (let i of arr) {
    fn(i)
  }
}

• 手写filter

const filter = (arr, fn) => {
  let lsArr = []
  for(let i of arr) {
    if (fn[i]) lsArr.push(i)
  }
  return lsArr
}

• 手写once (比如支付，点击一次只会执行一次函数--利用闭包)

const once = (fn) => {
  let status = true
  return function() {
    if (status) {
      status = false
      return fn.apply(this, arguments)
    }
  }
}
let pay = once(function(m) {
  console.log(`这是付的钱${m}`)
})
pay(1)

• 手写map

function map (arr, fn) {
  let lsArr = []
  for (var i = 0; i < arr.length; i++) {
    lsArr.push(fn(arr[i]))
  }
  return lsArr
}

• 手写every(只要有一个不匹配就返回false)

const every = (arr, fn) => {
  let status = true
  for (let i of arr) {
    status = fn(i)
    if (!status) break
  }
  return status
}

• 手写some(只要有一个匹配到就返回true)

const some = (arr, fn) => {
  let status = false
  for (let i of arr) {
    status = fn(i)
    if (status) break
  }
  return status
}

• 手写lodash的记忆函数memoize(对执行同一个的纯函数做缓存处理)

const memoize = (fn) => {
  let lsObj = {}
  return function() {
    let key = JSON.stringify(fn)
    lsObj[key] = lsObj[key] || fn.apply(fn, arguments)
    return lsObj[key]
  }
}

• 纯函数：对同一个函数多次执行，输出的结果相同

  • 副作用：比如在函数中用到了全局变量，或者是配置文件，数据库，用户输入等，都降低方法的可重用性，同时也会带来不安全的隐患
  • 同时，副作用不可避免

• 闭包：在另一个作用域可以调用函数内部作用域的属性

  本质： 函数在执行时会被放到一个执行栈上，函数执行完毕会从执行栈上移除，但是如果存在外部引用，那么堆上的作用域成员就不会别释放，所以闭包的过程中内部函数依旧可以访问外部函数的成员

对柯里化的一些理解

一等公民

• 函数也是一个对象，我们可以把函数作为一个值去处理，也就是高阶函数

柯里化

• 柯里化概念：当一个函数有多个参数的时候，我们可以对其进行改造，可以只接受部分参数，然后return一个新函数，去接收剩余的参数，然后在返回结果，这就是函数柯里化

function checkAge(min) {
  return function(age) {
    return age >=min
  }
}
let checkAge18 = checkAge(18)
checkAge18(20) // 此时min基数为18，age为20
// 改造
const checkAge = min => age => age >= min

lodash中curry的使用（lodash中的柯里化函数）

• curry的基本使用

可以传入一个纯函数，然后如果传入的参数是这个纯函数的所有参数，直接执行这个函数，如果传入的不是全部参数，则返回该函数并等待接收剩下的参数

const getSum = (a, b, c) => return a + b + c
const _ = require('lodash')
const curried = _.curry(getSum)
curried(1, 2, 3) // 6
curried(1, 2)(3) // 6
curried(1)(2, 3) // 6

手写lodash中的curry

const curry = (fn) => {
  // 通过展开运算符...args，来将传入的参数展开，那么args也就是放着所有的参数的数组
  return function curriedFun(...args) {
		//可以通过形参fn.length 来拿到fn函数的形参长度值
    if (args.length < fn.length) {
      // 传入的参数不全，返回一个新函数，直至传入的该函数的全部参数
      return function() {
				return curriedFun(...args.concat(Array.from(arguments)))
      }
    }
    // 此时，传入的参数是所有参数
    return fn(...args)
	}
}

• 总结

  • 柯里化可以让我们生成一个拥有固定参数的新函数
  • 相当于对函数进行了一次缓存
  • 降低了函数的粒度
  • 将多元函数转换成一元函数

• 案例1（字符串的match方法，正则表达式可能是不经常换的，所以可以进行柯里化处理）

''.match(/s+/g)
const match = _.curry(function(reg, str) {
  return str.match(reg)
})
haveSpace = match(/s+/g)
hanvSpace('') // 也就实现了第一行的一个重用性封装

• 案例2（数组的过滤方法，过滤规则函数可能不是经常换的）

const filter = _.curry(function(arr, fn) {
  return arrr.filter(fn)
})
const filterSpace = filter(haveSpace)

函数组合以及函子

函数组合（compose）

• 如果一个函数的执行要经过多个函数的处理才能得到最终结果，可以把中间的多个函数组合成一个函数
  • 也就是把数据管道从一大拆多小
  • 函数组合默认是从右往左执行的

function reverse(arr) {
  return _.reverse(arr)
}
function first(arr) {
  return arr[0]
}
// 将reverse函数和first函数组合起来
function compose(a, b) {
  return function(value) {
    return a(b(value))
  }
}

const c = compose(first, reverse)
console.log(c([1, 2, 3, 4])) // 输出结果： 4

• lodash提供了两个组合函数
  • flowRight (从右往左执行函数)
  • flow (从左往右执行函数)
• 手写组合函数

const compose = (...args) => (val) => args.reverse().reduce((prev, fn) => fn(prev), val)

组合函数的结合律

const one = _.flowRight(_.toUpper, _.first, _.reverse)
const two = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
const three = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))

• 案例一 "HELLO WORLD" -> "hello-world"

// 因为flowRight只能传接受一个参数的函数，故给其柯里化， 下面同此
const split = _.curry((sep, str) => _.split(str, sep) 
const map = _.curry((fn, arr) => _.map(arr, fn))
const join = _.curry((sep, arr) => _.join(arr, sep))
const log = _.curry((tag, v) => {
  console.log(tab, v)
  return v
})
const c = _.flowRight(join('-'), log('map后'), map(_.toLower), log('map前'), split(' '))

lodash中fp模块

• 因lodash中的像map,split,join等还需要我们额外柯里化一下，所以可以使用lodash提供的fp模块

const fp = require('lodash/fp')
const c = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
console.log(c("HELLO WORLD")) // 输出与案例一相同

fp模块的map和lodash普通的_.map的区别

• lodash中_.map需要传入的参数为arr， fn， fn接到的参数是arr的每一个值，索引，arr本身，所以在假如把数组中的所有数字字符串变数组时就会出现问题

const a = ['1', '2', '3']
console.log(_.map(a, parseInt))
// 会输出[1, NAN, NAN]
/*
	因为在这里parseInt接到的参数是
	parseInt('1', 0, arr)	
	parseInt('2', 1, arr)
	parseInt('3', 2, arr)
	parseInt可以接收两个参数，第一个参数是要操作的值，第二个参数是操作成几进制
	所以数组中第二个数转变成1进制，没有，则为NAN,
*/

• fp中的map则是第一个参数为fn，第二个参数为arr，所以fn接收的就是arr里每个值

const a = ["1", "2", "3"]
console.log(fp.map(parseInt, a))
// 输出[1, 2, 3]

point free

• point free也就是函数组合compose
• 案例

const fp = require('lodash/fp')
const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.toUpper, fp.first)), fp.split(' '), fp.replace(/s+/g, ' '))
console.log(firstLetterToUpper("HELLO  WORLD WWW"))

函子（functor）

• 函子也就是functor，它是一个容器，也就是一个对象
• 主要是为了处理副作用
• 函子是一个具有map方法的一个对象，在函子里有一个要维护的值，但是这个值不对外公布，如果要对这个值进行处理的话，需要调用map方法，map方法接收一个处理值的函数，执行完毕返回一个新的函子，也就实现了链式调用

class Container {
  // 定义静态方法可以直接访问
  static of(value) {
    return new Container(value)
	}
  constructor(value) {
    this._value = value
	}
  map(fn) {
    return Container.of(fn(this._value)
	}
}
let r = Container.of(5).map(x => x + 2)  // 此时函子（容器）中this._value = 7

总结

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

MayBe函子

• 如上函子，当我们传入一个null或者是undefined，此时我们在map中另其做一些操作，比如xx.toUpperCase()就会出现报错，所以我们可以采用MayBe函子的形式来进行处理

class MayBe {
	static of(value) {
    return new MayBe(value)
  }
  constructor(value) {
    this._value = value
  }
  map(fn) {
    return this.isNothing ? MayBe.of(null) : MayBe.of(fn(this._value))
  }
	isNothing() {
    return this._value === null || this._value === undefined
	}
}	

但是这样如果多个地方返回undefined或者是null的话就无法准确定位到是哪返回的

Either函子

• Either函子更像是我们的if...else...
• 通过try catch以及定义两个函子的方式来进行对的时候执行Right，错误的时候抛出到Left函子

class Left {
  static of (value) {
    return new Left(value)
  }
  constructor(value) {
    this._value = value
  }
  map() {
    return this
  }
}
class Right {
  static of (value) {
    return new Right(value)
  }
  constructor(value) {
    this._value = value
  }
  map(fn) {
    return Right.of(fn(this._value))
  }
}
// 测试定义一个函数
const parseJSON = (str) => {
  try {
    // 传入参数正确时会走Right函子
		return Right.of(JSON.parse(str))
  } catch (err) {
    // 反之传入参数不正确走Left函子
    return Left.of({ error: err.message })
  }
}

IO函子

• IO函子中的_value是一个函数，把函数作为值来处理
• 这样，就可以把不纯的函数存储到_value直接OMG，延迟执行这个函数（惰性执行）
• 把不纯的函数交给调用者执行

const fp = require('lodash/fp')
class IO {
  // 再of静态方法中传入一个函数，但是还是为了拿到一个值
  static of (x) {
    return new IO(function() {
			return x
    })
	}
  constructor(fn) {
    this._value = fn
  }
  // 调用map，返回一个新的IO函子，并将this._value和传入map的参数合成一个函数
  map(fn) {
    return new IO(fp.flowRight(fn, this._value))
	}
}

folktale

• folktale 是一个标准的函数式编程库
• 提供了像compose，curry的函数处理
• 提供了MayBe, Task, Either等函子

folktale中和lodash中相似的功能

• compose - flowRight (这个基本一样)

const { toUpper, first, flowRight } = require('lodash/fp')
const { compose } = require('folktale/core/lambda')
let f = compose(toUpper, first)
let lF = flowRight(toUpper, first)
console.log(f(['hello', 'world']))
console.log(lF(['hello', 'world']))

• 两边curry的区别

const { toUpper, first, curry } = require('lodash/fp')
const { curry } = require('folktale/core/lambda')
// 第一个参数为参数的个数
let f = curry(2, (x, y) => x + y)
let lF = curry((x, y) => x + y)

Task函子

Pointed函子

• 这个函子也就是前面在普通函子中定义的of静态方法，主要是通过of方法来把值放到上下文Context中，也就是把值放到容器中，然后再通过map来进行处理

Monad函子