直接用 set 去重 url 查询参数的 key 不可行,因相同 key 可对应不同 value;应先用 urlsearchparams 解析为 map,再用 set 提取唯一 key,按策略(first/last/merge/keepall)处理多值,最后用 urlsearchparams 安全拼接。

直接用 Set 去重 URL 查询参数中的重复 key 是行不通的——因为 URL 中相同 key 可能对应不同 value(如 filter=1&filter=2),Set 只能去重字符串,无法区分“key 相同但 value 不同”的合法多值场景。真正有效的自动化清理,是基于业务语义做选择:保留第一个、合并为数组、或取最后一个。Set 在这里更适合辅助提取唯一 key 集合,再配合解析后的结构做决策。
先正确解析 URL 参数为结构化数据
不能直接对 query string 字符串操作。需先解析成键值对列表,保持原始顺序和多值信息:
- 用
URLSearchParams构造实例,遍历其entries()或getAll()方法获取完整映射 - 避免用
Object.fromEntries()直接转对象——它会静默覆盖重复 key,丢失数据 - 推荐存为
Map<string string></string>:每个 key 对应所有原始 value 数组
用 Set 提取唯一 key 并按需处理多值
Set 的作用是快速获得无重复的 key 列表,不参与 value 合并逻辑:
const uniqueKeys = new Set(Array.from(params.entries()).map(([k]) => k))- 遍历这个 Set,对每个 key 调用
params.getAll(key)获取全部值 - 根据策略决定如何保留:取首项(
[0])、合并为逗号串(.join(','))、或保留数组(需后端支持)
生成干净 URL 的安全拼接方式
清理后不要手动拼字符串,防止编码错误:
- 新建
URLSearchParams实例 - 对每个去重后的 key,调用
append(key, value)(单值)或循环append(key, v)(多值保留) - 最后用
toString()获取标准编码后的 query string - 示例:
new URLSearchParams([['a','1'],['a','2']]).toString()→"a=1&a=2"
封装成可复用的清理函数(带策略选项)
把解析、key 提取、value 策略、重建三步封装起来,暴露清晰接口:
cleanUrlParams(url, { strategy: 'first' | 'last' | 'merge' | 'keepAll' })- 内部用 Set 获取 key 列表保证顺序稳定(插入顺序),避免 Object.keys() 的不确定性
- 对
'merge'策略,自动对 value 数组去重(再套一层 Set),再 join —— 此时 Set 才真正用于 value 去重










