总结- JS之Array对象的filter()、forEach()、map()
总结不同点和相同点写在最后
1. filter()方法（过滤器）
用于过滤出符合条件的数组，作为新数组并返回，不改变原数组，不对空数组进行操作。
array.filter(function(currentValue,index,arr), thisValue)| 参数 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| function(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) | 必需。 数组中每个元素需要调用的函数。 函数参数:
|
||||||||
| 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() 方法 | 菜鸟教程