filter()用于搜索功能，返回匹配关键词的新数组；支持大小写不敏感的模糊匹配、多字段联合搜索、空输入处理及结合状态实现响应式更新。

搜索功能的核心，就是把用户输入的关键词和数据列表中的每一项做匹配，留下符合条件的项。filter() 正是干这件事的——它不修改原数组，而是返回一个新数组，里面只包含通过测试（即返回 true）的元素。

用 filter() 做基础文本匹配

最常见的是模糊匹配：只要某字段包含用户输入的字符串，就保留该项。注意大小写敏感问题，通常转成小写再比更稳妥。

• 对数组每项调用 filter()，传入一个函数作为判断条件
• 在函数里访问当前项的某个属性（比如 name、title），用 includes() 判断是否含关键词
• 关键词和字段都转为小写，避免 “Apple” 匹配不到 “apple”

支持多字段同时搜索

用户可能想在标题、描述、作者等多个字段中找内容。这时不要只查一个字段，而是把多个字段拼起来或分别判断。

• 可以写成：item.title.toLowerCase().includes(key) || item.desc.toLowerCase().includes(key)
• 或者统一提取相关字段组成字符串，比如 [item.title, item.author, item.tag].join(' ').toLowerCase() 再查
• 这样即使关键词分散在不同字段，也能命中（例如搜 “react hooks”，title 是 “React”，tag 是 “hooks”）

处理空搜索或特殊字符

用户还没输、只打了空格、或输入了正则特殊字符（如 . * ?），直接拿去匹配会出错或行为异常。

• 搜索前先 trim() 并判断是否为空字符串，是则直接返回原数组（不做过滤）
• 如果用到了 RegExp（比如需要高亮或更复杂匹配），记得对关键词做转义，防止注入式破坏
• 简单场景下，用 includes() 就够了，不用上正则，也就不必担心转义问题

结合状态更新实现响应式搜索

filter() 本身不自动更新界面，需配合状态变量（如 React 的 useState）触发重渲染。

• 把原始数据存一份（originalList），搜索时基于它调用 filter() 得到 filteredList
• 输入框 onChange 时更新 keyword 状态，并重新计算 filteredList
• 渲染时遍历 filteredList，而不是 originalList，就能实时看到筛选结果