Map、reduce 和 filter 都是 JavaScript 中的数组方法。每个都将迭代一个数组并执行转换或计算。每个函数都会根据函数的结果返回一个新数组。在本文中，您将了解为什么以及如何使用每一个。
以下是 Steven Luscher 的有趣总结：
Map
map()方法用于从现有数组创建新数组，并将函数应用于第一个数组的每个元素。
语法
var new_array = arr.map(function callback(item, index, array) {
// Return value for new_array
}[, thisArg])
在回调中，只需要数组element。通常会对该值执行一些操作，然后返回一个新值。
Example
在以下示例中，数组中的每个数字都加倍。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]
Filter
“filter()”方法获取数组中的每个元素，并对其应用条件语句。如果此条件返回 true，则该元素将被推送到输出数组。如果条件返回 false，则该元素不会被推送到输出数组。
语法
var new_array = arr.filter(function callback(item, index, array) {
// Return true or false
}[, thisArg])
filter的语法与map类似，不同之处在于callback函数应返回true以保留元素，否则返回false。在回调中，只需要element。
Examples
在下面的示例中，奇数被“过滤”掉，只留下偶数。
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]
在下一个示例中，filter()用于获取所有成绩大于或等于 90 的学生。
const students = [
{ name: "Quincy", grade: 96 },
{ name: "Jason", grade: 84 },
{ name: "Alexis", grade: 100 },
{ name: "Sam", grade: 65 },
{ name: "Katie", grade: 90 },
]
const studentGrades = students.filter((student) => student.grade >= 90)
console.log(studentGrades) // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
Reduce
reduce()方法将一组值减少为只有一个值。为了获取输出值，它对数组的每个元素运行一个缩减器函数。
语法
arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue);
- previousValue - 上一次调用回调函数时的返回值
- currentValue - 当前正在处理的数组元素
- index - 当前正在处理项的索引
- array - 调用 reduce()方法的数组
- initialValue - 该参数是可选的。如果提供，它将在第一次调用回调函数时用作
previousValue值。
Examples
简单例子
在以往的数组方法中，匿名的回调函数里是传三个参数：item、index、arr。但是在 reduce() 方法中，前面多传了一个参数previousValue，这个参数的意思是上一次调用回调函数时的返回值。第一次执行回调函数时，previousValue 没有值怎么办？可以用 initialValue 参数传给它。
为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：
let arr1 = [1, 2, 3, 4, 5, 6];
arr1.reduce((prev, item) => {
console.log(prev);
console.log(item);
console.log('------');
return 88;
}, 0);
打印结果：
0
1
------
88
2
------
88
3
------
88
4
------
88
5
------
88
6
------
上面的代码中，由于return的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88），其实prev的默认值就是0。
举例1、以下示例将数字数组中的每个数字相加。
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
return result + item;
}, 0);
console.log(sum); // 10
举例 2、统计某个元素出现的次数：
代码实现：
// 定义方法：统一 value 这个元素在数组 arr 中出现的次数
function repeatCount(arr, value) {
if (!arr || arr.length == 0) return 0;
return arr.reduce((totalCount, item) => {
totalCount += item == value ? 1 : 0;
return totalCount;
}, 0);
}
let arr1 = [1, 2, 6, 5, 6, 1, 6];
console.log(repeatCount(arr1, 6)); // 打印结果：3
举例 3、求元素的最大值：
代码实现：
const arr = [2, 0, 1, 9, 6];
// 数组求最大值
const maxValue = arr.reduce((prev, item) => {
return prev > item ? prev : item;
});
console.log(maxValue); // 打印结果：9
举例四、在下一个示例中，reduce()用于将字符串数组转换为单个对象，该对象显示每个字符串在数组中出现的次数。请注意，对reduce 的调用传递了一个空对象{}作为initialValue参数。这将用作传递给回调函数的累加器的初始值（第一个参数）。
var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
var petCounts = pets.reduce(function(obj, pet){
if (!obj[pet]) {
obj[pet] = 1;
} else {
obj[pet]++;
}
return obj;
}, {});
console.log(petCounts);
/*
Output:
{
dog: 2,
chicken: 3,
cat: 1,
rabbit: 1
}
*/
参考链接:JS map reduce filter 函数
