直接用 URLSearchParams 解析地址栏参数，结合 filter 等数组方法实现数据过滤，无需第三方库；通过 entries() 转键值对、类型转换构建过滤对象，再用 filter 方法筛选列表，并支持 replaceState 动态更新 URL。
直接用 URLSearchParams 解析地址栏参数，再结合数组方法（如 filter）做数据过滤，不依赖第三方库，简洁高效。
获取并解析 URL 参数
浏览器原生支持 URLSearchParams，可直接从 window.location.search 创建实例：
const params = new URLSearchParams(window.location.search); // 例如 URL 是 ?category=book&price=50&inStock=true // params 就能读取到这些键值对
常用读取方式：
-
params.get('category')→ 返回第一个匹配值（字符串），不存在则返回null -
params.getAll('tag')→ 返回所有同名参数的数组（适合多选场景，如?tag=js&tag=html） -
params.has('inStock')→ 判断是否存在该参数（布尔值） -
[...params.entries()]→ 转为键值对数组，方便遍历：[['category', 'book'], ['price', '50']]
将参数转为过滤条件对象
实际过滤时，通常需要把字符串参数转成合适类型（如数字、布尔值），再构建成条件对象：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const filters = {};
if (params.has('category')) {
filters.category = params.get('category');
}
if (params.has('price')) {
filters.price = Number(params.get('price'));
}
if (params.has('inStock')) {
filters.inStock = params.get('inStock') === 'true';
}
更简洁写法（带类型转换）：
const filters = Object.fromEntries(
[...params.entries()].map(([k, v]) => {
if (k === 'price') return [k, Number(v)];
if (k === 'inStock') return [k, v === 'true'];
return [k, v];
})
);
用过滤条件筛选数据列表
假设有商品数组 products，每个商品含 category、price、inStock 字段：
const filteredProducts = products.filter(product => {
if (filters.category && product.category !== filters.category) return false;
if (filters.price && product.price > filters.price) return false;
if (filters.inStock !== undefined && product.inStock !== filters.inStock) return false;
return true;
});
支持多条件组合，逻辑清晰。若需模糊搜索或范围筛选（如价格区间），可扩展判断逻辑，比如：
-
filters.minPrice和filters.maxPrice→ 用product.price >= min && -
filters.q（关键词）→ 用product.name.includes(filters.q)
同步更新 URL（保持状态可分享）
用户操作筛选后，建议更新地址栏，方便刷新或分享：
// 假设新条件在 newFilters 对象中
const newParams = new URLSearchParams();
Object.entries(newFilters).forEach(([k, v]) => {
if (v != null && v !== '') newParams.set(k, String(v));
});
history.replaceState(null, '', `?${newParams}`);
注意：replaceState 不触发页面刷新，仅更新 URL；用 pushState 可保留历史记录。
