filter多条件组合只生效最后一个，因每次返回新数组导致链式调用实为覆盖；应统一在单次filter内用布尔表达式组合条件，并注意防抖、Web Worker优化及UI状态同步。
filter 多条件组合时为什么只生效最后一个？
因为 filter 每次返回的是新数组，链式调用看似“叠加”，实则后一次 filter 是在前一次结果上重新遍历——如果中间某次返回空数组，后续就彻底中断。更常见的是用单次 filter 内部写复合判断，但逻辑一多就容易漏掉 && 或括号层级出错。
正确做法是把所有筛选条件收拢进一个函数，用布尔表达式显式组合：
const result = data.filter(item => (keyword === '' || item.title.includes(keyword)) && (status === 'all' || item.status === status) && (priceRange[0] === '' || item.price >= Number(priceRange[0])) && (priceRange[1] === '' || item.price <= Number(priceRange[1])) );
- 每个条件都用括号包裹，避免运算符优先级干扰
- 空值（如未选状态、未填价格）要显式跳过，不能靠
item.status === status直接比较 -
Number()转换必须加，否则字符串'100'和数字50比较会出错
日期范围筛选怎么和 filter 配合不踩坑？
日期字段常是字符串（'2024-03-15'）或 Date 对象，直接用 >/ 比较可能因格式不一致返回 <code>false。比如 '2024-3-5' 和 '2024-03-15' 字符串比大小，前者反而更大。
稳妥方案：统一转为时间戳再比较：
const startDate = from ? new Date(from).getTime() : 0;
const endDate = to ? new Date(to).getTime() : Infinity;
data.filter(item => {
const itemTime = new Date(item.date).getTime();
return itemTime >= startDate && itemTime <= endDate;
});
- 注意
new Date()对非法字符串（如空值、null）会返回NaN，务必先判空或兜底 - 不要在
filter回调里反复调用new Date(item.date)，性能敏感场景可提前计算好时间戳字段
搜索关键词高亮需要重走 filter 吗？
不需要。filter 只管数据筛选，高亮是渲染层的事。强行在 filter 里拼 HTML 字符串，既污染数据又破坏纯函数特性。
正确分工：
-
filter输出干净的匹配数组 - 渲染时对每个
item.title做replace(new RegExp(keyword, 'gi'), '<mark>$&</mark>') - 若 keyword 为空字符串，正则会报错，需提前 guard：
keyword ? new RegExp(keyword, 'gi') : /.^/
移动端输入实时搜索卡顿怎么办？
每次 input 事件都触发 filter + 重渲染，尤其数据量 > 100 条时，JavaScript 主线程频繁执行会明显掉帧。
两个硬性处理点：
- 加防抖：用
setTimeout延迟执行，间隔至少 300ms，且上一次定时器必须clearTimeout - 数据量大时，考虑用
Web Worker把filter逻辑移出主线程（但要注意Worker不能直接访问 DOM，只传数据）
最常被忽略的是：防抖后没重置 loading 状态或清空上次结果，导致 UI 状态错乱。
