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：
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复制代码 更多教程可以参考阮一峰老师的ECMAScript 6 入门！