高階函數(shù)
函數(shù)的參數(shù)可以接收另一個(gè)函數(shù)，這類函數(shù)稱之為高階函數(shù)
map
JavaScript的map()是Array中的一個(gè)方法，調(diào)用Array的map()方法會(huì)返回一個(gè)新的Array
function foo(item) {
return item * item;
}
[1, 3, 5, 7, 9].map(foo); // [1, 9, 25, 49, 81]
篤、篤、篤（敲黑板）
首先舉個(gè)栗子??
var arr = ['1', '2', '3'];
arr.map(parseInt);
// ？
// ？
首先要理解map()：
一般map 方法中的 callback 函數(shù)只需要接受一個(gè)參數(shù)，也就是正在被遍歷的數(shù)組元素本身。
但這并不意味著 map 只給 callback 傳了一個(gè)參數(shù)，而是三個(gè)。
// array.map(function(currentValue, index, arr), thisArg)
// 參數(shù)：
// currentValue 必須。當(dāng)前元素的值
// index 可選。當(dāng)期元素的索引值
// arr 可選。包含當(dāng)期元素的數(shù)組對(duì)象。
// thisArg 可選。 可在 callback 函數(shù)中為其引用 this 關(guān)鍵字的對(duì)象。 如果省略 thisArg，則 undefined 將用作 this 值。
順帶了解一下parseInt：
通常使用parseInt時(shí)，只需要傳遞一個(gè)參數(shù)，但實(shí)際上，parseInt可以有兩個(gè)參數(shù)，第二個(gè)參數(shù)是進(jìn)制數(shù)，默認(rèn)是十進(jìn)制。
此時(shí)你可能已經(jīng)想到了，map方法在調(diào)用callback時(shí)，給parseInt傳了三個(gè)參數(shù)， 第三個(gè)參數(shù)parseInt會(huì)忽視, 但第二個(gè)參數(shù)不會(huì)，也就是說，parseInt把傳過來的索引值當(dāng)成進(jìn)制數(shù)來使用，從而返回了NaN。
var arr2 = ['10', '10', '10', '10', '10', '10'];
arr2.map(parseInt); // [10, NaN, 2, 3, 4, 5]
這個(gè)問題可以自己寫一個(gè)簡(jiǎn)單的方法來處理：
var arr = ['1', '2', '3'];
function returnInt(element){
return parseInt(element,10);
}
arr.map(returnInt); // 返回[1,2,3]
reduce
Array的reduce() 方法接收一個(gè)函數(shù)callbackfn 作為累加器，這個(gè)回調(diào)函數(shù)必須接收兩個(gè)參數(shù)，對(duì)數(shù)組中的值從左到右兩兩合并，最終返回一個(gè)值。
語(yǔ)法：
array.reduce(function(preValue,curValue,index,array) {},[initialValue])
callbackfn函數(shù)，而這個(gè)函數(shù)包含四個(gè)參數(shù):
// preValue: 上一次調(diào)用回調(diào)返回的結(jié)果，或者是提供的初始值（initialValue）
// curValue: 當(dāng)前值
// index: 當(dāng)前值的索引
// array: 調(diào)用 reduce()方法的數(shù)組
initialValue是非必填參數(shù)，可作為第一次調(diào)用callbackfn函數(shù)的第一個(gè)參數(shù)。
回調(diào)函數(shù)第一次執(zhí)行時(shí)，preValue 和 curValue 可以是一個(gè)值，如果 initialValue 在調(diào)用 reduce() 時(shí)被提供，那么第一個(gè) preValue 等于 initialValue，并且 curValue 等于數(shù)組中的第一個(gè)值；
var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10
如果 initialValue 未被提供，那么 preValue 等于數(shù)組中的第一個(gè)值，curValue 等于數(shù)組中的第二個(gè)值。
var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
return preValue + curValue;
}, 5); // 15
從例子中可以看出，對(duì)數(shù)組的求和我們可以使用 reduce() 方法，當(dāng)然也可以有更多的用途，比如求最值：
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() 方法對(duì)應(yīng)的還有 reduceRight() 方法，與 reduce() 方法不同的是 reduceRight() 方法是從后往前做累積。根據(jù)不同需求，靈活選擇不同的方法。
對(duì)于一個(gè)數(shù)組各項(xiàng)的值求和的問題，我們也可以使用 for 或 while 循環(huán)來實(shí)現(xiàn)，那么究竟哪一種方法是更高效的呢，我們來做一個(gè)實(shí)驗(yàn)：
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('輸出結(jié)果：' + 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('輸出結(jié)果：' + 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('輸出結(jié)果：' + arr.sum()); // 45
console.timeEnd("ruduce"); // ruduce: 0.27490234375ms
以上測(cè)試是在 Mac 端 Chrome 瀏覽器進(jìn)行的測(cè)試，使用for循環(huán)將測(cè)試結(jié)果放大了十萬倍，通過耗時(shí)比較不難發(fā)現(xiàn) reduce() 方法更高效，是 for 和 while 的 20多倍，（不同環(huán)境，不同瀏覽器之間會(huì)存在一定的差距）。
如需轉(zhuǎn)載，煩請(qǐng)注明出處：http://www.lxweimin.com/p/b51700bcd0f4
