如何在 JavaScript 中使用 map()、filter() 和 reduce()

如果你想学习 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 是累加器,目前为 0a2 里的值是 15。在第一次运行后,累加器中有 15,a2 的值等于下一个,即 39。

即 0 + 15 = 15

现在,在第二次运行时,reduce() 将 a2 的值 39 放到累加器中,然后对两个操作数进行运算。

即 15 + 39 = 54

现在,在第三次运行时,累加器是 15 和 39 的总和,即 54。a2 现在是 reduce() 方法放到累加器中的 20,总和为 54+20=74

这个过程一直持续到数组的结束。

总结

希望你现在对这些高阶数组方法的工作原理有了很好的了解。如果你觉得这篇文章很有帮助,请和朋友们分享它。