前端多条件筛选的核心是确保显隐逻辑不冲突、数量准确、状态可追溯；小数据量用DOM显隐，大数据量需后端分页；统一用style.display控制显隐，避免样式叠加；多选参数必须用formData.getAll()，单选可用get()；结果数量更新须与过滤同步，并处理清空条件的全量匹配；DOM、URL、内存、aria四者状态必须实时一致。
前端多条件筛选的结果展示，核心不是“怎么画出来”，而是“怎么确保显隐逻辑不打架、数量不丢、状态可追溯”。小数据量（≤1000 行）用 DOM 显隐最快；大数据必须后端分页返回，前端只负责渲染和同步 UI 状态。
用 style.display 控制显隐比 classList.toggle() 更稳
多个条件联合过滤时，反复切换 class 容易叠加冲突（比如某行被上一轮设了 hidden，下一轮又加 matched，样式优先级难控）。直接操作 style.display 更干净：
- 初始化时统一设
tr.style.display = 'none'，避免首屏闪动 - 每次过滤只做一次判断：
row.style.display = matchesAll ? '' : 'none' - 别用
visibility: hidden—— 它仍占布局空间，滚动条和高度会错乱 - 表格行数超 500 时，考虑用
documentFragment批量重排，减少重绘
FormData 读取筛选值后，Object.fromEntries() 不能直接用
FormData.entries() 对多选（如 <select multiple></select> 或多个同名 checkbox）只返回最后一个值，会丢数据。必须用 getAll()：
const form = document.querySelector('#filter-form');
const formData = new FormData(form);
const params = Object.fromEntries(
Array.from(formData.keys()).map(key => [
key,
formData.getAll(key) // ✅ 不是 formData.get(key)
])
);
// 结果：{ brand: ['apple', 'samsung'], category: ['phone'] }
- 单选控件（
radio、select）用get()没问题 - 但只要存在多选可能，一律用
getAll()并判断长度：if (params.brand?.length) - 空字符串值（如未选的
select默认项）要主动过滤，否则后端可能误判
筛选结果数量更新必须和过滤逻辑绑定在同一时机
常见错误是：过滤完 DOM，但忘记改「共 xx 项」的文本，或者在重置时漏掉计数重置。正确做法是把计数抽成独立动作：
立即学习“前端免费学习笔记（深入）”；
- 定义
updateResultCount(n)函数，只负责更新 DOM 中带data-count-display的元素 - 每次调用过滤主函数后，立刻传入当前匹配行数：
updateResultCount(matchedRows.length) - 特别注意「清空所有条件」时，要触发一次全量匹配（即不加任何条件），再计数，不能默认设为 0
- 如果用了虚拟滚动或分页，这个数量应是后端返回的
total，而非当前页渲染数
最容易被忽略的是：筛选条件变更时，DOM 显隐、URL 参数、内存状态、aria 属性这四者必须同步更新。差其中一环，用户刷新页面或用键盘导航就会发现“我明明选了，怎么没生效”。
