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 入门！
