第十一章 函数式编程

11.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.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.3 JavaScript 函数式工具箱—— map、filter 和 reduce

        我们可以使用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]));

你可能感兴趣的:(javascript,函数式编程)