map/reduce · JS與WEB前端框架技術

[TOC] # map 比如我們有一個函數f(x)=x的平方，要把這個函數作用在一個數組` [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()作為高階函數，事實上它把運算規則抽象了，因此，我們不但可以計算簡單的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()`求積： ~~~js '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('測試失敗!'); } ~~~ ```js function product(arr) { return arr.reduce((x, y) => { return x * y; }) } console.log(product([1, 2, 3, 4])) ``` 要把`[1, 3, 5, 7, 9]`變換成整數13579，`reduce()`也能派上用場： ~~~js 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()`函數： ~~~js '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('測試失敗!'); } ~~~ 參考解答 ```js function string2int(s) { let arr = s.split(''); console.log(arr) return arr.map(Number).reduce(function (x, y) { return x * 10 + y; }); } console.log(string2int("123456")); ``` # 練習 ## 遍歷參數求和 ```js function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } console.log(sum(1, 2, 3)); // expected output: 6 console.log(sum(1, 2, 3, 4)); // expected output: 10 ``` ## 單詞首字母大寫請把用戶輸入的不規范的英文名字，變為首字母大寫，其他小寫的規范名字。輸入：`['adam', 'LISA', 'barT']`，輸出：`['Adam', 'Lisa', 'Bart']`。 ~~~js 'use strict'; function normalize(arr) { return []; } // 測試: if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) { alert('測試通過!'); } else { alert('測試失敗!'); } ~~~ 參考解答： ``` <html> <head> <script> 'use strict'; function normalize(arr) { let x = arr.map((item) => { item = item.toLowerCase(); //charAt()方法得到第一個字母，slice()得到第二個字母以后的字符串 return item.charAt(0).toUpperCase() + item.slice(1); }); return x; } console.log(normalize(['adam', 'LISA', 'barT'])); </script> </head> <body> <h1>測試程序</h1> </body> </html> ``` 小明希望利用`map()`把字符串變成整數，他寫的代碼很簡潔： ~~~js '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)。原因分析由于`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)`函數僅接收一個參數。