JavaScript中函数式编程的体现－－map()函数和reduce()函数arr.map(pow);都使用回调函数

Posted 2022-11-27 四哥-云上

最近在学JavaScript，中间看到map和reduce方法，觉得挺有意思的，边学边写下这篇博客。

这两个函数都在某种程度上体现了函数式编程的思想，即将函数作为传入另一个函数的参数。

map()方法的调用者一般是个数组，参数是一个函数，称为callback，返回值是一个由原数组中每个元素执行给定callback函数的返回值组成的新数组。

也就是说，当你用map()方法时，是将组成数组中的每个元素作为参数，传进给定的函数，如果这个函数是有返回值的，则将每次执行函数得到的返回值组成一个新的数组返回。

function pow(x) 
    return x * x;


var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

上面我们通过map()方法实现了将arr数组中的每个元素作为pow()方法的参数，得到的返回值是每次执行pow()函数返回值的集合，也就是一个数组。

当然callback函数也是可以没有返回值的，此时，视callback函数返回undefined。

var arr = [0, 1, 2, 3, 4, 5];

var arr1 = arr.map(function(item) console.log(item) );
//打印 0 1 2 3 4 5 // arr1为[undefined, undefined, undefined, undefined, undefined, undefined]

再来看reduce()方法，和map()方法一样，调用者也是数组，不过这儿的callback函数有些不同，要求必须接收两个参数。

reduce()方法按照从左到右的顺序，先对第一、第二个元素执行callback函数，将得到的结果作为一个参数继续和下一个元素执行callback函数，直到数组中最后一个元素，构建一个最终返回值。

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) 
    return x + y;
); // 25

这是一个利用reduce()方法进行数组求和的例子。

需要注意的是reduce()方法除了有callback函数作为参数外，还可以有一个initialValue作为参数，如果指定了 initialValue ，则使用 initialValue 作为 callback 的第一个参数，数组中第一个元素作为第二个参数。