应先判断input值是否为空再过滤：用trim()去空格后检查长度，优先用带防抖的oninput而非onchange；多条件筛选统一用布尔表达式组合filter；大数据量用documentFragment、显隐控制或虚拟滚动优化性能。
HTML 表单筛选时，input 值为空却触发过滤怎么办？
常见现象是用户还没输完、甚至刚点进输入框，oninput 或 onchange 就立刻执行了过滤逻辑，导致列表闪退或显示空结果。根本原因在于没做值有效性判断。
- 用
trim()清除首尾空格后判断长度：if (input.value.trim().length === 0)再跳过过滤 - 避免用
onchange做实时筛选——它只在失焦时触发，体验断层；优先选oninput，但要加防抖 - 防抖不是可选项：直接写
setTimeout+clearTimeout即可，延迟 300ms 足够覆盖多数打字间隙
多个筛选条件联动时，如何避免 filter() 嵌套地狱？
当有「分类」select、「关键词」input、「状态」复选框等多个字段时，硬写成 arr.filter(a => cond1).filter(b => cond2).filter(...) 不仅性能差（遍历多次），逻辑也难维护。
- 所有条件统一收口到一个函数里，用布尔表达式组合：
arr.filter(item => (!category || item.category === category) && (!keyword || item.name.includes(keyword)) && (status === undefined || item.status === status)) - 状态类字段（如多选）建议用
Set存已选项：const selectedStatus = new Set([...statusCheckboxes].filter(cb => cb.checked).map(cb => cb.value))，再用selectedStatus.has(item.status) - 别在每次过滤时重复构造正则——如果关键词要忽略大小写，提前用
new RegExp(keyword, 'i')缓存，但注意keyword为空或含特殊字符时需escape
大数据量下 DOM 重绘卡顿，怎么让筛选不“肉”？
纯前端筛几千条数据+每次 innerHTML 替换整个列表，滚动和输入都会明显掉帧。
- 用
documentFragment批量插入节点，避免逐个appendChild - 列表容器设固定高度 +
overflow-y: auto，配合display: none控制行显隐，比删/增 DOM 节点快得多 - 真到上万条，就别硬筛了：改用虚拟滚动（如
react-window类思路），只渲染可视区域的tr或li
移动端 input[type="search"] 触发筛选太敏感？
iOS Safari 的搜索框自带清空按钮，点击后会触发 input 事件，但此时值可能是空字符串，容易误清结果；部分安卓键盘回车键行为也不一致。
- 监听
search事件而非input，它只在用户明确提交（点搜索按钮/按回车）时触发 - 若必须响应清空操作，检查
event.inputType === 'deleteContentBackward'或比对前后值变化，而不是只看当前值 - 在
focus时保存原始值，blur时对比，防止键盘切换导致意外触发
实际项目里最常被忽略的是条件组合的默认态处理——比如「全部分类」该对应 category === '' 还是 category === null，这个值怎么跟后端约定、怎么在 UI 上同步显隐，比算法本身更容易引发线上问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
