JS中如何优雅地为数组应用一组过滤器？求优化方案

嘿，这个问题我太熟了！其实你可以用数组的reduce方法或者过滤器合并的思路，让批量应用过滤器的过程更优雅、更函数式，完全不用手动写循环～

首先，我猜你当前的实现大概是类似这样的手动循环写法：

const targetArray = [1, 3, 5, 7, 2, 4, 6];
const filters = [
  item => item > 2,
  item => item % 2 === 0,
  item => item < 7
];

// 传统循环写法
let result = [...targetArray];
for (const filter of filters) {
  result = result.filter(filter);
}

这种写法没问题，但有两种更优的方案可以让代码更简洁、更符合现代JS的风格：

方案1：用reduce依次应用过滤器 #

利用数组的reduce方法，把过滤器的应用过程简化成一行函数式代码：

const targetArray = [1, 3, 5, 7, 2, 4, 6];
const filters = [
  item => item > 2,
  item => item % 2 === 0,
  item => item < 7
];

const filteredResult = filters.reduce((acc, filter) => acc.filter(filter), targetArray);

这里reduce的初始值是原始数组targetArray，每一步都会用当前过滤器去过滤累积的数组，最后直接得到最终结果。这种写法直观清晰，完全消除了手动循环的冗余代码。

方案2：先合并所有过滤器为单一函数（性能更优） #

如果你的数组很大、过滤器数量较多，可以先把所有过滤器合并成一个回调函数，只遍历数组一次：

// 合并过滤器：只有满足所有过滤条件的元素才会通过
const combinedFilter = item => filters.every(filter => filter(item));
const filteredResult = targetArray.filter(combinedFilter);

every方法会在遇到第一个不满足的条件时就停止判断，所以效率很高，而且数组只需要遍历一次，比reduce方案的多次遍历性能更好，适合大数据量场景。

两种方案的适用场景 #

• reduce方案：更直观，每一步的过滤过程清晰可见，适合需要查看中间过滤结果，或者过滤器之间有依赖关系的场景。
• 合并过滤器方案：性能更优，数组仅遍历一次，适合过滤器无依赖、追求高效的大数据量场景。

如果用TypeScript的话，还可以给过滤器数组加上类型约束，让代码更健壮：

type Filter<T> = (item: T) => boolean;

const targetArray: number[] = [1, 3, 5, 7, 2, 4, 6];
const filters: Filter<number>[] = [
  item => item > 2,
  item => item % 2 === 0,
  item => item < 7
];

内容的提问来源于stack exchange，提问作者Kousha