map/reduce · 廖雪峰 JavaScript Python Git 教程

# map/reduce 如果你讀過Google的那篇大名鼎鼎的論文“[MapReduce: Simplified Data Processing on Large Clusters](http://research.google.com/archive/mapreduce.html)”，你就能大概明白map/reduce的概念。 ## map 舉例說明，比如我們有一個函數f(x)=x<sup>2</sup>，要把這個函數作用在一個數組`[1, 2, 3, 4, 5, 6, 7, 8, 9]`上，就可以用`map`實現如下： ![map](img/0.png) 由于`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)=x<sup>2</sup>，還可以計算任意復雜的函數，比如，把`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()`求積： ``` 'use strict'; function product(arr) { return 0; } // 測試: if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) { alert('測試通過!'); } else { alert('測試失敗!'); } ``` 要把`[1, 3, 5, 7, 9]`變換成整數13579，`reduce()`也能派上用場： ``` var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x * 10 + y; }); // 13579 ``` 如果我們繼續改進這個例子，想辦法把一個字符串`13579`先變成`Array`——`[1, 3, 5, 7, 9]`，再利用`reduce()`就可以寫出一個把字符串轉換為Number的函數。練習：不要使用JavaScript內置的`parseInt()`函數，利用map和reduce操作實現一個`string2int()`函數： ``` 'use strict'; function string2int(s) { return 0; } // 測試: if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) { if (string2int.toString().indexOf('parseInt') !== -1) { alert('請勿使用parseInt()!'); } else if (string2int.toString().indexOf('Number') !== -1) { alert('請勿使用Number()!'); } else { alert('測試通過!'); } } else { alert('測試失敗!'); } ``` ## 練習請把用戶輸入的不規范的英文名字，變為首字母大寫，其他小寫的規范名字。輸入：`['adam', 'LISA', 'barT']`，輸出：`['Adam', 'Lisa', 'Bart']`。 ``` 'use strict'; function normalize(arr) { return []; } // 測試: if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) { alert('測試通過!'); } else { alert('測試失敗!'); } ``` 小明希望利用`map()`把字符串變成整數，他寫的代碼很簡潔： ``` 'use strict'; var arr = ['1', '2', '3']; var r; r = arr.map(parseInt); alert('[' + r[0] + ', ' + r[1] + ', ' + r[2] + ']'); ``` 結果竟然是`[1, NaN, NaN]`，小明百思不得其解，請幫他找到原因并修正代碼。提示：參考[Array.prototype.map()的文檔](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。 <button id="x-why-parseInt-failed" class="uk-button uk-button-success">原因分析</button> 由于`map()`接收的回調函數可以有3個參數：`callback(currentValue, index, array)`，通常我們僅需要第一個參數，而忽略了傳入的后面兩個參數。不幸的是，`parseInt(string, radix)`沒有忽略第二個參數，導致實際執行的函數分別是： * parseInt('0', 0); // 0, 按十進制轉換 * parseInt('1', 1); // NaN, 沒有一進制 * parseInt('2', 2); // NaN, 按二進制轉換不允許出現2 可以改為`r = arr.map(Number);`，因為`Number(value)`函數僅接收一個參數。 <script>$(function () { $('#x-why-parseInt-failed').click(function () { var btn = $(this); btn.attr('disabled', 'disabled'); btn.text('請先思考60秒...'); setTimeout(function () { $('#x-why-parseInt-failed').hide(); $('#x-answer-parseInt-failed').show(); }, 60000); }); });</script>