前端工程师的函数式编程

函数式编程

什么是函数式编程

函数式编程是一种编程范式。

• 面向过程开发

代码语言：javascript复制

const a = 1
const b = 2
const result = a   b
复制代码

代码语言：javascript复制

class Calculator {
  add(a,b) {
    return a b
  }
}
const c = new Calculator()
c.add(1,2)
复制代码

代码语言：javascript复制

function add(a,b) {
  return a b
}
return a b
复制代码

• 面向对象编程

代码语言：javascript复制

class Calculator {
	add(a,b) {
		return a b
	}
}
const c = new Calculator()
c.add(1,2)
复制代码

• 面向函数开发

代码语言：javascript复制

function add(a,b) {
  return a b
}
return a b
复制代码

分析lodash

lodash的memoize

代码语言：javascript复制

-   来看看下面这段函数，对于相同的`add`调用执行了三次。于是add函数对于相同的入参真的执行了三次。

```
function add(a, b) {
  return a   b;
}
​
​
console.log(add(1,2))
console.log(add(1,2))
console.log(add(1,2))
​
```

-   `lodash`中的`memoize`

    这段代码中的`add`函数仅仅执行了一遍，也就是对于纯函数`add`的入参`1,2`在`memoize`中进行了缓存。缓存了进入的参数，当进入的参数和之前有过匹配的话那么就直接取之前记录的结果。

    ```
    const _ = require('lodash');
    ​
    ​
    function add(a, b) {
      return a   b;
    }
    ​
    const memoizeAdd = _.memoize(add);
    ​
    console.log(memoizeAdd(1,2))
    console.log(memoizeAdd(1,2))
    console.log(memoizeAdd(1,2))
    ```

    -   自己实现一个简易版`memoize`方法

        其实核心思路就是返回一个函数，利用闭包的性质在`memoize`函数中保存一份映射表。记录每次入参，从而对相同入参的函数进行返回。

        ```
        function add(a, b) {
          return a   b;
        }
        ​
        function memoize(fn) {
          const map = new Map();
          return (...args) => {
            const key = JSON.stringify(args.sort((a, b) => a - b));
            const memoized = map.get(key);
            if (!memoized) {
              const value = fn(...args);
              map.set(key, value);
              return value;
            }
            return memoized;
          };
        }
        ​
        const memoizeAdd = memoize(add);
        ​
        // add(1,2)函数仅仅在第一次执行了一次，其他时候都是走的缓存去的值。
        console.log(memoizeAdd(1, 2));
        console.log(memoizeAdd(1, 2));
        console.log(memoizeAdd(1, 2));
        ​
        ```
复制代码

lodash函数柯里化 curry

代码语言：javascript复制

    -   先来看看lodash中的curry是怎么使用的

        ```
        var abc = function(a, b, c) {
          return [a, b, c];
        };
         
        var curried = _.curry(abc);
         
        curried(1)(2)(3);
        // => [1, 2, 3]
         
        curried(1, 2)(3);
        // => [1, 2, 3]
         
        curried(1, 2, 3);
        // => [1, 2, 3]
        ```

        -   简易版的`curry`

            ```
            // 本质上还是通过闭包进行缓存记录fn和args
            function curry(fn) {
              return function _curry(...args) {
                if (args.length === fn.length) {
                  return fn(...args);
                }
                return function (...rest) {
                  const params = [].concat(args, rest);
                  return _curry(...params);
                };
              };
            }
            ```
复制代码

lodash flow函数 组合函数

代码语言：javascript复制

                const _ = require('lodash');
                ​
                function square(n) {
                  return n * n;
                }
                ​
                function add(a) {
                  return a   3;
                }
                ​
                // 从左往右执行
                var addSquare = flow([square, add]);
                // => 9
                ​
                function flow(fns) {
                  return (arg) => {
                    return fns.reduce((pre, cur) => {
                      return cur(pre);
                    }, arg);
                  };
                }
                ​
                console.log(addSquare(2));
                ​
            
复制代码

lodash

0 人点赞