JavaScript中不能直接用解构赋值解析URL查询字符串，必须先通过URLSearchParams与Object.fromEntries等方法将其转为对象，再解构；重复键默认只取首个值，多值需手动归集，当前URL参数可用window.location.search获取。
JavaScript 中不能直接用解构赋值“解析” URL 查询字符串，因为解构赋值作用于对象或数组，而查询字符串（如 "name=John&age=30&city=Beijing"）是字符串。必须先将其转换为标准的 JavaScript 对象（例如 { name: "John", age: "30", city: "Beijing" }），之后才能用解构赋值提取所需字段。
1. 先转成对象：用 URLSearchParams + Object.fromEntries
这是现代、简洁且健壮的方式，兼容所有主流浏览器（Chrome 61+、Firefox 60+、Safari 12.1+、Edge 79+）：
const queryString = "name=John&age=30&city=Beijing&hobby=reading&hobby=coding";
// 步骤1：创建 URLSearchParams 实例
const params = new URLSearchParams(queryString);
// 步骤2：转为键值对数组，再转为普通对象
const obj = Object.fromEntries(params);
// 步骤3：解构赋值（支持默认值、重命名、嵌套解构等）
const { name, age, city, hobby = "none" } = obj;
console.log(name); // "John"
console.log(age); // "30"
console.log(city); // "Beijing"
console.log(hobby); // "reading"（注意：重复 key 只保留第一个值）
⚠️ 注意：URLSearchParams 对重复 key（如 hobby=reading&hobby=coding）只保留第一个值。如需获取全部值，得手动处理。
2. 处理多值场景（如 hobby 数组）
若查询参数可能重复（如多个 hobby），应改用 Array.from(params.entries()) 分组归集：
立即学习“Java免费学习笔记（深入）”；
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const queryString = "name=John&hobby=reading&hobby=coding&tag=js&tag=web";
const params = new URLSearchParams(queryString);
const entries = Array.from(params.entries());
// 按 key 归集为对象，重复 key 转为数组
const grouped = entries.reduce((acc, [key, value]) => {
if (acc[key]) {
acc[key] = Array.isArray(acc[key]) ? [...acc[key], value] : [acc[key], value];
} else {
acc[key] = value;
}
return acc;
}, {});
// 解构时可配合逻辑处理
const { name, hobby = [] } = grouped;
const hobbies = Array.isArray(hobby) ? hobby : [hobby];
console.log(hobbies); // ["reading", "coding"]
3. 从当前页面 URL 获取查询参数并解构
实际项目中常需读取当前 URL 的查询字符串，可直接用 window.location.search（带 ?）：
// 假设当前 URL 是 https://example.com/?page=2&sort=date&filter=active
const searchParams = new URLSearchParams(window.location.search);
const obj = Object.fromEntries(searchParams);
const { page = "1", sort = "id", filter } = obj;
console.log(Number(page)); // 2（注意：值始终是字符串，需手动转类型）
console.log(sort); // "date"
console.log(filter); // "active"
? 小技巧：解构后如需数字/布尔等类型，建议在解构后单独转换，或封装一个带类型推导的解析函数，避免在解构语法中强行做类型转换（JS 不支持解构时自动类型转换）。
4. 兼容旧环境的备选方案（无 URLSearchParams 时）
如果需支持 IE 或极老版本，可用正则或 split 手动解析（不推荐用于新项目，仅作了解）：
function parseQuery(str) {
if (!str) return {};
return str.replace(/^\?/, "").split("&").reduce((acc, pair) => {
const [k, v] = pair.split("=");
if (k) acc[decodeURIComponent(k)] = decodeURIComponent(v || "");
return acc;
}, {});
}
const obj = parseQuery("name=John%20Doe&size=large");
const { name, size } = obj; // "John Doe", "large"
该方式需自行处理 URL 编码（decodeURIComponent），且不处理重复 key 和类型转换，稳定性不如 URLSearchParams。
