函数式编程入门

一、 面向过程编程、面向对象编程、函数式编程概要

1.命令式编程：即过程式编程。强调怎么做。

2.面向对象编程： 通过对一类事物的抽象，即class，其中对象是基本单元。常用的是继承方式。 平时会看到生命周期、链式调用。比如react中的类组件。

3.函数式编程：即声明式编程。强调做什么。更加符合自然语言。常用的是组合的方式。平时看到的数据驱动（响应式编程）。比如react的函数组件+hooks。

二、函数式编程特性

1.纯函数：相同的输入，永远会得到相同的输出。即也就是数学函数。

具体理解两点： 没有副作用（数据不可变）： 不修改全局变量，不修改入参。最常见的副作用就是随意操纵外部变量，由于js对象是引用类型。不依赖外部状态（无状态）： 函数的的运行结果不依赖全局变量，this 指针，IO 操作等。如下：

// 非纯函数
const curUser = {
  name: 'Peter'
}

const saySth = str => curUser.name + ': ' + str; // 引用了全局变量
const changeName = (obj, name) => obj.name = name; // 修改了输入参数
changeName(curUser, 'Jay'); // { name: 'Jay' }
saySth('hello!'); // Jay: hello!

// 纯函数
const curUser = {
  name: 'Peter'
}


const saySth = (user, str) => user.name + ': ' + str; // 不依赖外部变量
const changeName = (user, name) => ({...user, name }); // 未修改外部变量
const newUser = changeName(curUser, 'Jay'); // { name: 'Jay' }
saySth(curUser, 'hello!'); // Peter: hello!

2.通过事例进一步加深对纯函数的理解

let arr = [1,2,3];

arr.slice(0,3); //是纯函数

arr.splice(0,3); //不是纯函数，对外有影响

function add(x,y){ // 是纯函数
  return x + y // 无状态，无副作用，无关时序，幂等
} // 输入参数确定，输出结果是唯一确定

let count = 0; //不是纯函数
function addCount(){ //输出不确定
  count++ // 有副作用
}

function random(min,max){ // 不是纯函数
  return Math.floor(Math.radom() * ( max - min)) + min // 输出不确定
} // 但注意它没有副作用

function setColor(el,color){ //不是纯函数
  el.style.color = color ; //直接操作了DOM，对外有副作用
}

 

3.强调使用纯函数的意义是什么，也就是说函数式编程的特性是什么。

 

更少的 Bug：使用纯函数意味着你的函数中不存在指向不明的 this，不存在对全局变量的引用，不存在对参数的修改，这些共享状态往往是绝大多数 bug 的源头。

可缓存性：因为相同的输入总是可以返回相同的输出，因此，我们可以提前缓存函数的执行结果。

自文档化：由于纯函数没有副作用，所以其依赖很明确，因此更易于观察和理解。配合类型签名（一种注释）更清晰。

便于测试和优化： 相同的输入永远会返回相同的结果，因此我们可以轻松断言函数的执行结果，同时也可以保证函数的优化不会影响其他代码的执行。

 

4.在实际的react开发中，也会看到纯函数的应用。

三、函数式编程理解

1.数学函数和范畴学

 

数学函数：在数学上，学习一次函数、二次函数等一个特点就是输入x通过函数都会返回有且只有一个输出值y。这里的函数充当映射关系的桥梁。这也正是函数式编程要求必须是纯的原因

范畴:包括值 和 值的变形关系（函数）。即范畴好似一个容器包含这两样东西。

2.js中的函数

     

       JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可以使用值的地方，就能使用函数。比如，可以把函数赋值给变量和对象的属性，也可以当作参数传入其他函数，或者作为函数的结果返回。函数只是一个可以执行的值，此外并无特殊之处。由于函数与其他数据类型地位平等，所以在 JavaScript 语言中又称函数为第一等公民。

       

      包括 普通函数 和 剪头函数 。剪头函数（简洁同时this指向定义的时候已经确定）也是函数式编程中的一个使用体现。

3.命令式与声明式

 前面提到说函数式编程更加符合自然语言，就是因为其用了声明式。举个例子对比一下

// 命令式-----强调怎么做
var makes = [];
for (i = 0; i < cars.length; i++) {
  makes.push(cars[i].make);
}

// 声明式-----做什么
var makes = cars.map(function(car){ return car.make; });

4.高阶函数

   

 高阶函数：参数或返回值为函数的函数。比如可以用于拦截和监控，比如防抖和节流的实际开发中的应用（下面的例子是不考虑this的情况）

 

 防抖的例子：在time的时间内，你连续点击几次，会先清除计时器clearTimeout,当你停下来的时候，根据最后一次点击等待time时间执行func

function debounce(func, time) {
  let timeout = null;
  return function() {
    if (timeout) {
      clearTimeout(timeout)
    }

    timeout = setTimeout(() => {
      timeout = null;
      func.apply(null, arguments) // 假如不考虑this
    }, time);
  }
}

 

 节流的例子：if语句的执行，取决与setTimeout中对flag值的恢复。time时间到了，就执行一次。这个里面setTimeout（）和 func（），一个在前，一个在后，但是执行顺序并不是同步执行。这里的setTimeout是异步的。前面的《理解JS异步》有介绍。

function throtle(func, time) {
  let flag = true;
  return function () {
    if (flag) {
      flag = false;
      setTimeout(() => {
        flag = true
      }, time);

      func.apply(null, arguments) // 假如不考虑this
    }
  }

 

所以呢，高阶函数的这两个例子也就是声明式的，可以当做工具函数，我们用到的时候调用这两个函数就行。因此这样的函数的名字起的语义化就由为重要。

5.纯函数

   

   再次提起纯函数：没有副作用（不修改外部变量）+无状态（不依赖外部变量）。具体的跳会前面的介绍查看。

---

当了解完函数式编程的基本概念和要点后，然而让我们利用函数式编程可能还无法下手。这时候我们用上几个好的方法规范自己编程更加高效。所以下面的6-11可以说成都是编写函数式程序的方法or工具。

6.函数柯里化（curry）

 

  a. 什么是柯里化

       

 柯里化指的是将一个多参数的函数拆分成一系列单参数函数。

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

add(1, 2) // 3

// 柯里化之后----ES5写法
function add(x) {
  return function (y) {
    return x + y;
  };
}

add(1)(2) // 3

// 柯里化之后----ES6的写法
const add = x => y => x + y;

  b. 柯里化的应用

  eg1：获取数组对象的某个属性用柯里化优化

比如我们有这样一段数据：
let person = [{name: 'kevin'}, {name: 'daisy'}]；

如果我们要获取所有的 name 值，我们可以这样做
let name = person.map(function (item) {
    return item.name;
})

不过如果我们有 curry 函数:
let prop = curry(function (key, obj) {
    return obj[key]
});

let name = person.map(prop('name'))

我们为了获取 name 属性还要再编写一个 prop 函数，是不是又麻烦了些？

但是要注意，prop 函数编写一次后，以后可以多次使用，实际上代码从原本的三行精简成了一行，而且你看代码是不是更加易懂了。

eg2：高级柯里化，可以看看 ramda库中提供的curry，它提供的好像和我们上面提到的概念不一致，原因参数不需要一次只传入一个 &  占位符值R.__  _表示R.__，表示还未传入的参数 。所以可以称作为高级柯里化

const addFourNumbers = (a, b, c, d) => a + b + c + d;

const g = R.curry(addFourNumbers);

// 每次都单参数也可以
g(1)(2)(3)
// 多参数也可以
g(1)(2, 3)
g(1, 2)(3)
g(1, 2, 3)
g(_, 2, 3)(1)
g(_, _, 3)(1)(2)
g(_, _, 3)(1, 2)
g(_, 2)(1)(3)
g(_, 2)(1, 3)
g(_, 2)(_, 3)(1)

  c. 柯里化的实现

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) { // 通过函数的length属性，来获取函数的形参个数
      return func.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  }
}

7.偏函数

a.偏函数是什么

偏函数：固定任意元参数，在平时开发中用到的如下：

// 假设一个通用的请求 API

const request = (type, url, options) => ...

// GET 请求

request('GET', 'http://a....')
request('GET', 'http://b....')
request('GET', 'http://c....')

// POST 请求
request('POST', 'http://....')


// 但是通过部分调用后，我们可以抽出特定 type 的 request
const get = request('GET');
get('http://', {..})

b.柯里化与偏函数的区别：

• 柯里化是将一个多参数函数转换成多个单参数函数，也就是将一个 n 元函数转换成 n 个一元函数。
• 偏函数则是固定一个函数的一个或者多个参数，也就是将一个 n 元函数转换成一个 n - x 元函数。

c.偏函数的实现

function partial(fn) {
  let args = [].slice.call(arguments, 1);
  return function () {
    const newArgs = args.concat([].slice.call(arguments));
    return fn.apply(this, newArgs);
  };
}

8.惰性函数

 

a. 惰性函数是什么

惰性函数解决每次都要进行判断的这个问题,解决办法是重写函数.

 

eg:我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意是首次。

// 普通方法 : 一是污染了全局变量，二是每次调用 foo 的时候都需要进行一次判断
let t;
function foo() {
    if (t) return t;
    t = new Date()
    return t;
}

// 闭包 : 没有解决调用时都必须进行一次判断的问题
let foo = (function() {
    let t;
    return function() {
        if (t) return t;
        t = new Date();
        return t;
    }
})();

// 函数对象: 依旧没有解决调用时都必须进行一次判断的问题
function foo() {
    if (foo.t) return foo.t;
    foo.t = new Date();
    return foo.t;
}

// 惰性函数 : 以上两个存在问题都解决了 （只需要判断一次）
let foo = function() {
    let t = new Date();
    // 重写 foo函数
    foo = function() {
        return t;
    };
    return foo();
};

b.惰性函数的应用

 

eg:DOM 事件添加中，为了兼容现代浏览器和 IE 浏览器，我们需要对浏览器环境进行一次判断。

// 普通写法----问题在于我们每当使用一次 addEvent 时都会进行一次判断
function addEvent (type, el, fn) {
    if (window.addEventListener) {
        el.addEventListener(type, fn, false);
    }
    else if(window.attachEvent){
        el.attachEvent('on' + type, fn);
    }
}

// 惰性函数写法----判断一次
function addEvent (type, el, fn) {
    if (window.addEventListener) {
        addEvent = function (type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent){
        addEvent = function (type, el, fn) {
            el.attachEvent('on' + type, fn);
        }
    }
    addEvent(type, el, fn)；
}

// 或者使用闭包-----判断一次
let addEvent = (function(){
    if (window.addEventListener) {
        return function (type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent){
        return function (type, el, fn) {
            el.attachEvent('on' + type, fn);
        }
    }
})();

9.函数组合

a.什么是函数组合

函数组合将多个函数合成一个函数，同时也遵循数学上的结合律。

const compose = (f, g) => x => f(g(x))；

const f = x => x + 1;
const g = x => x * 2;

const fg = compose(f, g);
fg(1) //3

// 函数组合满足结合律
compose(f, compose(g, t)) = compose(compose(f, g), t) = f(g(t(x)))；

b. 函数组合的应用

eg:我们需要写一个函数，输入 'kevin'，返回 'HELLO, KEVIN'

// 使用组合前
let toUpperCase = function(x) { return x.toUpperCase(); };
let hello = function(x) { return 'HELLO, ' + x; };
let greet = function(x){
    return hello(toUpperCase(x));
};
greet('kevin');

// 使用组合后----代码从右向左运行
let compose = function(f,g) {
    return function(x) {
        return f(g(x));
    };
};
let greet = compose(hello, toUpperCase);
greet('kevin');

 

eg：   比如将数组最后一个元素大写，假设 log, head，reverse，toUpperCase 函数存在

const upperLastItem = compose(log, toUpperCase, head, reverse);

// 也可以如下组合：

// 组合方式 1
const last = compose(head, reverse);
const shout = compose(log, toUpperCase);
const shoutLast = compose(shout, last);

// 组合方式 2
const lastUppder = compose(toUpperCase, head, reverse);
const logLastUpper = compose(log, lastUppder);

c. 函数组合的优点

   

通过上面的例子看出，不同的组合方式，我们可以轻易组合出其他常用函数，让我们的代码更具表现力。

d. 函数组合的实现

// 从右向左结合
const compose = (...fns) => (...args) => fns.reduceRight((val, fn) => fn.apply(null, [].concat(val)), args);

e.pointfree是什么

pointfree 指的是函数无须提及将要操作的数据是什么样的。pointfree 模式能够帮助我们减少不必要的命名，让代码保持简洁和通用

// 非 pointfree，因为提到了数据：name
let initials = function (name) {
  return name.split(' ').map(compose(toUpperCase, head)).join('. ');
};

// pointfree
let initials = compose(join('. '), map(compose(toUpperCase, head)), split(' '));

initials("hunter stockton thompson");

10.函数记忆

a. 函数记忆是什么

   

函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。

function add(a, b) {
    return a + b;
}

// 假设 memorize 可以实现函数记忆
let memorizedAdd = memoize(add);

memorizedAdd(1, 2) // 3
memorizedAdd(1, 2) // 相同的参数，第二次调用时，从缓存中取出数据，而非重新计算一次，这样可以优化性能

b. 函数记忆的应用

 eg:  以斐波那契数列为例（如果需要大量重复的计算，或者大量计算又依赖于之前的结果，便可以考虑使用函数记忆）

// 未使用前
let count = 0;
let fibonacci = function(n){
    count++;
    return n < 2? n : fibonacci(n-1) + fibonacci(n-2);
};
for (let i = 0; i <= 10; i++){
    fibonacci(i)
}
console.log(count) // 453

// 使用函数记忆后
let count = 0;
let fibonacci = function(n) {
    count++;
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
};

fibonacci = memorize(fibonacci);

for (let i = 0; i <= 10; i++) {
    fibonacci(i)
}
console.log(count) // 12

c. 函数记忆的实现

function memorize(fn) {
  const cache = Object.create(null); // 存储缓存数据的对象
  return function (...args) {
    const _args = JSON.stringify(args);
    return cache[_args] || (cache[_args] = fn.apply(fn, args));
  };
};

11.函子

Functor函子；Maybe函子；Monad函子；基础概念的理解参考此博文。

最后，更多学习可以结合Ramda库。