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