【JavaScript】Map、Reduce 和 Filter - 通过代码示例解释 JS 数组函数

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 函数