Js 函数式编程思想 (V客学院知识分享)

随之ECMAScript 标准规范不断更新,现在已经更新到ES7,不久ES8规范即将面世,为了是JS 语法对函数编程更加友好,诸如 RxJS (ReactiveX) 等函数式框架的不断流行。函数式编程则应该是以函数做为舰载主体,然后对函数进行拆分封装、更加抽象,可扩展性极强。

与传统命令式函数相比存在那些优势?

  1. 语法精简清晰
  2. 通用性更好
  3. 维护及可扩展性更好
  4. 限制作用域

以下列举函数对比

// 数组中每个单词,首字母大写
// 一般写法
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)));

当情况变得更加复杂时,表达式的写法会遇到几个问题:

  1. 表意不明显,逐渐变得难以维护
  2. 复用性差,会产生更多的代码量
  3. 会产生很多中间变量

函数式编程很好的解决了上述问题。首先参看函数式写法一,它利用了函数封装性将功能做拆解(粒度不唯一),并封装为不同的函数,而再利用组合的调用达到目的。这样做使得表意清晰,易于维护、复用以及扩展。其次利用高阶函数,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());

本例仅为展示横向延展的比较极端的情况,随着函数的嵌套层数不断增多,导致代码的可读性大幅下降,还很容易产生错误。

在这种情况下,我们可以考虑多种优化方式,比如下面的链式优化

PHP开发、web前端、UI设计、VR开发专业培训机构--VIT学院版权所有,转载请注明出处,谢谢合作!


Js 函数式编程思想 (V客学院知识分享)

原文地址:https://www.cnblogs.com/wrx3166/p/8110559.html


最新回复(0)
/jishuMJAknucSvvxItB2g25Cc9_2Bvky_2BxRvHb8joF0fg_3D_3D3478746
8 简首页