前端工程师的函数式编程
2023-03-14 22:34:52 时间
函数式编程
什么是函数式编程
函数式编程是一种编程范式。
- 面向过程开发
const a = 1
const b = 2
const result = a + b
复制代码
class Calculator {
add(a,b) {
return a+b
}
}
const c = new Calculator()
c.add(1,2)
复制代码
function add(a,b) {
return a+b
}
return a+b
复制代码
- 面向对象编程
class Calculator {
add(a,b) {
return a+b
}
}
const c = new Calculator()
c.add(1,2)
复制代码
- 面向函数开发
function add(a,b) {
return a+b
}
return a+b
复制代码
分析lodash
lodash的memoize
- 来看看下面这段函数,对于相同的`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
- 先来看看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函数 组合函数
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));
复制代码
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的