Object.fromEntries 配合 URLSearchParams 可实现 URL 查询参数与 JS 对象的双向同步：加载时解析参数为对象，状态变更时写回 URL；需手动处理类型转换、默认值及 React 中的 popstate 监听。
用 Object.fromEntries 配合 URLSearchParams，可以轻松在浏览器端实现 URL 查询参数与 JavaScript 对象状态的双向同步（即“同构”），无需手动遍历或正则解析。
从 URL 参数还原为状态对象
这是最常见场景：页面加载时，把当前 URL 的查询参数转成一个结构化对象，作为初始状态。
-
URLSearchParams能自动解析 URL 中的?后内容，支持重复键、编码字符等边界情况 -
Object.fromEntries()接收键值对可迭代对象（如searchParams.entries()），直接生成普通对象 - 注意：
URLSearchParams返回的值始终是字符串，如有需要（如数字、布尔），需额外转换
示例：
const url = new URL(window.location.href);const params = Object.fromEntries(url.searchParams.entries());
// ?count=5&active=true → { count: "5", active: "true" }
从状态对象更新 URL 参数
当状态变化（如筛选条件更新）时，把对象写回 URL，保持地址栏可分享、可刷新。
- 先清空现有参数（
searchParams.delete()或新建URLSearchParams实例） - 用
Object.entries(state)获取键值对，再用forEach或展开语法逐个设入 - 最后调用
history.replaceState()或history.pushState()更新地址栏，避免整页刷新
示例：
const newState = { category: "books", page: "2" };const searchParams = new URLSearchParams(Object.entries(newState));
window.history.replaceState(null, "", `?${searchParams}`);
处理类型转换与默认值
原始参数全是字符串，但业务状态常需数字、布尔、数组等类型。建议封装一个安全转换函数。
- 对已知字段做显式转换，比如
page: Number(params.page) || 1 - 布尔值可用
params.flag === "true"判断，避免!!"false"这类误判 - 数组可通过重复键实现（如
?tag=a&tag=b），用searchParams.getAll("tag")获取 - 缺失字段应赋予合理默认值，保证状态结构稳定
封装成可复用的 Hook（React 场景）
在 React 中，可封装为自定义 Hook，自动监听和同步 URL 与组件 state。
- 用
useState管理状态，用useEffect在挂载时读取 URL 参数 - 监听
popstate事件，响应浏览器前进/后退 - 每次状态变更后，调用
replaceState同步 URL，避免触发新 history 记录 - 可选：支持深层嵌套对象序列化（如
filter[name]=John&filter[age]=30），需额外解析逻辑
