调用 filter() 后数据没变是因为未将返回的新数组赋值给变量；filter() 不修改原数组，必须显式赋值并触发重渲染或手动更新 DOM。
点击按钮触发 filter() 时数据没变？检查数组是否被重新赋值
前端本地过滤最常踩的坑是：调用 filter() 后没把返回的新数组赋给变量，原数组不变，DOM 也不更新。JavaScript 的 filter() 不修改原数组，它返回一个新数组。
- 错误写法：
data.filter(item => item.status === 'active')—— 结果被丢弃了 - 正确做法：必须显式赋值，比如
filteredData = data.filter(item => item.name.includes(searchTerm)) - 如果用 React，记得触发重渲染，比如
setFilteredData(...)；纯 HTML + JS 则要手动清空并重写innerHTML - 注意：若
data是对象引用（如从 API 获取的数组），直接赋值没问题；但若用了Object.freeze()或 Proxy 拦截，filter()仍能工作，只是后续 DOM 更新可能失败
按钮绑定事件后无响应？确认 addEventListener 时机和作用域
常见现象是点击按钮控制台没报错，但过滤逻辑完全不执行——大概率是事件监听器没绑上，或绑在了还没生成的元素上。
- 确保 DOM 加载完成后再绑定，比如放在
window.addEventListener('DOMContentLoaded', ...)里，或把 script 放在</body>前 - 避免重复绑定：如果按钮被多次初始化（比如 SPA 页面切换后又执行一遍），会触发多次过滤，导致结果异常
- 函数内用到的变量（如
data、container）必须在闭包中可访问；不要在事件回调里再用document.querySelector查找数据源——容易查到旧节点或 null - 推荐把过滤逻辑抽成独立函数，按钮只负责传参调用，例如：
filterByCategory('electronics')
中文搜索过滤失效？别忽略大小写和全半角问题
includes() 和 indexOf() 对中文基本可用，但遇到用户输入空格、顿号、全角字符时会漏匹配。
- 统一处理：对搜索关键词和字段都做
.trim().toLowerCase()（英文场景），中文建议额外去除全角空格：.replace(/[\u3000\uFEFF]/g, ' ').trim() - 模糊匹配更鲁棒：用正则代替
includes()，例如new RegExp(keyword, 'i').test(item.title)，支持跨字匹配（如“手机”匹配“智能手机”） - 注意性能：长列表（>1000 条）+ 正则全局搜索可能卡顿，可加防抖（
setTimeout+ 清除机制），或限制 keyword 长度 ≥2 字再触发 - 避免直接拼接 HTML 字符串渲染，防止 XSS；用
textContent设置文本，innerHTML只用于已转义的结构化内容
多个按钮对应不同过滤条件？用 data-* 属性解耦逻辑
硬编码每个按钮的 onclick="filterByType('sale')" 很难维护。用自定义属性让 HTML 自带语义，JS 统一处理。
立即学习“前端免费学习笔记（深入）”；
- 按钮写成：
<button type="button" data-filter="status" data-value="draft">草稿</button> - 事件监听里读取：
const filterKey = e.target.dataset.filter; const filterVal = e.target.dataset.value; - 这样新增按钮只需加 HTML，不用改 JS；还能配合 class 控制激活态，比如点击后加
active类，CSS 控制样式 - 注意：
dataset值始终是字符串，数字或布尔需手动转换，比如JSON.parse(e.target.dataset.active)或+e.target.dataset.limit
实际项目里最容易被忽略的是「过滤后空状态处理」——比如所有项都被筛掉，页面只剩空白。这个需要单独判断 filteredData.length === 0 并插入提示文案，而不是依赖 CSS 的 :empty 伪类（它不适用于动态内容）。
