docs: 新增函数式编程篇

Author: muzhidong

src/javascript/函数式编程篇.md

@@ -0,0 +1,224 @@
+---
+title: 函数式编程篇
+tags: 
+- ECMAScript
+---
+
+# 函数式编程
+函数是指数学意义上的映射关系，而函数式编程是函数映射关系的抽象
+
+## 纯函数
+- 特点
+  - 相同输入相同输出。即函数返回值仅取决于函数参数值，也就是说，函数调用的结果不依赖于调用的时间和位置
+  - 没有副作用。在计算机科学中，函数的副作用是指当调用函数时，对外部产生附加的影响
+> 纯函数是独立封闭的，既不依赖外部状态，也不修改外部状态
+
+## 高阶函数
+一个以函数作为函数参数或函数返回值的函数
+### 柯里化函数（偏函数）
+- 概念：采用递归降解方式实现多参函数，即只传递给函数部分参数调用，让它返回一个函数处理剩下参数
+- 好处：提高多参函数的复用性
+- 劣势：函数性能差，执行效率低。箭头函数、bind函数均优于柯里化函数
+- 示例
+```js
+// 实现一：需要对每个函数进行封装，支持调用时不带参则表明是返回结果
+function sum(...rest) {
+  return function(...rest2) {
+    if(rest2.length === 0) {
+      return rest.reduce((s,i) => s + i, 0)
+    } 
+    return sum(...rest, ...rest2)
+  }
+}
+console.log(sum(2,3,4,5,6,7)())
+console.log(sum(2)(3,4)(5)(6,7)())
+
+// 实现二：支持两次调用的柯里化函数
+function add(num1,num2,num3) {
+  return num1 + num2 + num3;
+}
+function curry2(fn) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return function() {
+    var innerArgs = Array.prototype.slice.call(arguments);
+    var finalArgs = args.concat(innerArgs);
+    return fn.apply(null, finalArgs);
+  }
+}
+var r1 = curry2(add, 50, 1, 2);
+var r2 = curry2(add, 50)(1, 2);
+var r3 = curry2(add, 50, 1)(2);
+
+// 实现三：无需对每个函数进行封装，不支持无限调用，超出函数参数长度，再调用报错
+function curry(fn) {
+  const len = fn.length
+  return function wrapper(...rest) {
+    if(rest.length < len) {
+      return function(...rest2) {
+        return wrapper(...rest, ...rest2)
+      }
+    } 
+    return fn(...rest)
+  }
+}
+curry(function(a,b,c) { return a + b + c })(1)(2)(3)
+
+// [✅]实现四：支持无限次调用的柯里化函数。超出函数参数长度，再调用会报错
+function curry(fn, ...args) { 
+  return args.length >= fn.length? fn(...args) : function (...args2) { 
+    return curry(fn, ...args, ...args2) 
+  }
+} 
+var r4 = curry(add)(50)(1)(2);
+
+// 实现五：无需对每个函数进行封装，支持调用时不带参则表明是返回结果
+function curry(fn) {
+  let _arg = []
+  return function wrapper(...rest) {
+    if(rest.length !== 0) {
+      _arg.push(...rest)
+      return wrapper
+    } 
+    return fn(..._arg)
+  }
+}
+curry(function(a,b,c) { return a + b + c })(1)(2)(3)(4)() // 6
+curry(function(a,b,c) { return a + b + c })(2,3)(5)(3)(4)() // 10
+
+// 应用
+const addEvent = (function(){
+  if(window.addEventListener) {
+    return function(el, type, fn, isCapture) {
+      el.addEventListener(type, fn, isCapture)
+    }
+  } else if(window.attachEvent) {
+    return function(el, type, fn) {
+      // el.attachEvent(`on${type.replace(/(?<=\b)[a-z]{1}/, val => val.toUpperCase())}`, fn)
+      el.attachEvent(`on${type}`, fn)
+    }
+  }
+})()
+
+const rafThrottle = function(fn) {
+  let isLocked = false
+  const raf = window.requestAnimationFrame || function(cb) {
+    window.setTimeout(cb, 1000 / 60)
+  }
+  return function() {
+    const context = this
+    const _args = arguments
+    if(isLocked) return
+    isLocked = true
+    raf(function(){
+      isLocked = false
+      fn.apply(context, _args)
+    })
+  }
+}
+```
+
+### 一次性函数
+- 只执行一次的函数
+```js
+function once(fn) {
+  let called = false
+  return function() {
+    if(!called) {
+      called = true
+      return fn.apply(this, arguments)
+    }
+  }
+}
+```
+
+### 惰性函数
+- 只在第一次调用时执行，之后的调用都返回第一次调用的结果
+```js
+function lazy(fn) {
+  let called = false
+  let result
+  return function() {
+    if(!called) {
+      called = true
+      result = fn.apply(this, arguments)
+    }
+    return result
+  }
+}
+```
+
+### 记忆函数
+```js
+function memo(fn) {
+  const cache = {}
+  return (arg) => cache[arg] || (cache[arg] = fn(arg))
+}
+```
+
+### 函数组合
+- 将多个函数组合成一个函数，从右向左执行，形如`fn(fn2(fn3()))`
+
+## 函子Functor
+效果类似级联函数，即链式调用，形如`a().b().c();`
+```javascript
+// 容器：包含值和值的变形关系，这个变形关系就是函数
+// 函子：一个特殊的容器，通过一个普通对象来实现。该对象具有map方法，该方法可以运行一个函数对值进行处理
+
+// Pointed函子 
+class Container {
+  static of(value) {
+    return new Container(value)
+  }
+
+  constructor(value) {
+    this._value = value
+  }
+
+  map(fn) {
+    return Container.of(fn(this._value))
+  }
+
+  returnValue() {
+    return this._value
+  }
+
+  // TODO:待实现
+  // maybe函子：空值处理
+  // Either函子：异常处理
+  // IO函子：副作用处理
+  // Task函子：异步执行
+  // Monad函子：IO函子多层嵌套
+}
+Container.of(1).map(x => x + 1).map(x => x * x).returnValue() // 4
+
+// Monad函子
+class Result {
+  constructor(ok, err) {
+    this.ok = ok
+    this.err = err
+  }
+
+  isOk() {
+    return [null, undefined].includes(this.err) 
+  }
+
+  map(fn) {
+    return this.isOk()? Result.of(fn(this.ok), this.err) : Result.of(this.ok, fn(this.err))
+  }
+
+  join() {
+    return this.isOk()? this.ok : this.err
+  }
+
+  flatMap(fn) {
+    return this.map(fn).join()
+  }
+}
+Result.of = function(ok, err) {
+  return new Result(ok, err)
+}
+```
+
+## 一类函数
+
+## Lambda函数