廖雪峰教程筆記：js中map和reduce的用法

標籤：script   files   計算   http   ace   i++   white   bsp   自己的   

舉例說明，比如我們有一個函數f(x)=x2，要把這個函數作用在一個數組[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map實現如下：

由於map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果：

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()傳入的參數是pow，即函數對象本身。

你可能會想，不需要map()，寫一個迴圈，也可以計算出結果：

var f = function (x) {    return x * x;};var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var result = [];for (var i=0; i<arr.length; i++) {    result.push(f(arr[i]));}

的確可以，但是，從上面的迴圈代碼，我們無法一眼看明白“把f(x)作用在Array的每一個元素並把結果產生一個新的Array”。

所以，map()作為高階函數，事實上它把運算規則抽象了，因此，我們不但可以計算簡單的f(x)=x2，還可以計算任意複雜的函數，比如，把Array的所有數字轉為字串：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];arr.map(String); // [‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘]

只需要一行代碼。

reduce

再看reduce的用法。Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上，這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方說對一個Array求和，就可以用reduce實現：

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

練習：利用reduce()求積：

function product(arr) {

　　return arr.reduce(function (x,y) {
　　　　　　return parseInt(x)*parseInt(y);
　　　　　　});

}// 測試:if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {    alert(‘測試通過!‘);}else {    alert(‘測試失敗!‘);}

 

廖雪峰教程筆記：js中map和reduce的用法