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)`函数仅接收一个参数。