此文要用到的库和模块:

1: fs: node中用来处理文件的模块
2: lodash库中的fp模块及lodash库的多个函数
3: folktale库中的: compose及task模块
注: 这里有个好东西: nodemon命令, 全局安装,用来取代node命令, 它可以watch磁盘文件并在文件有改变时执行js文件.

一: 高阶函数

1: 函数作为参数

  1. // forEach模拟实现
  2. const arr = [2, 3, 4, 5, 6, 7];
  4. const forEach = (array, fn) => {
  5.   for (let i = 0, len = array.length; i < len; i++) {
  6.     fn(array[i]);
  7.   }
  8. }
  9. // test forEach
  10. forEach(arr, item => {
  11.   //依次打印 4 6 8 10 12 14
  12.   console.log(item * 2)
  13. })
  15. // filter模拟实现
  16. const filter = (array, fn) => {
  17.   let result = [];
  18.   for (let i = 0, len = array.length; i < len; i++) {
  19.     if (fn(array[i])) {
  20.       result.push(array[i])
  21.     }
  22.   }
  23.   return result;
  24. }
  25. // test filter
  26. const dealData = data => data % 2 === 0;
  27. const filterResult = filter(arr, dealData);
  28. console.log(filterResult); // [ 2, 4, 6 ]
  30. // map的模式实现
  31. const map = (array, fn) => {
  32.   let result = [];
  33.   for (let i = 0, len = array.length; i < len; i++) {
  34.     result.push(fn(array[i])) ;
  35.   }
  36.   return result;
  37. }
  38. // test map
  39. const result3 = map(arr, item => item * 3);
  40. console.log("myself map:",result3); // myself map: [ 6, 9, 12, 15, 18, 21 ]
  42. // some的模拟实现
  43. const some = (array, fn) => {
  44.   let result = false;
  45.   for (let i = 0, len = array.length; i < len; i++) {
  46.     if (fn(array[i])) {
  47.       result = true;
  48.       break;
  49.     }
  50.   }
  51.   return result;
  52. };
  53. // test some
  54. const someTest = data => data > 10;
  55. const someResult = some(arr, someTest);
  56. console.log("test some:",someResult, "array:", arr); // test some: false array: [ 2, 3, 4, 5, 6, 7 ]
  58. // every的模拟实现
  59. const every = (array, fn) => {
  60.   let result = true;
  61.   for (let i = 0, len = array.length; i < len; i++) {
  62.     if (!fn(array[i])) {
  63.       result = false;
  64.       break;
  65.     }
  66.   }
  67.   return result;
  68. }
  69. // test every
  70. const everyTest = data => data > 1;
  71. const everyResult = every(arr, everyTest);
  72. console.log("test every:",everyResult, "array:", arr); // test every: true array: [ 2, 3, 4, 5, 6, 7 ]

2: 函数作为返回值

  1. // 执行一次的函数
  2. function once(fn){
  3.   let done = true;
  4.   return function() {
  5.     if (done) {
  6.       done = false;
  7.       return fn.apply(this, arguments);
  8.     }
  9.   }
  10. }
  11. // test once
  12. let pay = once(function (data){
  13.   console.log(`once test: ${data}`);
  14. });
  15. // 只打印一次: once test: 23
  16. pay(23)
  17. pay(24)
  18. pay(25)
  20. // 缓存函数
  21. function memoize(fn) {
  22.   const cache = {};
  23.   return function() {
  24.     let key = JSON.stringify(arguments);
  25.     return cache[key] ? cache[key] : fn.apply(fn, arguments)
  26.   }
  27. }
  28. function getArea(r) {
  29.   return Math.PI * r * r;
  30. }
  31. // test
  32. const memoizeTest = memoize(getArea)
  33. console.log(memoizeTest(5)) // 78.53981633974483
  34. console.log(memoizeTest(5)) // 78.53981633974483
  35. console.log(memoizeTest(5)) // 78.53981633974483

二: 函数柯里化

定义: 函数式编程中的重要概念,就是把一个多参数函数转化为单参数函数.
使用场景: 思考这样一个问题: 当我们调用一个函数的时候,可能要传递四五个参数,这时候让人头疼的一件事就是查看这个函数的每个参数是什么意思, 如果我们把这个函数转化为只传递一个参数, 一个函数只做一件事,这样是不是可以最大成大的复用这个函数呢.

  1. // lodash中的curry
  2. function getSum(a, b, c) {
  3.   return a + b + c;
  4. }
  5. const curryResult = _.curry(getSum);
  6. // test curry
  7. console.log(curryResult(1)(2)(3)); // 6
  8. console.log(curryResult(1,2)(3)); // 6
  10. // 柯里化案例
  11. const isMatchStr = (reg, str) => str.match(reg);
  12. const filterArr = (fn, array) => array.filter(fn);
  13. const match = _.curry(isMatchStr);
  14. const filter2 = _.curry(filterArr);
  15. const hasSpace = match(/\s+/g);
  16. const hasNumber = match(/\d+/g);
  17. const findSpace = filter2(hasSpace);
  18. const arr2 = ["i am jeck", "i_am_rose"];
  20. console.log(filter2(hasSpace)(arr2) ); // [ 'i am jeck' ]
  21. console.log(findSpace(arr2)); // [ 'i am jeck' ]
  23. // 模拟lodash中curry的实现
  24. function curry(func) {
  25.   // 返回一个柯里化的函数
  26.   return function carriedFn(...args) {
  27.     // 判断实参和型参的长度
  28.     if (args.length < func.length) {
  29.       return function () {
  30.         return carriedFn(...args.concat(Array.from(arguments)));
  31.       }
  32.     }
  33.     return func(...args);
  34.   }
  35. }
  37. // test
  38. const matchMy = curry(isMatchStr);
  39. const filterMy = curry(filterArr);
  40. const findSpaceMy = filterMy(hasSpace);
  41. console.log("self curry result:", filterMy(hasSpace)(arr2)); // self curry result: [ 'i am jeck' ]
  42. console.log( "self curry result:", findSpaceMy(arr2)); // self curry result: [ 'i am jeck' ]
  44. // 函数组合
  45. function composeSelf(f, g) {
  46.   return function (value) {
  47.     return f(g(value));
  48.   }
  49. };
  50. const reverse = array => array.reverse();
  51. const first = array => array[0];
  52. const emptyUnderline = str => str.replace(/\s+/g, "_");
  53. const last = composeSelf(first, reverse);
  54. console.log(arr, "last=:",last(arr)); // last=: 7
  56. // lodash中的函数组合 _.flowRight()
  57. const toUpper = str => _.toUpper(str);
  58. const f = _.flowRight(toUpper, first);
  59. console.log(f(arr2)); // I AM JECK
  61. // 模拟lodash中的flowRight函数
  62. function flowRight(...args) {
  63.   return function(value) {
  64.     return args.reverse().reduce((acc, fn) => {
  65.       return fn(acc);
  66.     }, value)
  67.   }
  68. }
  69. // 箭头函数改写
  70. // const flowRight = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value);
  71. const f2 = flowRight(emptyUnderline, flowRight(toUpper, first));
  72. console.log(f2(arr2)) // I AM JECK
  74. // 组合函数都是一个个的函数,那如何调试呢,添加一个追踪函数来辅助调试
  75. const trace = _.curry(function (tag, v) {
  76.   console.log(tag, v);
  77.   return v;
  78. })
  79. const join = _.curry((sep, array) => _.join(array, sep));
  80. const f3 = flowRight(trace("emptyUnderline之后"), emptyUnderline , trace("toUpper之后"), toUpper, first)
  81. console.log(f3(arr2)); // toUpper之后 I AM JECK  emptyUnderline之后 I_AM_JECK
  83. // lodash中fp模块对函数组合的封装
  84. const str = "NEVER SAY DIE";
  85. const f4 = fp.flowRight(fp.join("~"), fp.map(fp.toLower), fp.split(" ") );
  86. console.log(f4(str)); // never~say~die
  88. // 把一个字符串中的首字母提取并转换成大写, 使用.作为分隔符
  89. // world wild web => W.W.W
  90. const str2 = "world wild web";
  91. // const firstWordUpper = fp.flowRight(fp.join("."),fp.map(fp.first),fp.map(fp.toUpper),fp.split(" "))
  92. const firstWordUpper = fp.flowRight(fp.join("."),fp.map(fp.flowRight(fp.first, fp.toUpper)),fp.split(" "))
  93. console.log(firstWordUpper(str2)) // W.W.W

三: 函子

1: Meby函子

  1. class Container {
  2.   static of(value) {
  3.     return new Container(value)
  4.   }
  5.   constructor(value) {
  6.     this._value = value;
  7.   }
  8.   map(fn) {
  9.     return this.isNothing() ? Container.of(null) : Container.of(fn(this._value));
  10.   }
  11.   // Mybe函子就是对值为null或undefined的处理
  12.   isNothing() {
  13.     const value = this._value;
  14.     return value === null || value === undefined;
  15.   }
  16. }
  17. const r = Container.of(str2)
  18. .map(v => v.toUpperCase())
  19. .map(v => v.split(" "))
  20. console.log(r); // Container { _value: [ 'WORLD', 'WILD', 'WEB' ] }

2: Either函字

  1. class Either extends Container {
  2.   constructor(left, right) {
  3.     // super();
  4.     this.left = left;
  5.     this.right = right;
  6.   }
  7.   map(fn) {
  8.     return this.right ?
  9.       Either.of(this.left, fn(this.right)):
  10.       Either.of(fn(this.left), this.right)
  11.   }
  12. }
  13. const rEither = Either.of("hello word")
  14.                   .map(x => x.toUpperCase(),  x => x.split(" "))
  15. console.log(rEither); // Container { _value: 'HELLO WORD' }

3: IO函子

  1. class IO {
  2.   static of(value) {
  3.     return new IO(function () {
  4.       return value;
  5.     })
  6.   }
  7.   constructor(fn) {
  8.     this._value = fn;
  9.   }
  10.   map(fn) {
  11.     return new this.constructor(fp.flowRight(fn, this._value))
  12.   }
  13. }
  14. // 调用
  15. let rIO = IO.of(process).map(p => p.execPath)
  16. // console.log(rIO)
  17. console.log("IO Functor:",rIO._value()); // IO Functor: /usr/local/bin/node

4: Monad函子

  1. class Monad extends IO {
  2.   // constructor(fn) {
  3.   //   super(fn);
  4.   // }
  5.   join() {
  6.     return this._value()
  7.   }
  8.   flatMap(fn) {
  9.     return this.map(fn).join()
  10.   }
  11. }
  12. const readFileMonad = fileName => {
  13.   return new Monad(function() {
  14.     return fs.readFileSync(fileName, "utf-8");
  15.   })
  16. }
  17. const printFileMonad = x => {
  18.   return new Monad(function(){
  19.     // {
  20.       // "NAME": "FUNCTIONAL-PROGRAM",
  21.       //"VERSION": "1.0.0",
  22.       //"MAIN": "INDEX.JS",
  23.       //"LICENSE": "MIT",
  24.       //"DEVDEPENDENCIES": {
  25.            // "FOLKTALE": "^2.3.2",
  26.         //"LODASH": "^4.17.20"
  27.           //}
  28.         //}
  29.     console.log(x);
  30.     return x;
  31.   })
  32. }
  33. const monadResult = readFileMonad("./package.json")
  34.   .map(fp.toUpper)
  35.   .flatMap(printFileMonad)
  36.   .join()

5: folktale库中task处理异步任务

  1. // folktale库: 一个函数式编程库
  2. const folkTaleR = compose(fp.toUpper, fp.first)
  3. console.log(folkTaleR(["one", "two"])); // ONE
  5. // folktale 的task处理异步任务
  6. const readFile = fileName => {
  7.   return task(resolver => {
  8.     fs.readFile(fileName, "utf-8", (err, data) => {
  9.       if (err) {
  10.         throw new Error(err)
  11.       }
  12.       resolver.resolve(data)
  13.     })
  14.   })
  15. };
  16. readFile("package.json")
  17. .map(v => v.split("\n"))
  18. .map(fp.find(v => v.includes("lodash")))
  19. .run()
  20. .listen({
  21.   onRejected: (error) => {
  22.     console.log("folktale error: ", error);
  23.   },
  24.   onResolved: (data) => {
  25.     console.log("folktale result: ", data); // folktale result: "lodash": "^4.17.20"
  26.   },
  27. })