原文： How to Use map(), filter(), and reduce() in JavaScript
如果你想学习 React，首先要对一些核心的 JavaScript 概念有比较深入的了解。
所以，如果这就是你正在做的事情，首先——干得好！你没有直接开始学习 React，这是一个明智的决定。
其次，React 建立在关键概念上，比如 map()、filter() 和 reduce() 等 JavaScript 方法（毕竟，React 是一个 JavaScript 库）。因此，这使得这些方法成为必须学习的内容。
map、filter 和 reduce 是三种最有用、最强大的高阶数组方法。在本教程中，你将看到这些高阶数组方法是如何工作的。你还会在类比和实例的帮助下，了解你想在哪里使用它们，以及如何使用它们。这将是很有趣的！
如何使用 map() 方法
假设你有一个数组 arrOne，你在其中存储了一些数字，你想对每一个数字进行一些计算，但你也不想弄乱原始数组。
这就是 map() 出现的地方。map() 方法将帮助你做到这一点。
let arrOne = [32, 45, 63, 36, 24, 11]map() 最多需要三个参数，分别是 value/element、index 和 array。
arrOne.map(value/element, index, array)比方说，你想在不改变原数组的情况下将每个元素乘以 5。
下面是相应的代码：
let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; // 这里 num 是数组的值
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)这是输出结果：
[ 160, 225, 315, 180, 120, 55 ]那么这里发生了什么？嗯，我有一个 ArrOne 数组，里面有 6 个元素。接下来，我用 num 作为参数初始化了一个箭头函数 multFive。这将返回 num 和 5 的乘积，其中 num 变量是由 map() 方法提供的数据。
如果你是箭头函数的新手，但对普通函数很熟悉，箭头函数与此相同：
function(num)
{
return num * 5;
}然后，我初始化了另一个变量 arrTwo，它将存储 map() 方法将创建的新数组。
在右边，我在 arrOne 数组上调用了 map() 方法。所以，map() 方法将从索引 [0] 开始挑选该数组的每个值，并对每个值执行所需的计算。然后，它将用计算后的值组成一个新的数组。
重要的是：注意我是如何强调不改变原始数组的。这是因为这个属性使 map() 方法与 forEach() 方法不同。map() 方法会产生一个新的数组，而 forEach() 方法会用计算出的数组改变原始数组。
如何使用 filter() 方法
这个名字有点暴露了它，不是吗？你用这个方法根据你提供的条件来过滤数组。 filter() 方法也会创建一个新的数组。
让我们举个例子：假设你有一个数组 arrName，这个数组存储了一堆数字。现在，你想看看哪些数字可以被 3 整除，并将它们组成一个单独的数组。
下面是相应的代码：
let arrNum = [15, 39, 20, 32, 30, 45, 22]
function divByFive(num) {
return num % 3 == 0
}
let arrNewNum = arrNum.filter(divByFive)
console.log(arrNewNum)输出结果如下：
[ 15, 39, 30, 45 ]让我们来分解一下这段代码。这里，我有一个数组 arrNum，里面有 7 个元素。接下来，我初始化了一个以 num 为参数的函数 divByFive。它在每次传递新的 num 进行比较时都会返回真或假，其中 num 变量是由 filter() 方法提供的数据。
然后，我初始化了另一个变量 arrNewNum，它将存储 filter() 方法将创建的新数组。
在右边，我在 arrNum 数组上调用了 filter() 方法。所以，filter() 方法将从index[0] 开始挑选该数组的每个值，并对每个值进行操作。然后，它将用计算出来的值形成一个新的数组。
如何使用 reduce() 方法
比方说，你被要求找出一个数组中所有元素的总和。现在，你可以使用 for 循环或 forEach() 方法，但 reduce() 是为这类任务而设计的。
reduce() 方法通过对元素集体进行所需的操作，将数组减少为一个单一的值。
让我们来看看上面的例子，并对其使用 reduce()：
let arrNum = [15, 39, 20, 32, 30, 45, 22]
function sumOfEle(num, ind) {
return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle)
console.log(arrNum2)输出结果如下：
203
一切都与 map() 和 filter() 方法相同——但重要的是要理解 reduce() 方法在后台是如何工作的。
reduce() 方法并没有一个明确的语法。让我们看看最简单的一种，这将让你了解所有可以使用 reduce() 的方法的要点。
下面是 reduce() 的一些语法示例：
//以上面的数组为例
let arrNum = [15, 39, 20, 32, 30, 45, 22]arr.reduce((a1, a2) => {
return a1 + a2
})看一下这个语法。这里，reduce() 接收两个参数，a1 和 a2，其中 a1 作为累加器，而 a2 是索引值。
现在，在第一次运行时，累加器等于零，a2 里是数组的第一个元素。reduce() 所做的是，它把 a2 的值放到累加器中，并将其递增到下一个。之后，reduce() 方法对两个操作数进行操作。在这个例子中，它是加法。
所以，基本上 a1 是累加器，目前为 0，a2 里的值是 15。在第一次运行后，累加器中有 15，a2 的值等于下一个，即 39。
即 0 + 15 = 15
现在，在第二次运行时，reduce() 将 a2 的值 39 放到累加器中，然后对两个操作数进行运算。
即 15 + 39 = 54
现在，在第三次运行时，累加器是 15 和 39 的总和，即 54。a2 现在是 reduce() 方法放到累加器中的 20，总和为 54+20=74。
这个过程一直持续到数组的结束。
总结
希望你现在对这些高阶数组方法的工作原理有了很好的了解。如果你觉得这篇文章很有帮助，请和朋友们分享它。