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());

 

 

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

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

这样改写后，结构会整体变得比较清晰，而且链的每一环在做什么也可以很容易的展现出来。函数的嵌套和链式的对比还有一个很好的例子，那就是 回调函数 和 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学院版权所有，转载请注明出处，谢谢合作！）