JavaScript数组方法forEach()、map()、filter()的比较

forEach()

最简单的形式

1	Array.prototype.forEach(callback(currentElement))

此方法的作用是：对数组中的每个元素都执行一次传入的callback回调函数，数组中的每个元素会依次传入回调函数，参与回调函数的执行。currentElement就是指当前被传入的数组元素。
返回值：没有返回值(undefined)

var arr = [1, 2, 3];
  var result = arr.forEach(function(currentElement) {
    console.log("当前传入的数组元素是：" + currentElement);
  });
  console.log(result);

完整语法形式

1	Array.prototype.forEach(callback(currentElement, index, array), thisValue)

相比于最简单的形式，回调函数多了两个可选参数index和array，forEach()也多了可选的第二个参数thisValue。我们逐个来看它们的作用：
index：当前被传入的数组元素的索引，就是currentElement的索引
array：调用forEach()的源数组
thisValue：指定回调函数中this的值。当省略它时，回调函数中的this在非严格模式下指向window对象，在严格模式下为undefined。
前两个参数比较好理解，主要看thisValue这个参数。通过例子演示它的作用。

var arr = [1, 2, 3];
       var obj = { total: 0 };
       arr.forEach(function (currentElement) {
           this.total += currentElement;  //this就是传入obj对象
           console.log(this);  
       }, obj);

从输出的结果可以看出回调函数中this的值就是传入的第二个参数obj。所以第二个参数的作用就是：指定回调函数中this的值。第二个参数是啥，回调函数中的this就是啥。

1	如果想传入第二个参数，指定this的值，回调函数不能用箭头函数声明！因为箭头函数中this在定义函数时就已经确定，不能修改。

map()

完整的语法形式：

1	Array.prototype.map(callback(currentElement, index, array), thisValue)

此方法也是对数组的每个元素都执行一次回调函数，但与forEach()不同的是，它是有返回值的，它的返回值是：由每次执行回调函数返回的结果组成的数组。
此方法的参数、每个参数的作用与forEach()都一样，就不再赘述。通过一个案例，感受它与forEach()的不同：

var arr = [1, 2, 3];
       var result = arr.map(function(currentElement) {
       console.log('当前元素是：' + currentElement, '本次的返回值是' + (currentElement + 1));
           return currentElement + 1
       });
       console.log(result);

输出结果：

从输出结果可以看出：（1）map()是有返回值的（2）这个返回值由每次执行回调函数的返回结果组成。

filter()

完整的语法形式

1	Array.prototype.filter(callback(currentElement, index, array), thisValue)

此方法的作用也是对数组中的每一个元素都执行一次回调函数，但与forEach()不同的是，它不仅有返回值，而且它的返回值是：由每次执行回调函数返回true的数组元素构成的数组。
参数、参数作用也和forEach()完全一样，不再赘述。
案例：

var arr = [1, 2, 3];
     var result = arr.filter((currentElement) => {
         console.log('当前元素是：' + currentElement, '本次的返回值是' + (currentElement === 1));
         return currentElement === 1;
     });
     console.log(result);

输出结果：

从输出结果可以看出filter()与map()返回值的不同：
（1）filter()的返回值由源数组中的元素组成，map()的返回值由回调函数的返回值组成。
（2）filter()中，只有当回调函数的返回值为true时，currentElement才会被添加到返回的数组中。map()中，不管回调函数的返回结果是什么，该结果都会被添加到返回的数组中。