函数式编程理解入门

2021-01-05 本文已影响0人池鱼_故渊

函数式编程随着 react 的流行收到越来越多的关注
VUE3 也开始拥抱函数式编程
函数式编程可以抛弃 this
打包过程可以利用 tree-shaking 过滤无用的代码
方便测试方便并行处理
有很多库使用函数式编程： loadsh underscore ramda

函数式编程的概念

函数式编程可以认为是一种编程规范之一，我们经常听说的编程范式还有面向对象编程/面向过程编程

面向对象编程的思维方式：把现实生活中的事物抽象成程序世界的类和对象，通过封装/继承和多态来演示事物事件的联系

函数式编程的思维方式：把现实生活中的事物和事物之间的联系抽象到程序的世界

函数式编程的函数不是指程序中的的函数（方法），而是数学中的映射关系
相同的输入要有相同的输出
函数式编程用来表述数据之间的映射

// 非函数式
// 这是面向过程编程
let num1 = 2;
let num2 = 3;
let sum = num2 + num2;

// 函数式
function add(n1, n2) {
  return n1 + n2;
}
let sum = add(2, 3);

函数是一等公民

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

高阶函数

可以把函数作为参数传递
函数可以作为返回值

闭包

从外部的作用域，我们可以访问一个函数内的函数，一个函数内容返回一个函数，并且返回的函数可以访问上一层函数的变量

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

柯里化

// 模拟函数柯里化原理

function curry(func) {
  return function curried(...args) {
    // 判断实参和形参的个数 如果参数大于或者等于，那个直接执行下面的返回函数把参数传进去
    // 否则进入判断，把参数合并再传入函数中，
    if (args.length < func.length) {
      return function () {
        return curried(...args.concat(Array.from(arguments)));
      };
    }
    return func(...args);
  };
}

function getSum(a, b, c) {
  return a + b + c;
}

const curried = curry(getSum);
console.log(curried(1, 2, 3));
console.log(curried(1)(2, 3));

总结

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

函数组合

函数组合：如果一个函数要经过多个函数才能得带最终值，这个时候可以把中间的过程函数合并成一个函数
函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终的结果
函数组合默认的是从右向左执行

let fn = compose(f1, f2, f3);
let b = fn(a);
// 执行顺序 f3 f2 f1

// 函数组合示例

function compose(f, g) {
  return function (value) {
    return f(g(value));
  };
}
function reverse(array) {
  return array.reverse();
}

function first(array) {
  return array[0];
}
const last = compose(first, reverse);
console.log(last([1, 2, 3, 4])); // 4

// 模拟loadsh组合函数

function compose(...args) {
  return function (value) {
    return args.reverse().reduce(function (acc, fn) {
      return fn(acc);
    }, value);
  };
}
// 精简版
const compose = (...args) => (value) =>
  args.reverse().reduce((acc, fn) => fn(acc), fn);

函数组合要满足结合律

let a = compose(f, g, h);
let v = compose(compose(f, g), h) == compose(f, compose(g, h));
// 意思是我们可以把f和组合，也可以g 和 h组合 效果都是一样的

函数组合怎么调式

const log = (v) => {
  console.log(v);
  return v;
};

function compose(f, g) {
  return function (value) {
    return f(g(value));
  };
}
function reverse(array) {
  return array.reverse();
}

function first(array) {
  return array[0];
}
// log
const last = compose(first, log, reverse);
console.log(last([1, 2, 3, 4])); // 4

point Free

一种编码风格

不需要指明处理的数据
只需要合成运算过程
需要定义一些辅助的基本运算函数

// 代码示例
// world wild web ==> W.W.W
const fp = require("loadsh/fp");
const firstLetterToUpper = fp.flowRight(
  fp.join("."),
  fp.map(fp.first),
  fp.map(fp.toUpper),
  fp.split("")
);
console.log(firstLetterToUpper("world wild web"));

函子

函子的作用就是：如何把函数的副作用控制在可控范围内、异常处理、异步操作等
函子相关文章推荐阅读 https://www.jianshu.com/p/afbce25c18fb