URL查询参数去重需按场景选择策略:按参数名保留首值、对特定参数值合并去重、提取全部值去重,或处理JSON格式参数;均需结合URLSearchParams与Set等手动实现。

URL 查询参数本身不是数组,但多个同名参数(如 tags=js&tags=web&tags=js)在解析后可视为“参数值数组”。去重的关键是明确目标:是去重所有值、保留首个键值对,还是合并特定参数为单个去重后的字符串。JavaScript 没有内置的“URL 参数数组去重”方法,需结合 URLSearchParams 和逻辑处理。
按参数名去重:只留第一个出现的值
这是最常见需求——比如 ?id=100&name=alice&id=200,应保留 id=100,丢弃后面的重复 id。
- 用
URLSearchParams遍历原始参数,配合Set记录已处理的键名 - 遇到新键才追加到新参数实例中,天然保序且高效
- 最后替换原 URL 的
search即可
示例代码:
const url = new URL(urlString);
const params = new URLSearchParams();
const seen = new Set();
for (const [key, value] of url.searchParams) {
if (!seen.has(key)) {
seen.add(key);
params.append(key, value);
}
}
url.search = params.toString();
return url.toString();
};
对某参数的所有值去重合并(如 tags)
当设计上允许多值(tags=js&tags=node&tags=js),你想压缩成 tags=js,node,就得先提取该参数全部值、去重、再拼接。
- 调用
getAll('tags')获取所有tags值组成的数组 - 用
[...new Set(arr)]去重(支持字符串、数字等基本类型) - 用
.join(',')合并,再set()写回参数 - 注意:其他参数不受影响,仅操作指定键
示例代码:
const mergeTags = urlString => {const url = new URL(urlString);
const tags = url.searchParams.getAll('tags');
if (tags.length > 0) {
const uniqueTags = [...new Set(tags)].join(',');
url.searchParams.set('tags', uniqueTags);
}
return url.toString();
};
提取全部参数值去重(不区分参数名)
仅关心“值是否重复”,比如统计所有传入的 ID 或标签文本是否唯一,可忽略键名直接扁平化处理。
- 用
url.searchParams.values()获取所有值的迭代器 - 转为数组后用
Set去重:[...new Set(Array.from(iterator))] - 适用于校验、调试或生成唯一值列表,不用于构造新 URL
示例代码:
const allUniqueValues = urlString => {const url = new URL(urlString);
const values = Array.from(url.searchParams.values());
return [...new Set(values)];
}; // 返回 ['1', 'js', 'web'] 等字符串数组
对象数组类参数的特殊处理
如果参数值本身是 JSON 字符串(如 filters=[{"k":"a","v":"1"},{"k":"a","v":"1"}]),需先 JSON.parse,再按字段去重。
- 不能直接用
Set,因为对象引用不同即视为不重复 - 推荐用
reduce+ 字符串化键(如k+v)判断逻辑重复 - 或用
Map存储已见的特征标识,避免重复解析
示例思路:
const dedupeFilters = urlString => {const url = new URL(urlString);
const filtersStr = url.searchParams.get('filters');
if (!filtersStr) return urlString;
try {
const filters = JSON.parse(filtersStr);
const seen = new Set();
const unique = filters.filter(item => {
const key = `${item.k}-${item.v}`;
if (seen.has(key)) return false;
seen.add(key);
return true;
});
url.searchParams.set('filters', JSON.stringify(unique));
} catch (e) { /* 忽略解析失败 */ }
return url.toString();
};


















