map()和filter详解

map()和filter()在项目开发中，使用频率非常之高。对数组操作，提供了很大的便利。因此我觉得有必要总结总结。但是意外看了张鑫旭老师的总结原文地址通俗易懂。于是乎我便成了一名站在巨人肩膀上的搬运工，话不多说，往下瞧瞧。

map()方法

这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法类似。

array.map(callback,[ thisObject]);

callback(回调函数)的参数也类似：

[].map(function(value, index, array) {
    // ...
});

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
  return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16

callback需要有return值，如果没有，就像下面这样：

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});
arrayOfSquares.forEach(console.log);

结果如下图，可以看到，数组所有项都被映射成了undefined：

结果

在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子（之后的兼容demo也是该例子）：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

Array.prototype扩展可以让IE6-IE8浏览器也支持map方法：

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}

结果显示如下图，IE6浏览器：

结果

下面一起看个经典的面试题。

["1", "2", "3"].map(parseInt);
肯定有很多人会说这不是[1,2,3]吗?非也，非也...
它返回的值为[1,NaN,NaN]
是不是很意外，这又是为什么呢？
因为map的callback函数有三个参数，正在遍历的元素, 元素索引(index), 原数组本身(array)。parseInt有两个参数，string和radix(进制)。只传入parseInt的话，map callback会自动忽略第三个参数array。而index参数不会被忽略。而不被忽略的index(0,1,2)就会被parseInt当做第二个参数。

将其拆开看：
parseInt("1",0);//上面说过第二个参数为进制，所以"1"，被转为0进制不存在，所以返回Number类型的1。
parseInt("2",1);//此时将2转为1进制数，由于超过进制数1，所以返回NaN。
parseInt("3",2);//同理返回NaN。
所以最终的结果为[1,NaN,NaN]。

那么如果要得到[1,2,3]该怎么写。
["1","2","3"].map((x)=>{
    return parseInt(x);
});
也可以简写为：
["1","2","3"].map(x=>parseInt(x));

这样写为什么就能返回想要的值呢？因为，传一个完整函数进去，有形参，有返回值。这样就不会造成因为参数传入错误而造成结果错误了，最后返回一个经纯函数处理过的新数组。

filter()方法

filter为“过滤”、“筛选”之意。指数组filter后，返回过滤后的新数组。用法跟map极为相似：

array.filter(callback,[ thisObject]);

filter的callback函数需要返回布尔值true或false. 如果为true则表示通过啦！如果为false则失败。

可能会疑问，一定要是Boolean值吗？我们可以简单测试下嘛，如下：

var data = [0, 1, 2, 3];
var arrayFilter = data.filter(function(item) {
    return item;
});
console.log(arrayFilter); // [1, 2, 3]

有此可见，返回值只要是弱等于== true/false就可以了，而非非得返回 === true/false.

因此，我们在为低版本浏览器扩展时候，无需关心是否返回值是否是纯粹布尔值（见下黑色代码部分）：

if (typeof Array.prototype.filter != "function") {
  Array.prototype.filter = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          fn.call(context, this[k], k, this) && arr.push(this[k]);
       }
    }
    return arr;
  };
}

接着上面map筛选邮件的例子:

var emailsZhang = users
  // 获得邮件
  .map(function (user) { return user.email; })
  // 筛选出zhang开头的邮件
  .filter(function(email) {  return /^zhang/.test(email); });
console.log(emailsZhang.join(", ")); // zhang@email.com

更多es6教程可以参考阮一峰老师的ECMAScript 6 入门！