在 JavaScript 中，我们经常需要对数组进行处理，其中两个常用的函数是 map() 和 filter()。map() 函数可以遍历数组并进行变换操作，而 filter() 函数则可以筛选出符合条件的元素。但有时候我们需要同时进行这两种操作，该怎么做呢？本文将介绍如何在 JavaScript 中同时使用 map() 和 filter() 对数组进行处理。
使用链式调用
最简单的方法是使用链式调用，即先使用 filter() 函数对数组进行筛选，再使用 map() 函数对筛选后的结果进行变换。例如，我们有一个数组 arr：
----- --- - --- -- -- -- ---
如果要筛选出大于等于 3 的元素，并将它们每个乘以 2，可以这样写：
----- ------ - -------------- -- --- -- ---------- -- --- - --- -- ------- --- -- ---
这段代码中，首先使用 filter() 函数筛选出大于等于 3 的元素，得到 [3, 4, 5] 这个子数组，然后使用 map() 函数对这个子数组中的每个元素进行乘以 2 的操作，得到最终的结果 [6, 8, 10]。
需要注意的是，由于 JavaScript 中的函数是可以返回函数的，因此也可以将上述操作写成这样：
----- -------- - --------- -- ----- -- ------------------------ ----- ----- - --------- -- ----- -- --------------------- ----- ------ - --- -- ------------ -- --- -- -- -- --------- -- --- - --- -- ------- --- -- ---
这段代码使用了 ES2021 的管道运算符 |>，将数组 arr 传递给 filterBy() 函数，筛选出大于等于 3 的元素；然后将得到的子数组传递给 mapTo() 函数，将每个元素乘以 2。
使用 reduce() 函数
除了链式调用外，我们还可以使用 reduce() 函数来同时进行 map() 和 filter() 操作。reduce() 函数是 JavaScript 中最强大的函数之一，它可以对数组中的所有元素进行迭代，并返回一个累积的值。在本文的例子中，我们使用 reduce() 函数来实现同时进行 map() 和 filter() 操作：
----- ------ - ---------------- ---- -- -
-- ---- -- -- -
------------ - ---
-
------ ----
-- ----
-- ------- --- -- ---这段代码首先使用 reduce() 函数初始化一个空数组作为累加器 acc，然后遍历数组 arr 中的每个元素 num，如果 num 大于等于 3，则将 num * 2 的结果加入到 acc 数组中。最终，reduce() 函数返回的累积值就是我们需要的结果。
需要注意的是，使用 reduce() 函数对数组进行操作时，每次循环都必须返回一个累积值，否则代码会报错。
总结
在 JavaScript 中同时使用 map() 和 filter() 对数组进行处理是一种常见需求，可以通过链式调用或者 reduce() 函数来完成。链式调用代码简洁易读，而 reduce() 函数则更加灵活，适用于一些复杂的处理场景。尽管本文只是介绍了两种方法，但是它们足以满足大多数前端开发的需求。
示例代码：
----- --- - --- -- -- -- --- -- ------ - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------