前端本地多条件筛选在数据量≤1000行时完全可行，核心是用JavaScript驱动filter逻辑；HTML无判断能力，必须通过JS读取FormData并遍历数据匹配条件，避免链式filter和误用表单控件。
前端本地多条件筛选，数据量 ≤ 1000 行时完全可行，核心是用 JavaScript 驱动 filter 逻辑，而不是依赖 HTML 自身能力——HTML 本身不执行任何判断。
为什么不能只写 HTML 就跑起来
HTML 是纯标记语言，没有 if、for、状态记忆或字符串比对能力。你看到的“筛选效果”，背后一定是 JS 在读取 form.elements 或 FormData，再遍历 DOM 或本地数组做匹配。常见错误包括：
- 点击按钮没反应 → 没绑定
submit或change事件，也没event.preventDefault() - 勾选多个 checkbox 后结果为空 → 把
name="brand"的 radio 当成 checkbox 用，实际只提交一个值 - 刷新页面筛选丢失 → 没把当前条件存进
localStorage或同步到 URL 的 query string
用 FormData 安全读取所有筛选项
别手动查 document.querySelectorAll('input[name=xxx]')，容易漏掉 disabled 或动态插入的控件。FormData 能自动聚合同名多选值，且兼容 checkbox、select[multiple]、number 输入框等所有原生表单控件。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 整个筛选区必须包在
<form id="filter-form"></form>内 - checkbox 多选品牌：用
<input type="checkbox" name="brand" value="apple">，别依赖 label 文本 - 价格区间用两个独立字段：
price_min和price_max，后端参数名要一致 - 读取时统一处理：
const formData = new FormData(document.getElementById('filter-form')); - 转成键值对数组：
Array.from(formData.entries())→[["brand", "apple"], ["brand", "samsung"], ["price_min", "100"]]
filter() 必须单次执行，且每个条件默认 true
链式调用 arr.filter(...).filter(...) 会反复创建新数组，中间某次筛空了，后续条件就无从生效；嵌套 if 容易漏分支。正确做法是：对每条数据做一次完整判断，所有已激活条件都满足才保留。
示例逻辑（针对宠物卡片）：
const filters = {
breed: form.breed.value || '',
age: form.age.value || '',
health: form.health.value || ''
};
const visiblePets = pets.filter(pet => {
const matchBreed = !filters.breed || pet.breed === filters.breed;
const matchAge = !filters.age || pet.age === filters.age;
const matchHealth = !filters.health || pet.health === filters.health;
return matchBreed && matchAge && matchHealth;
});
关键点：
- 每个条件表达式以
!filters.xxx || ...开头，确保未填写时不限制 - 精确匹配优先用
===，避免includes()引入误匹配（比如搜 “负” 匹配到 “负责人”） - 如果表格列文本含空格或换行，先
.trim().replace(/\s+/g, ' ')清洗再比对
移动端和可访问性容易被忽略的细节
筛选交互在手机上失效，往往不是 JS 问题，而是 HTML 结构不规范：
- checkbox / radio 的
<label></label>必须包裹<input>，否则 iOS Safari 点击区域极小 - 不要用
div模拟下拉，原生<select multiple></select>自带键盘导航和屏幕阅读器支持 - 筛选后记得
focus()到结果容器首项，方便键盘用户继续操作 - 所有输入控件必须有
id，且对应label[for]，否则无障碍工具无法关联
最常被跳过的其实是空值语义：用户没动某个下拉框，不等于“要排除该字段”，而是“不限”。这个逻辑一旦写反，交集筛选就永远返回空数组。
