《学习JavaScript数据结构与算法（第2版）》11.4 函数式编程简介

到目前为止，我们在本书中所用的编程范式都是命令式编程。在命令式编程中，我们按部就班地编写程序代码，详细描述要完成的事情以及完成的顺序。

在本节中，我们会介绍一种新的范式，叫作函数式编程。函数式编程是一种曾经主要用于学术领域的范式，多亏了Python和Ruby等现代语言，它才开始在行业开发者中流行起来。值得欣慰的是，借助ES6的能力，JavaScript也能够进行函数式编程。

11.4.1　函数式编程与命令式编程

以函数式范式进行开发并不简单；关键在于习惯这种范式的机制。我们编写一个例子来说明差异。

假设我们想打印一个数组中所有的元素。我们可以用命令式编程，声明的函数如下：

var printArray = function(array) {  for (var i = 0; i < array.length; i++) {    console.log(array[i]);  }};printArray([1, 2, 3, 4, 5]);  

在上面的代码中，我们迭代数组，打印每一项。

现在，我们试着把这个例子转换成函数式编程。在函数式编程中，函数就是摇滚明星。我们关注的重点是需要描述什么，而不是如何描述。回到这一句：“我们迭代数组，打印每一项”。那么，我们首先要关注的是迭代数据，然后进行操作，即打印数组项。下面的函数负责迭代数组：

var forEach = function(array, action) {  for (var i = 0; i < array.length; i++) {    action(array[i]);  }};  

接下来，我们要创建另一个负责把数组元素打印到控制台的函数（考虑为回调函数），如下：

var logItem = function (item) {  console.log(item);};  

最后，像下面这样使用声明的函数：

forEach([1, 2, 3, 4, 5], logItem);  

只需要上面这一行代码，我们就能描述我们要把数组的每一项打印到控制台。这是我们的第一个函数式编程的例子！

有几点要注意：

• 主要目标是描述数据，以及要对数据应用的转换；

• 程序执行顺序的重要性很低，而在命令式编程中，步骤和顺序是非常重要的；

• 函数和数据集合是函数式编程的核心；

• 在函数式编程中，我们可以使用和滥用函数和递归，而在命令式编程中，则使用循环、赋值、条件和函数。

11.4.2　ES2015和函数式编程

有了ES2015的新功能，用JavaScript进行函数式编程变得更加容易了。我们来看一个例子。

考虑我们要找出数组中最小的值。要用命令式编程完成这个任务，只要迭代数组，检查当前的最小值是否大于数组元素；如果是，就更新最小值，代码如下：

var findMinArray = function(array) {  var minValue = array[0];  for (var i = 1; i < array.length; i++) {    if (minValue > array[i]) {      minValue = array[i];    }  }  return minValue;};console.log(findMinArray([8, 6, 4, 5, 9])); //输出4  

用函数式编程完成相同的任务，可以使用Math.min函数，传入所有要比较的数组元素。我们可以像下面的例子里这样，使用ES2015的解构操作符（...），把数组转换成单个的元素：

const min_ = function(array) {  return Math.min(...array)};console.log(min_([8, 6, 4, 5, 9])); //输出4  

使用ES2015的箭头函数，我们可以进一步简化上面的代码：

const min = arr => Math.min(...arr);console.log(min([8, 6, 4, 5, 9]));  

11.4.3　JavaScript函数式工具箱—— map、filter和reduce

map、filter和reduce函数（第2章已经学习过）是函数式编程的基础。

我们可以使用map函数，把一个数据集合转换或映射成另一个数据集合。先看一个命令式编程的例子：

var daysOfWeek = [  {name: /'Monday/', value: 1},  {name: /'Tuesday/', value: 2},  {name: /'Wednesday/', value: 7}];var daysOfWeekValues_ = ;for (var i = 0; i < daysOfWeek.length; i++) {  daysOfWeekValues_.push(daysOfWeek[i].value);}  

再以函数式编程来考虑同样的例子，代码如下：

var daysOfWeekValues = daysOfWeek.map(function(day) {  return day.value;});console.log(daysOfWeekValues);  

我们可以使用filter函数过滤一个集合的值。来看一个例子：

var positiveNumbers_ = function(array) {  var positive = ;  for (var i = 0; i < array.length; i++) {    if (array[i] >= 0) {      positive.push(array[i]);    }  }  return positive;}console.log(positiveNumbers_([-1, 1, 2, -2]));  

我们可以把同样的代码写成函数式的，如下：

var positiveNumbers = function(array) {  return array.filter(function(num) {  return num >= 0;  })};console.log(positiveNumbers([-1, 1, 2, -2]));  

我们也可以使用reduce函数，把一个集合归约成一个特定的值。比如，对一个数组中的值求和：

var sumValues = function(array) {  var total = array[0];  for (var i = 1; i < array.length; i++) {    total += array[i];  }  return total;};console.log(sumValues([1, 2, 3, 4, 5]));  

上面的代码也可以写成这样：

var sum_ = function(array) {  return array.reduce(function(a, b) {  return a + b;  })};console.log(sum_([1, 2, 3, 4, 5]));  

我们还可以把这些函数与ES2015的功能结合起来，比如解构操作符和箭头函数，代码如下：

const sum = arr => arr.reduce((a, b) => a + b);console.log(sum([1, 2, 3, 4, 5]));  

我们再看另一个例子。考虑我们需要写一个函数，把几个数组连接起来。为此，可以创建另一个数组，用于存放其他数组的元素。我们可以执行以下命令式的代码：

var mergeArrays_ = function(arrays) {  var count = arrays.length,  newArray = ,  k =0;  for (var i = 0; i < count; i++) {    for (var j = 0; j < arrays[i].length; j++) {      newArray[k++] = arrays[i][j];    }  }  return newArray;};console.log(mergeArrays_([[1, 2, 3], [4, 5], [6]]));  

注意，在这个例子中，我们声明了变量，还使用了循环。现在，我们用JavaScript函数式编程把上面的代码重写如下：

var mergeArraysConcat = function(arrays) {  return arrays.reduce(function(p, n) {  return p.concat(n);  });};console.log(mergeArraysConcat([[1, 2, 3], [4, 5], [6]]));  

上面的代码完成了同样的任务，但它是面向函数的。我们也可以用ES2015使代码更加精简，如下所示：

const mergeArrays = (...arrays) => .concat(...arrays);console.log(mergeArrays([1, 2, 3], [4, 5], [6]));  

从11行代码变成了只有一行！

　如果你想更多地练习JavaScript函数式编程，可以试试这些习题，非常有意思：http://reactivex.io/learnrx/。

11.4.4　JavaScript函数式类库和数据结构

有一些很棒的JavaScript类库借助工具函数和函数式数据结构，对函数式编程提供支持。通过下面的列表，你可以找到一些最有名的JavaScript函数式类库。

• Underscode.js：http://underscorejs.org/

• Bilby.js：http://bilby.brianmckenna.org/

• Lazy.js：http://danieltao.com/lazy.js/

• Bacon.js：https://baconjs.github.io/

• Fn.js：http://eliperelman.com/fn.js/

• Functional.js：http://functionaljs.com/

• Ramda.js：http://ramdajs.com/0.20.1/index.html

• Mori：http://swannodette.github.io/mori/

　如果你对学习JavaScript函数式编程感兴趣，可以看看Packt出版的另一本书：https://www.packtpub.com/web-development/functional-programming-javascript。