javascript 函数（map、reduce）

高阶函数

函数的参数可以接收另一个函数，这类函数称之为高阶函数

map

JavaScript的map()是Array中的一个方法，调用Array的map()方法会返回一个新的Array

function foo(item) {
    return item * item;
}

[1, 3, 5, 7, 9].map(foo); // [1, 9, 25, 49, 81]

笃、笃、笃（敲黑板）

首先举个栗子🌰

var arr = ['1', '2', '3'];
arr.map(parseInt);
//  ？
//  ？

首先要理解map()：

一般map 方法中的 callback 函数只需要接受一个参数，也就是正在被遍历的数组元素本身。

但这并不意味着 map 只给 callback 传了一个参数，而是三个。

// array.map(function(currentValue, index, arr), thisArg)
// 参数：
// currentValue    必须。当前元素的值
// index           可选。当期元素的索引值
// arr             可选。包含当期元素的数组对象。

// thisArg         可选。 可在 callback 函数中为其引用 this 关键字的对象。 如果省略 thisArg，则 undefined 将用作 this 值。

顺带了解一下parseInt：
通常使用parseInt时，只需要传递一个参数，但实际上，parseInt可以有两个参数，第二个参数是进制数，默认是十进制。
此时你可能已经想到了，map方法在调用callback时，给parseInt传了三个参数， 第三个参数parseInt会忽视, 但第二个参数不会，也就是说，parseInt把传过来的索引值当成进制数来使用，从而返回了NaN。

var arr2 = ['10', '10', '10', '10', '10', '10'];
arr2.map(parseInt); // [10, NaN, 2, 3, 4, 5]

这个问题可以自己写一个简单的方法来处理：

var arr = ['1', '2', '3'];
function returnInt(element){
    return parseInt(element,10);
}

arr.map(returnInt); // 返回[1,2,3]

reduce

Array的reduce() 方法接收一个函数callbackfn 作为累加器，这个回调函数必须接收两个参数，对数组中的值从左到右两两合并，最终返回一个值。

语法：

    array.reduce(function(preValue,curValue,index,array) {},[initialValue])

callbackfn函数，而这个函数包含四个参数:

// preValue:     上一次调用回调返回的结果，或者是提供的初始值（initialValue）
// curValue:     当前值
// index:        当前值的索引
// array:        调用 reduce()方法的数组

initialValue是非必填参数，可作为第一次调用callbackfn函数的第一个参数。

回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue，并且 curValue 等于数组中的第一个值；

var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
    return preValue + curValue;
}); // 10

如果 initialValue 未被提供，那么 preValue 等于数组中的第一个值，curValue 等于数组中的第二个值。

var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
    return preValue + curValue;
}, 5); // 15

从例子中可以看出，对数组的求和我们可以使用 reduce() 方法，当然也可以有更多的用途，比如求最值：

var arr = [7,1,5,3,4];
arr.reduce(function (preValue,curValue,index,array) {

    if (preValue > curValue) {
        return preValue
    } else {
        return curValue
    }

}, 6); // 7

与 reduce() 方法对应的还有 reduceRight() 方法，与 reduce() 方法不同的是 reduceRight() 方法是从后往前做累积。根据不同需求，灵活选择不同的方法。

对于一个数组各项的值求和的问题，我们也可以使用 for 或 while 循环来实现，那么究竟哪一种方法是更高效的呢，我们来做一个实验：

for：

var arr =  [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.time("forFn");
Array.prototype.forFn = function () {
     for (var i = 0; i < 100000; i++) {
         var sum = 0;
         for (var j = 0; j < this.length; j++) {
             sum += parseInt(this[j]); 
         } 
    }
    return sum; 
}
arr.forFn()
console.log('输出结果：' + arr.forFn()); // 45
console.timeEnd("forFn"); // forFn: 5.98779296875ms

while：

var arr =  [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.time("whileFn");
Array.prototype.whileFn = function () {
     for (var i = 0; i < 100000; i++) {
         var sum = 0;
         var j = this.length;
         while (j--)  {
             sum += parseInt(this[j]); 
         } 
    }
    return sum; 
}
arr.whileFn()
console.log('输出结果：' + arr.whileFn()); // 45
console.timeEnd("whileFn"); // whileFn: 5.89013671875ms

reduce()：

 var arr =  [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.time("ruduce");
Array.prototype.sum = function () {
    for (var i = 0; i < 100000; i++) {
        return this.reduce (function (preValue, curValue) {
            return preValue + curValue; });
        } 
    }
console.log('输出结果：' + arr.sum()); // 45
console.timeEnd("ruduce"); // ruduce: 0.27490234375ms

以上测试是在 Mac 端 Chrome 浏览器进行的测试，使用for循环将测试结果放大了十万倍，通过耗时比较不难发现 reduce() 方法更高效，是 for 和 while 的 20多倍，（不同环境，不同浏览器之间会存在一定的差距）。

如需转载，烦请注明出处：http://www.jianshu.com/p/b51700bcd0f4