用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
[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)`函数仅接收一个参数。