forEach,map,filter的区别使用

最近面试的时候遇到面试官问我这个问题，当时我因为只用过这个最基本的forEach这个迭代方法，所以只能说出这个方法的大概，然而被问到参数的时候，因为习惯性只会用前两个参数，没想到还有第三个参数。下面经过我自己查阅资料以及总结之后，为大家带来这个三个迭代方法的区别与相同之处。

相同之处

forEach

最早知道这个方法的时候是使用Jquery的迭代方法Each，有兴趣的朋友可以去了解一下，基本的使用情况都是差不多的。首先举一个常用的例子。

   var array = [[1,2,3,4],[2,4,5,6]]

    array.forEach(function (item,i,arr) {
        console.log('item的值:'+item)  //第一次是[1,2,3,4] 第二次是[2,4,5,6]
        console.log('i的值:'+i)          //第一次是0   第二次是1
        console.log(arr)                 //都是指向这个数组arr
        console.log(item[i]);           //第一次是1  第二次是4
    })

item是每次遍历的子元素，i是下标，arr这个用的比较少，实际发现指向的就是当前遍历的数组array

Map

这个方法的使用跟forEach没有什么区别，而且参数都是一样的。

filter（过滤器）

这个也是跟forEach相同的参数。用法稍微有点区别。

不同之处

1、是否有返回值

forEach

 var arr = [[1,2,3,4],[2,4,5,6]]
 console.log(arr.forEach(function (item, i) {

        return item
    }));            

结果如下：

Map

  var arr = [[1,2,3,4],[2,4,5,6]]
  console.log(arr.map(function (item, i) {

        return item
    }));

结果如下：

filter

  var arr = [[1,2,3,4],[2,4,5,6]]
  console.log(arr.filter(function (item, i) {

        return item
    }));

结果如下：

可以从中看到forEach的返回值是undefined，而Map和filter的返回值确实相同的。那么Map与filter到底有什么不同之处呢？

由于filter的翻译是过滤器的意思，所以filter更多时候是用来筛选条件符合的元素。如下：

  var a = [1,2,3,4,5,6,7,8,9,10]
    console.log(a.map(function (item, i) {

        return item >5
    }));



    console.log(a.filter(function (item, i) {

        return item >5
    }));

分别输出的结果是


filter返回的是一个新的数组，而Map返回的是原来的数组。将原来的数组对于条件返回。

总结

forEach、Map、filter三个迭代方法都各有优势，如果不需要返回值，只需要操作的话，可以直接使用forEach，如果需要返回值的话，可以使用Map、filter方法，如果需要条件筛选的话，可以直接用filter。