Map 与 URLSearchParams 可双向转换，支持高效解析、构造和操作 URL 查询参数：Map 初始化 URLSearchParams；URLSearchParams 转 Map 后可批量增删改查、去重、过滤空值；合并参数时新值优先、空值自动剔除；数组类参数需用 getAll() + append() 手动处理。
JavaScript 中 Map 和 URLSearchParams 配合使用，能高效、安全地解析、构造和操作 URL 查询参数。两者天然兼容——URLSearchParams 的构造函数支持传入 Map，其自身也提供 .entries() 方法返回可被转为 Map 的迭代器。
用 Map 初始化 URLSearchParams
当你已有结构化的键值对（比如从配置、表单或状态中提取），用 Map 构造 URLSearchParams 最直观：
const paramsMap = new Map([ ['page', '2'], ['sort', 'date'], ['tags', 'js,web'], ['active', ''] ]); const searchParams = new URLSearchParams(paramsMap); console.log(searchParams.toString()); // "page=2&sort=date&tags=js%2Cweb&active="
注意：Map 中的空字符串值（如 'active': ''）会被保留为无值参数（active=），符合 URL 规范；null 或 undefined 会转成字符串 "null" 或 "undefined"，需提前过滤。
把 URLSearchParams 转成 Map 方便处理
URLSearchParams 本身不支持直接增删多个键、去重、批量修改等操作，转为 Map 后就非常灵活：
立即学习“Java免费学习笔记（深入）”；
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const searchParams = new URLSearchParams('a=1&b=2&c=&a=3');
// 转为 Map（自动保留最后一个同名键的值）
const map = new Map(searchParams);
// 修改值
map.set('b', 'updated');
map.set('d', 'new');
// 删除键
map.delete('c');
// 批量过滤（例如只保留非空值）
for (const [key, value] of map) {
if (value === '') map.delete(key);
}
// 再转回 URLSearchParams
const updatedParams = new URLSearchParams(map);
console.log(updatedParams.toString()); // "a=3&b=updated&d=new"
⚠️ 注意：URLSearchParams 构造时对重复键默认取最后出现的值（即覆盖），所以转成 Map 后也是单值映射。如需保留多值（如 a=1&a=2），得手动用 searchParams.getAll('a') 处理。
配合 Map 实现参数合并与去重
常见场景：将当前 URL 参数与新参数合并，并确保新值优先、旧值保留、空值被忽略：
- 先用
new Map(URLSearchParams)获取当前参数 - 用
set()批量写入新参数（自动覆盖同名键） - 可选：遍历并
delete()掉值为null/undefined/''的项 - 最后用
new URLSearchParams(map)生成结果
function mergeSearchParams(current, updates) {
const map = new Map(current);
for (const [key, value] of updates) {
if (value != null && value !== '') {
map.set(key, String(value));
} else {
map.delete(key);
}
}
return new URLSearchParams(map);
}
// 示例
const current = new URLSearchParams('x=1&y=2&z=');
const next = mergeSearchParams(current, [['y', 'new'], ['w', '4']]);
console.log(next.toString()); // "x=1&y=new&w=4"
处理数组类参数（如 tags[]=a&tags[]=b）
URLSearchParams 不原生区分单值/多值，但你可以用 Map 存储数组：
- 用
getAll()提取所有同名参数 → 得到字符串数组 - 手动构建
Map<string, string[]>或Map<string, Set<string>> - 需要输出时，遍历每个键及其值数组，多次调用
append()
const searchParams = new URLSearchParams('tags=a&tags=b&tags=c&mode=dark');
// 转为 Map<string, string[]>
const multiMap = new Map();
for (const key of searchParams.keys()) {
if (!multiMap.has(key)) {
multiMap.set(key, searchParams.getAll(key));
}
}
// 去重 tags
if (multiMap.has('tags')) {
const uniqueTags = [...new Set(multiMap.get('tags'))];
multiMap.set('tags', uniqueTags);
}
// 重建 URLSearchParams（对数组项逐个 append）
const result = new URLSearchParams();
for (const [key, values] of multiMap) {
if (Array.isArray(values)) {
values.forEach(v => result.append(key, v));
} else {
result.set(key, values);
}
}
这样就能安全处理标签、复选框等可能提交多个同名参数的场景。
