javascript函数式编程和链式优化

1、函数式编程理解

函数式编程可以理解为,以函数作为主要载体的编程方式,用函数去拆解、抽象一般的表达式

与命令式相比,这样做的好处在哪?主要有以下几点:

(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);   //[ 'Apple', 'Pen', 'Apple-pen' ]


// 函数式写法一
function upperFirst(word) {
  return word[0].toUpperCase() + word.slice(1);
}

function wordToUpperCase(arr) {
  return arr.map(upperFirst);
}
console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));   //[ 'Apple', 'Pen', 'Apple-pen' ]


// 函数式写法二
console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));  //[ 'Apple', 'Pen', 'Apple-pen' ]

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

(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 的链式结构,在高复杂度时,仍能纵向扩展,而且层次隔离很清晰。

参考链接:我眼中的 JavaScript 函数式编程