URLSearchParams可高效管理地址栏多级过滤参数，支持按组写入、精准清空指定层级、静默更新URL并同步UI状态，且能封装为复用函数。
用 URLSearchParams 管理地址栏参数，既能清晰组织多级过滤条件（比如分类、价格区间、排序、页码），又能一键清空所有或指定层级的参数，无需手动拼接字符串或正则替换。
构建多级过滤参数：按业务逻辑分组写入
多级过滤通常对应不同维度：一级如 category（商品类目）、brand（品牌）；二级如 price_min/price_max（价格区间）；三级如 sort（排序）、page（分页）。可先定义参数结构，再批量写入：
- 把过滤条件整理成对象，例如：
{ category: "laptop", price_min: "5000", sort: "sales_desc", page: "2" } - 创建
URLSearchParams实例，遍历对象写入：const params = new URLSearchParams();<br>Object.entries(filters).forEach(([k, v]) => v != null && params.set(k, v));
- 保留当前 URL 的基础路径（不含查询参数），再拼上新参数：
const url = `${location.origin}${location.pathname}?${params}`;
一键清空：按“级”精准移除，不误伤其他参数
所谓“多级过滤”，意味着某些参数是强关联的（如 price_min 和 price_max 应同时存在或同时清除），而另一些是独立的（如 page 可单独重置）。清空时不应简单删光所有参数，而是按语义分组处理：
- 定义参数分组映射，例如：
const filterGroups = {<br> category: ["category", "brand"],<br> price: ["price_min", "price_max"],<br> sort: ["sort"],<br> pagination: ["page"]<br>}; - 清空某一级（如价格筛选）只需删掉对应键：
const params = new URLSearchParams(location.search);<br>filterGroups.price.forEach(key => params.delete(key));<br>history.replaceState(null, "", `${location.pathname}?${params}`); - 清空全部过滤参数（保留分页等非过滤类参数）：只删已知过滤字段，跳过
page、utm_*等：
同步更新地址栏 + 页面状态，避免跳转刷新
直接修改 location.href 会触发页面刷新，体验差。推荐用 history.replaceState 静默更新 URL，并同步更新 UI 状态（如高亮选中项、重置表单）：
- 更新前保存当前参数快照（用于对比变化）：
const prev = Object.fromEntries(new URLSearchParams(location.search)); - 生成新参数后，调用
replaceState更新地址栏：history.replaceState({ filters: newFilters }, "", `${location.pathname}?${params}`); - 随后触发自定义事件（如
filterchange），让组件响应新参数并重新拉取数据。
封装成可复用函数：传参即用，支持默认值与忽略项
把常用操作封装为工具函数，提升复用性与可维护性：
-
setFilters(filters, { keep: ["page"], ignoreEmpty: true })：写入时自动忽略空值，保留指定参数 -
clearFilters("price")：清空 price 组；clearFilters(["category", "brand"])：清空指定键；clearFilters()：清空全部过滤参数（按预设白名单） - 内部自动处理
URLSearchParams实例创建、replaceState调用和事件派发，业务层只关注“做什么”，不操心“怎么做”
