在这段时间，都在廖雪峰的官方网站学习JavaScript的教程。学习到这一章map时，对map的用法相当喜欢。以前对数组的操作都感觉相当烦锁了，但这map让我知道了，对数组的操作原来这可以这么爽。

map()

返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：

1
2
3
4
5
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()，用for也是要以实这个效果：

1
2
3
4
5
6
7
8
9
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]));
}

reduce

对累加器和数组的每个值应用一个函数 (从左到右)，以将其减少为单个值。 

1
2
3
4
5
6
7
8
9
var sum = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
}, 0);
// sum is 6

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { 
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

易犯的错误

通常情况下，map 方法中的 callback 函数只需要接受一个参数（很多时候，自定义的函数形参只有一个），就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数（会传递3个参数）。这个思维惯性可能会让我们犯一个很容易犯的错误。

1
2
3
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

正确的写法是：

1
2
3
4
5
6
function returnInt(element){
  return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]

把parseInt(string[, radix])的radix传进去，上面10是代表十进制。

喜欢在廖雪峰的官方网站看教程学习之一，就是有对应练习题，还可以在评论区看着不同的小伙伴写的各种方法来学习更牛逼的方法。

练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：

1
2
3
4
5
6
7
8
9
'use strict';
function string2int(s) {
var intNum = Array.prototype.map.call(s,function(x){
return x*1;
}).reduce(function(x,y){
return x*10 + y
})
return intNum
}

评论区学习了更简洁的方法：

1
2
3
4
5
6
'use strict';
function string2int(s) {
return s.split('').map(function(x){return x-0}).reduce(function(x,y){
       return x*10+y
    })
}