Js 函数式编程思想 (V客学院知识分享)
随之ECMAScript 标准规范不断更新,现在已经更新到ES7,不久ES8规范即将面世,为了是JS 语法对函数编程更加友好,诸如 RxJS (ReactiveX) 等函数式框架的不断流行。函数式编程则应该是以函数做为舰载主体,然后对函数进行拆分封装、更加抽象,可扩展性极强。
与传统命令式函数相比存在那些优势?
- 语法精简清晰
- 通用性更好
- 维护及可扩展性更好
- 限制作用域
以下列举函数对比
// 数组中每个单词,首字母大写 // 一般写法 const arr = ['apple', 'pen', 'apple-pen']; for(const i in arr){ const c = arr[i][0]; arr[i] = c.toUpperCase() + arr[i].slice(1); } console.log(arr); // 函数式写法一 function upperFirst(word) { return word[0].toUpperCase() + word.slice(1); } function wordToUpperCase(arr) { return arr.map(upperFirst); } console.log(wordToUpperCase(['apple', 'pen', 'apple-pen'])); // 函数式写法二 console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));
当情况变得更加复杂时,表达式的写法会遇到几个问题:
- 表意不明显,逐渐变得难以维护
- 复用性差,会产生更多的代码量
- 会产生很多中间变量
函数式编程很好的解决了上述问题。首先参看 函数式写法一,它利用了函数封装性将功能做拆解(粒度不唯一),并封装为不同的函数,而再利用组合的调用达到目的。这样做使得表意清晰,易于维护、复用以及扩展。其次利用 高阶函数,Array.map 代替 for…of 做数组遍历,减少了中间变量和操作。
而 函数式写法一 和 函数式写法二 之间的主要差别在于,可以考虑函数是否后续有复用的可能,如果没有,则后者更优。
链式优化
从上面 函数式写法二 中我们可以看出,函数式代码在写的过程中,很容易造成 横向延展,即产生多层嵌套,下面我们举个比较极端点的例子。
// 计算数字之和 // 一般写法 console.log(1 + 2 + 3 - 4) // 函数式写法 function sum(a, b) { return a + b; } function sub(a, b) { return a - b; } console.log(sub(sum(sum(1, 2), 3), 4);
// 优化写法 (嗯,你没看错,这就是 lodash 的链式写法) const utils = { chain(a) { this._temp = a; return this; }, sum(b) { this._temp += b; return this; }, sub(b) { this._temp -= b; return this; }, value() { const _temp = this._temp; this._temp = undefined; return _temp; } }; console.log(utils.chain(1).sum(2).sum(3).sub(4).value());
本例仅为展示 横向延展 的比较极端的情况,随着函数的嵌套层数不断增多,导致代码的可读性大幅下降,还很容易产生错误。
在这种情况下,我们可以考虑多种优化方式,比如下面的 链式优化 。
这样改写后,结构会整体变得比较清晰,而且链的每一环在做什么也可以很容易的展现出来。函数的嵌套和链式的对比还有一个很好的例子,那就是 回调函数 和 Promise 模式。
// 顺序请求两个接口 // 回调函数 import $ from 'jquery'; $.post('a/url/to/target', (rs) => { if(rs){ $.post('a/url/to/another/target', (rs2) => { if(rs2){ $.post('a/url/to/third/target'); } }); } }); // Promise import request from 'catta'; // catta 是一个轻量级请求工具,支持 fetch,jsonp,ajax,无依赖 request('a/url/to/target') .then(rs => rs ? $.post('a/url/to/another/target') : Promise.reject()) .then(rs2 => rs2 ? $.post('a/url/to/third/target') : Promise.reject());
随着回调函数嵌套层级和单层复杂度增加,它将会变得臃肿且难以维护,而 Promise
的链式结构,在高复杂度时,仍能纵向扩展,而且层次隔离很清晰。
map (映射)
映射是对集合而言的,即把集合的每一项都做相同的变换,产生一个新的集合
map
作为一个高阶函数,他接受一个函数参数作为映射的逻辑
// 数组中每一项加一,组成一个新数组 // 一般写法 const arr = [1,2,3]; const rs = []; for(const n of arr){ rs.push(++n); } console.log(rs) // map改写 const arr = [1,2,3]; const rs = arr.map(n => ++n);
上面一般写法,利用 for...of
循环的方式遍历数组会产生额外的操作,而且有改变原数组的风险
而 map
函数封装了必要的操作,使我们仅需要关心映射逻辑的函数实现即可,减少了代码量,也降低了副作用产生的风险。
(PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有,转载请注明出处,谢谢合作!)