详解函数式编程

作者: cbw100 | 来源:发表于2017-11-13 11:46 被阅读71次

函数式编程 ( Functional Programming ) 是一种以函数为基础的编程方式和代码组织方式，能够带来更好的代码调试及项目维护的优势。

1. 函数

在函数式编程中，任何代码可以都是函数，且要求具有返回值，如下示例

// 非函数式

var title = "Functional Programming";
var saying = "This is not";
console.log(saying + title); // => This is not Functional Programming

// 函数式

var say = title => "This is " + title; 
var text = say("Functional Programming"); // => This is Functional Programming

2. 纯函数

纯函数在这里指函数内外间是“无”关联的。主要有下面两点

没有副作用（side effect）不会涉及到外部变量的使用或修改
引用透明函数内只会依赖传入参数，在任何时候对函数输入相同的参数时，总能输出相同的结果

// 非纯函数（函数内依赖函数外的变量值）

var title = "Functional Programming";
var say = ()=> "This is not" + title;   // <= 依赖了全局变量 title

// 纯函数

var say = (title)=>"This is " + title; // <= 依赖了以参数 title 传入
say("Functional Programming");

我们来深入一下纯函数.

2.1 什么是"纯函数"

纯函数是指 不依赖于且不改变它作用域之外的变量状态 的函数。

explain01.jpg
也就是说， 纯函数的返回值只由它调用时的参数决定 ，它的执行不依赖于系统的状态（比如：何时、何处调用它——译者注）。

纯函数是函数式编程的一个基础。

2.2 例子

var values = { a: 1 };

function impureFunction ( items ) {
  var b = 1;

  items.a = items.a * b + 2;

  return items.a;
}

var c = impureFunction( values );
// 现在 `values.a` 变成 3,  impureFunction 改变了它。

在上面的代码中，我们改变了参数对象中的一个属性。由于我们定义的函数改变的对象在我们的函数作用域之外，导致这个函数成为“不纯”的函数。

var values = { a: 1 };

function pureFunction ( a ) {
  var b = 1;

  a = a * b + 2;

  return a;
}

var c = pureFunction( values.a );
// `values.a` 没有被改变, 它的值仍然是 1

上面的代码，我们只计算了作用域内的局部变量，没有任何作用域外部的变量被改变，因此这个函数是“纯函数”。

var values = { a: 1 };
var b = 1;

function impureFunction ( a ) {
  a = a * b + 2;

  return a;
}

var c = impureFunction( values.a );
// 实际上,  `c` 的值依赖于外部变量 `b`.
// 你可能容易忽略这种情况，外部变量的变化也可能会导致函数出现不确定结果。

上面的代码里， b 不在作用域中，函数执行结果依赖于上下文环境，因此函数也是“不纯”的。

var values = { a: 1 };
var b = 1;

function pureFunction ( a, c ) {
  a = a * c + 2;

  return a;
}

var c = pureFunction( values.a, b );
// 这样从定义上明确 `c` 依赖于参数 `b`，避免函数不确定结果。

上面这样改就成了“纯函数”。

2.3 具体应用

考虑以下代码:

var getMinQuantity = function getMinQuantity ( name ) {
  // 一个纯函数根据传入的名字返回对应的数量

我们看一下在一个实际项目中的代码例子：

var popover = {

  // A bunch of code…

  addQuantityText: function ( quantity ) {
    var quantityTextOptions = {
      namespace: "quantity",
      initialChildIndex: 2,
      quantity: quantity
    };

    try {
      this.formatQuantityText( quantityTextOptions );
    } catch ( err ) {
      console.log( "Couldn"t add quantity text!" );
    }
  },

  formatQuantityText: function ( options ) {
    if ( !this.$$boxContainer ) {
      throw new Error( "$$boxContainer is not configured" );
    }

    var namespace = options.namespace || "quantity";
    var quantity = options.quantity || 0;
    var initialChildIndex = options.initialChildIndex || 0;

    var $$quantity = new Canvas(); // implementation details hidden
    $$quantity.name = namespace;
    $$quantity.value = quantity;
    this.setQuantityTextColor( $$quantity );

    this.$$boxContainer.addChild( $$quantity, initialChildIndex );

    return $$quantity;
  },

  setQuantityTextColor: function ( $$quantity ) {
    if ( !$$quantity ) return;

    var minQuantity = getMinQuantity( $$quantity.name );
    var quantity = $$quantity.value || minQuantity;
    var hasEnoughQuantity = (quantity >= minQuantity);

    $$quantity.color = (hasEnoughQuantity) ? "green" : "red";
  },

  // A bunch of code…

};

上面的这三个函数 addQuantityText() , formatQuantityText() 以及 setQuantityTextColor() 都不是纯函数。

我们使用 addQuantityText() 在 $$boxContainer 容器里展示数量。这个方法是个操作入口，其中做一些细节的操作。当 $$quantity 出错的时候，你需要在这一整坨代码里面里面查错，有时候这复杂得像是在寻宝 —— 当然这不是令人心情愉快寻宝游戏。

这种代码组织方式往往意味着长期维护会很麻烦。

当问题变得复杂
在这个例子里，函数内执行次序变得重要。

仅仅交换2行代码，程序就会出错。这看起来很显然，但是它确实不好调试。

var popover = {

  // A bunch of code…

  addQuantityText: function ( quantity ) {
    var quantityTextOptions = {
      namespace: "quantity",
      initialChildIndex: 2,
      quantity: quantity
    };

    try {
      this.formatQuantityText( quantityTextOptions );
    } catch ( err ) {
      console.log( "Couldn"t add quantity text!" );
    }
  },

  formatQuantityText: function ( options ) {
    if ( !this.$$boxContainer ) {
      throw new Error( "$$boxContainer is not configured" );
    }

    var namespace = options.namespace || "quantity";
    var quantity = options.quantity || 0;
    var initialChildIndex = options.initialChildIndex || 0;

    var $$quantity = new Canvas(); // implementation details hidden

    //this.setQuantityTextColor 提前写了，造成错误
    this.setQuantityTextColor( $$quantity );
    $$quantity.name = namespace;
    $$quantity.value = quantity;

    this.$boxContainer.addChild( $$quantity, initialChildIndex );

    return $$quantity;
  },

  setQuantityTextColor: function ( $$quantity ) {
    if ( !$$quantity ) return;

    var minQuantity = getMinQuantity( $$quantity.name );
    var quantity = $$quantity.value || minQuantity;
    var hasEnoughQuantity = (quantity >= minQuantity);

    $$quantity.color = (hasEnoughQuantity) ? "green" : "red";
  },

  // A bunch of code…

};

上面的代码产生了错误，问题是这个错误有时候还比较难被发现。

setQuantityTextColor() 本应该只负责处理 $$quantity 的颜色，但你却需要从头阅读三个函数的每一行代码去判断究竟哪些操作改变了object中的属性值，然后重新梳理整个代码流程去弄明白其中的哪一步出错了。

在这个时候，你甚至会后悔将 formatQuantityText() 分解为了更细粒度的方法来简化每个方法的具体实现细节。

总而言之，在你调试的时候，你需要检查许多代码。如果你开始思考将一个大方法拆分成若干小方法为什么反而让调试变得困难，那么纯函数概念就变得对你非常有意义。

使用纯函数思想解决问题
我们尽量使用纯函数来改写我们的代码：

var popover = {

  // A bunch of code…

  // 所以对系统状态改变的操作都封装在这个方法里
  // 插入 DOM 元素只由单一函数来负责，限制副作用
  // 这使得 debug 变得简单
  addQuantityText: function ( quantity ) {
    if ( !this.$$boxContainer ) {
      throw new Error( "$$boxContainer is not configured" );
    }
    var quantityTextOptions = {
      namespace: "quantity",
      quantity: quantity
    };
    var $$quantity = this.formatQuantityText( quantityTextOptions );
    this.$$boxContainer.addChild( $$quantity, 2 );
  },
  // 这个方法没有副作用，它仅调用另一个纯函数。
  // 它创建和返回所需要的、正确配置的 canvas 对象
  formatQuantityText: function ( options ) {
    var namespace = options.namespace || "quantity";
    var quantity = options.quantity || 0;

    var $$quantity = new Canvas(); // implementation details hidden
    $$quantity.name = namespace;
    $$quantity.value = quantity;
    $$quantity.color = this.getQuantityTextColor( quantity, namespace );

    return $$quantity;
  },
  // 这个函数也没有副作用，它根据参数 quantity 返回对应的颜色值
  getQuantityTextColor: function ( quantity, namespace ) {
    var minQuantity = getMinQuantity( namespace );
    var hasEnoughQuantity = (quantity && quantity >= minQuantity);

    return (hasEnoughQuantity) ? "green" : "red";
  },

  // A bunch of code…

};

从设计上来讲，上面的代码并没有根本性的变化，然而，这样改写带来了显而易见的好处。

我们做了什么？

我们用 getQuantityTextColor() 代替了 setQuantityTextColor()
这个方法根据 quantity 返回一个颜色值，而不是之前那样直接改变 object 属性
方法不依赖于它们作用域之外的变量
方法只调用纯函数方法
我们将 $$quantity 对象的创建和修改DOM分开来了
我们将对系统状态的改变统一封装到 addQuantityText() 内部

通过上面的步骤，我们移除了带有副作用的方法，从而简化了代码维护的工作量。如果 $$quantity 发生错误，我们只需要检查一个函数。

简化接口
我们之前的的两个方法是public的，更完美的做法是将它们改成private的。
事实上，做这个优化和我们的API无关，它们存在只是为了简化接口。如果你对这不理解，可以先阅读原作者之前写得这篇文章。
由于它们已经是纯函数，将它们提出来简直易如反掌，因为它们的输出不依赖任何外部环境，只由参数决定：

function getQuantityTextColor ( quantity, namespace ) {
  var minQuantity = getMinQuantity( namespace );
  var hasEnoughQuantity = (quantity && quantity >= minQuantity);

  return (hasEnoughQuantity) ? "green" : "red";
};

function formatQuantityText ( options ) {
  var namespace = options.namespace || "quantity";
  var quantity = options.quantity || 0;

  var $$quantity = new Canvas(); // implementation details hidden
  $$quantity.name = namespace;
  $$quantity.value = quantity;
  $$quantity.color = getQuantityTextColor( quantity, namespace );

  return $$quantity;
};

简化后的接口代码:

var popover = {

  // A bunch of code…

  addQuantityText: function ( quantity ) {
    if ( !this.$$boxContainer ) {
      throw new Error( "$$boxContainer is not configured" );
    }

    var quantityTextOptions = {
      namespace: "quantity",
      quantity: quantity
    };
    var $$quantity = formatQuantityText( quantityTextOptions );

    this.$$boxContainer.addChild( $$quantity, 2 );
  },

  // A bunch of code…

};

2.4 使用纯函数的好处

最主要的好处是没有副作用。纯函数不会修改作用域之外的状态，做到这一点，代码就变得足够简单和清晰：当你调用一个纯函数，你只要关注它的返回值，而不用担心因为别处的问题导致错误。

纯函数是健壮的，改变执行次序不会对系统造成影响，因此纯函数的操作可以并行执行。

纯函数非常容易进行单元测试，因为不需要考虑上下文环境，只需要考虑输入和输出。

最后，尽可能使用纯函数 让你的代码保持简单和灵活。

2.5 设计问题

当你在使用面向对象编程时，你或许会觉得函数式编程的概念没啥用。这种想法是错误的，因为面向对象编程和函数式编程无疑是相容的。

事实上，我们的目的很简单：通过尽可能限制能对系统造成影响的函数的数量来简化你的代码。

如果你认真去思考如何能尽量多使用纯函数，你就可以更轻松调试和维护你的代码，你的程序人生也能因此更美好。

好了，你已经知道该怎么做了吧。这实际上是在程序设计实践中经常遇到的一系列问题，如同上面的这种在 get 和 set 中选择的问题。

3. 不可变数据(immutable)

这里主要是指变量值的不可变。当需要基于原变量值改变时，可通过产生新的变量来确保原变量的不变性，如下

// 可变数据

var arr = ["Functional", "Programming"];
arr[0] = "Other"; // <= 修改了arr[0]的值
console.log(arr)  // => ["Other", "Programming"] // 变量arr值已经被修改


// 不可变数据

var arr = ["Functional", "Programming"];
// 得到新的变量，不修改了原来的值
var newArr = arr.map(item => {
    if(item === "Functional"){
        return "Other"; 
    } else {
        return item;
    }
})

console.log(arr);  // => ["Functional", "Programming"] 变量arr值不变
console.log(newArr); // => ["Other", "Programming"]  产生新的变量newArr

之所以使用这种不变值，除了更好的函数式编程外，还能够维持线程安全可靠，落地在业务中，实际上也能让代码更加清晰。设想，如果你定义了一个变量A，A在其他地方被其他人修改了，这样是不方便定位A的当前值的。关于定义多个变量引发的内存等问题，可以通过重用结构或部分引用的方式来减轻，可参考 immutable.js
使用 map, reduce 等数据处理函数
强大的 JavaScript 有着越来越多的高能处理数据函数，其中包含了 map、 reduce、 filter 等。
map 能够对原数组中的值进行逐个处理并产生新的数组，一个简单例子

// map

var data = [1, 2, 3];
var squares = data.map( (item, index, array) =>  item * item );
console.log(squares); // => [1, 4, 9]
console.log(data);// =>  [1, 2, 3] data 还是那个 data

reduce 能够对原数组中的各个值进行结合处理，来产生新的值，如下面例子中，previous 代表上一个结果值，current 代表当前值，reduce 函数可以传入第二个参数作为 previous 初始值，不传时则 previous 初始值为数组中第一个值。

// reduce

var sum = [1, 2, 3].reduce( (previous, current, index, array) => previous + current );
console.log(sum); // => 6

4. 函数柯里化 Currying

柯里化是将多参函数转换成一系列的单参函数。结合下面例子来说明下

// 一个多参函数

var add = (a, b) => a + b;
add(1, 2); // => 3

将上面的多参函数进行柯里化，如下

// 柯里化函数

var add = a => b => a + b;

上面柯里化后的函数调用方式也有所转变，第一次传入一个参数返回了一个函数，再传入参数则完成整体的调用，这也是利用的闭包的特性

var add1 = add(1);
add1(2);  // => 3

柯里化后的函数，也可以应用在生产 “ 函数 ” 上，如下示例

var say = title => type => title + " is " + type;

var sayFP = say("Functional Programming");
var sayOther = say("Other Programming");

sayFP("good"); // => Functional Programming is good
sayOther("good"); // => Other Programming is good

5. 组合函数compose

顾名思义，组合函数是将多个函数进行组合成一个函数。举个例子

var compose = (fn1, fn2) => (arg) => fn1(fn2(arg));

var a = arg => arg + 'a';
var b = arg => arg + 'b';

var c = compose(a, b); // 将a,b函数进行组合
c('c');  // => cba

上面示例中，当调用组合函数 c 时，传入的参数会经过 b 函数，接着将 b 函数的返回值作为 a 函数的参数值，从而输出最终结果。组合函数 c 就像管道一样，将水流( 返回值 )流经各个函数中进行处理。
当想要组合很多函数成一条很长很长的“管道”时，那么显然上面的 compose 函数已经不够用了。下面看看 redux 是怎么做这个 compose 工具函数的。

// 源自: redux/src/compose.js

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  } else {
    const last = funcs[funcs.length - 1]
    const rest = funcs.slice(0, -1)
    return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  }
}

代码很简洁，主要利用了递归方式和数组的 reduceRight 方法来处理，reduceRight 跟上边提到的 reduce 方法功能是一样的，不同的是 reduceRight 是从数组的末尾向前逐个处理。就这样，想拼多长的就多长。
以上，便是笔者在项目实践中应用较多的函数式编程内容，如有不妥，请斧正。
附: 一些可供学习函数式编程的内容

Immutable.js (https://facebook.github.io/immutable-js/)
Underscore (http://underscorejs.org/)
Lodash (https://lodash.com/)
Ramda (http://ramdajs.com/)
Mori (http://swannodette.github.io/mori/)
Monads (http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html)

详解函数式编程

1. 函数

2. 纯函数

2.1 什么是"纯函数"

2.2 例子

2.3 具体应用

2.4 使用纯函数的好处

2.5 设计问题

3. 不可变数据(immutable)

4. 函数柯里化 Currying

5. 组合函数compose

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

极客教程-前端开发

Web前端之路

让前端飞

程序员