01 数据过滤基础
概念与场景
在前端开发中，数据过滤是指从一组数据中筛选出满足条件的子集。常见场景包括用户列表的分页前筛选、表单输入的动态校验以及日志数据的即时分析。通过合理的过滤，可以显著缩小数据规模并提高渲染性能。
理解筛选条件的组成（属性、运算符、布尔组合）有助于编写可维护的过滤逻辑。纯函数的过滤函数在可测试性和并发环境中也更稳定，便于单元测试与缓存优化。
使用Array.filter是实现数据过滤的最基本方式之一，结合简洁的条件表达式，可以避免副作用并提升代码可读性。
// 示例：从用户数组中筛选成年且活跃的用户
const users = [{id: 1, name: '李雷', age: 20, active: true},{id: 2, name: '韩梅梅', age: 17, active: true},{id: 3, name: '张伟', age: 25, active: false}
];
const adults = users.filter(u => u.age >= 18 && u.active);
console.log(adults);
在实现初级筛选时，条件表达式的简洁性往往优先于复杂的逻辑分支。保持数据类型一致、避免隐式转换，是提升稳定性的关键。
02 正则在数据过滤中的应用
正则表达式核心要点
正则表达式是强大的文本过滤工具，高效的模式匹配可以在大数据量中快速过滤目标项。设计正则时应关注字符集、贪婪与非贪婪匹配、以及是否需要全局匹配。
在前端场景中，常见的用途包括筛选符合条件的字符串、提取关键信息以及初步格式校验。预先测试正则在多种输入下的行为，可以避免运行时的性能损耗。
为避免重复构建对象，建议将正则表达式对象在外部作用域进行预编译，避免在循环中反复编译。
// 使用正则筛选邮箱地址
const emails = ['alice@example.com','bob at example.com','carol@example.co.uk','dave@example'
];
const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
const validEmails = emails.filter(e => emailRegex.test(e));
console.log(validEmails);
除了邮箱，正则也可用于筛选含特定前缀、后缀或格式化后的字符串。边界条件处理、如空字符串、特殊字符、跨语言字符集，需要在设计阶段明确。
03 数组方法实现高效过滤
组合使用 filter、reduce、map 的策略
常见的过滤组合是先用filter筛选出符合条件的项，再进行后续映射（map）或聚合（reduce）。这种分步处理在逻辑清晰、可维护方面具备优势。
为了减少数据多次遍历，尽量在一次通过中完成条件判断与映射，必要时使用reduce实现单次遍历的聚合结果。
在需要构建新数组但不希望产生中间副本时，可以考虑使用for…of或forEach结合条件收集，尽管它们在某些引擎中略逊于内建的filter，但在需要微调性能时更灵活。
// 使用 reduce 在单次遍历中完成筛选和映射
const products = [{id: 1, code: 'A100', price: 9.99},{id: 2, code: 'B220', price: 0.0},{id: 3, code: 'C333', price: 19.5}
];
const availableCodes = products.reduce((acc, p) => {if (p.price > 0) acc.push({ id: p.id, code: p.code });return acc;}, []);
console.log(availableCodes);
当数据量较大时，基于循环的实现往往比链式方法更具可预测性。对比测试能帮助你找到在目标平台上的最佳方案。
04 性能优化技巧与常见坑
预编译正则和避免创建不必要的中间数组
在高并发或大数据集场景中，预编译正则表达式、避免在循环中重复创建对象，是提升性能的常见手段。
一个简单的原则是：尽量让耗时操作放在循环之外，如正则初始化、日期格式化等。这样可以减少 GC 压力与内存分配。
另一个要点是，避免在热路径中频繁创建中间数组，如连续通过Array.filter、Array.map产生大量短暂副本。这会增加内存占用和回收负担。
// 避免在循环中创建正则对象
const lines = ['abc123', 'def', 'ghi4'];
const digitRegex = /\\d+/g; // 预编译，不在循环中创建
const numbers = [];
for (let i = 0; i < lines.length; i++) {const m = lines[i].match(digitRegex);if (m) numbers.push(...m);
}
console.log(numbers);
如果一定需要对大数据进行多步过滤，考虑使用Web Worker来把过滤计算放到后台线程，避免阻塞主线程，提升页面交互性。
05 实战案例：结合正则和数组方法的过滤
案例1：筛选出符合条件的用户数据
以下示例展示如何在一个用户数据集合中，同时应用正则校验与布尔条件进行过滤。先对邮箱进行正则筛选，再筛出年龄在18到35岁之间且已激活的用户。
关键步骤包括：定义稳定的正则、分阶段过滤、以及保持代码可读性。
在该案例中，综合使用正则、数组方法与简洁条件表达式，实现可维护且高效的逻辑。
// 实战数据
const users = [{ id: 1, name: '张三', email: 'zhangsan@example.com', age: 28, active: true },{ id: 2, name: '李四', email: 'lisi#example.com', age: 22, active: false },{ id: 3, name: '王五', email: 'wangwu@example', age: 40, active: true },{ id: 4, name: '赵六', email: 'zhaoliu@example.com', age: 19, active: true }
];// 1) 预编译正则：校验邮箱格式
const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;// 2) 过滤条件：邮箱有效、年龄在18-35、且已激活
const filteredUsers = users.filter(u => emailRegex.test(u.email)).filter(u => u.age >= 18 && u.age <= 35 && u.active);console.log(filteredUsers);
这类综合过滤在实际项目中非常常见，尤其是在数据聚合、报表准备和客户端校验阶段。通过将正则与布尔条件分离到独立的可测试步骤，可以提升可维护性与可扩展性。
