forEach()和map()的区别和理解

下面经过我自己查阅资料以及总结之后，为大家带来这个三个迭代方法的区别与相同之处。

相同之处 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
    }));

分别输出的结果是

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