总结- JS之Array对象的filter()、forEach()、map()

总结不同点和相同点写在最后

1. filter()方法（过滤器）

用于过滤出符合条件的数组，作为新数组并返回，不改变原数组，不对空数组进行操作。

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

如，保留奇数

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;    //过滤出奇数
});
r; // [1, 5, 9, 15]

2. forEach()

用于调用数组的每个元素，并将元素传递给回调函数。

array.forEach(function(currentValue, index, arr), thisValue)

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数: 参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

一般，forEach()用来循环数组，可直接取到元素，也可取到index值。

（for...in 对象：取index；

    for...of 数组/字符串/映射Maps/集合：取value，可return，

                                                              不可遍历对象   需和Object.keys()配合。）

forEach()，但不能continue跳过或是break终止循环，没有返回值，不能return。

3.Map()

创建一个新数组，这个新数组 由原数组中的每个元素都 调用一次提供的函数后的返回值 组成。

即 返回值为新数组，由原数组的每个元素执行回调函数的结果组成。

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array //返回新的数组
}[, thisArg])

其中，callback是 生成新数组元素的函数，有三个参数，当前元素、当前元素的索引、调用的数组

4. 相同点：

filter()、forEach()、map()的参数都是 当前元素、当前元素的索引、当前元素所属的数组，匿名函数中的this都是指向window；只能遍历数组。

5. 不同点：

filter()和map()会返回一个新数组，不改变原数组；

forEach()不会产生新数组，返回undefined；

reduce()方法（累加器）是把数组缩减成一个值（如求和、求积），多了第一个参数 init初始值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

（其中，前两个参数必须，total为初始值/计算结束后的返回值。）

例子，

//统计数组 arr 中值等于 item 的元素出现的次数

function count(arr, item) {
    //reduce()方法
    var count = arr.reduce(function(prev, curr) {
        return curr === item ? prev+1 : prev;
    }, 0);
    return count;


    //箭头函数写法
     return arr.reduce((pre,cur)=>{
        return cur==item ? pre+1 : pre;
    },0);
}

参考:https://www.csdn.net/tags/MtTaMg3sMTg1MDYxLWJsb2cO0O0O.html

前端开发之JS中filter()的使用                    JavaScript Array filter() 方法 | 菜鸟教程

https://www.jb51.net/article/213663.htm   JavaScript forEach() 方法 | 菜鸟教程

Array.prototype.map() - JavaScript | MDN

JavaScript reduce() 方法 | 菜鸟教程