如何处理动态地址栏参数，以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries(）使用

一、解析地址栏参数并转为对象

• 地址栏（可以是任意动态的参数结构）

http://localhost:8001/#/ModelLib?type=0&token=637009a76eb24a1588cbcdefa8816a44&minerId=eed17a8f12b54f4485c6a9148d2d83a1

  parseHashParams = () => {
    try {
      const [_, query] = window.location.hash.split("?");
      return query ? Object.fromEntries(new URLSearchParams(query)) : {};
   } catch {
      return {};
    }
  };

二、 URLSearchParams

1. 使用URLSearchParams自动解析参数

（1）自动解码URL编码的字符

• URL中的特殊字符（如空格、&、=、%等）会被编码为%xx形式（如空格变为%20或+）。
• URLSearchParams 会自动解码这些字符 ，例如将 %20 转为空格，%3D 转为 =。
• 如果直接手动解析，需要额外调用 decodeURIComponent，否则可能得到未解码的字符串。

---

（2） 处理键值对的分割

• 查询字符串的格式是 key1=value1&key2=value2，但实际场景可能更复杂：

  • 值中包含 =（如 query=foo=bar）。
  • 键重复出现（如 color=red&color=blue）。

• URLSearchParams 能正确识别键值对的分割 ，而手动用 split('&') 和 split('=') 可能错误分割值中的 =。

---

（3） 处理重复键

• 如果同一个键多次出现（如 ?a=1&a=2），URLSearchParams 会保留所有值（可通过 .getAll() 获取数组）。
• 但 Object.fromEntries() 会将重复键的值覆盖（最终对象中只保留最后一个值），这可能是预期行为，也可能是潜在问题，需要开发者注意。

---

（4） 标准化和健壮性

• URLSearchParams 是浏览器原生API，遵循URL解析标准，处理边缘情况更可靠（如空值、无值的键等）。
• 手动解析容易忽略细节（如 ?key&foo= 应解析为 { key: '', foo: '' }）。

2. 基础用法

// 从当前 URL 获取参数
const params = new URLSearchParams(window.location.search);

// 从字符串创建
const params = new URLSearchParams('name=John&age=30');

// 从对象创建
const params = new URLSearchParams({ name: 'John', age: '30' });

URLSearchParams 返回的是一个特殊对象 （URLSearchParams 类的实例），而不是普通的 JavaScript 对象。它的设计目标是提供操作查询字符串的 API （如 .get(), .append(), .entries() 等方法），但直接访问键值对时需要通过这些方法：

• 核心方法

建议直接看MDN上URLSearchParams的实例方法

• getAll()
• append()

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

// 为 foo 添加第二个参数
params.append("foo", 4);

console.log(params.getAll("foo")); // 输出 ["1", "4"]。

• params.get('bar'); // "2"（不存在返回 null）
• params.set('page', '2'); // 设置参数
• params.delete('bar'); // 删除参数
• params.toString()；//转为字符串
• 参数遍历

// 方式1：for...of
for (const [key, value] of params) {
  console.log(key, value);
}

// 方式2：forEach
params.forEach((value, key) => {
  console.log(key, value);
});

三、Object.entries() 、 Object.fromEntries()及URLSearchParams.entries()

上述我们说了URLSearchParams 返回的是一个URLSearchParams 类的实例，而不是普通的 JavaScript 对象，为了更方便像普通对象一样访问键值，我们需要将 URLSearchParams 的键值对转换为普通对象，简化后续操作。

1. URLSearchParams.entries()

用途

• 用于获取 URLSearchParams 实例中所有键值对的迭代器。

const params = new URLSearchParams("name=John&age=25&skill=js");
for (const [key, value] of params.entries()) {
  console.log(key, value); 
  // 依次输出: "name John", "age 25", "skill js"
}

2. Object.entries()

用途

• 将普通对象的属性转换为键值对数组。
• 返回一个由 [key, value] 组成的数组，键和值的类型保持原样。

const obj = { name: "John", age: 25, skill: "js" };
console.log(Object.entries(obj)); 
// 输出: [["name", "John"], ["age", 25], ["skill", "js"]]

特点

• 返回数组 ：结果为二维数组，如 [["name", "John"], ["age", 25]]。
• 处理普通对象：仅处理对象自身的可枚举属性。
• 值类型保留：值的类型可以是任意 JavaScript 类型（数字、布尔值、对象等）。

3. Object.fromEntries()

用途

• 将键值对列表（如数组或迭代器）转换为普通对象。
• 是 Object.entries() 的逆操作。

// 示例1：数组转对象
const entries = [["name", "John"], ["age", 25]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "John", age: 25 }

// 示例2：将 URLSearchParams 转换为对象
const params = new URLSearchParams("name=John&age=25");
const obj = Object.fromEntries(params);
console.log(obj); // { name: "John", age: "25" }（值为字符串）

三者的核心区别

方法	输入类型	输出类型	值类型	重复键处理	典型场景
URLSearchParams.entries()	URLSearchParams 实例	迭代器（[key, value]）	字符串	保留所有重复键	解析 URL 查询参数
Object.entries()	普通对象	数组（[key, value]）	原始类型	对象属性无重复键	遍历对象属性或转换为键值对
Object.fromEntries()	可迭代对象（如数组、Map）	普通对象	由输入决定

关键注意事项

1. 类型差异：

   • URLSearchParams 的值始终是字符串，而 Object.entries() 和 Object.fromEntries() 可以处理任意类型。
   • 示例：URLSearchParams 中的 age=25 会被解析为 "25"（字符串），而 Object.entries() 可能返回数字 25。

2. 重复键行为：

   • URLSearchParams 允许重复键（通过 .getAll() 获取所有值），但 Object.fromEntries() 会覆盖重复键。

3. 输入兼容性：

   • Object.fromEntries() 可直接接受 URLSearchParams 实例（因为它是可迭代对象），无需显式调用 .entries()。

// 解析 URL 查询参数并转换为对象
const params = new URLSearchParams("name=John&age=25&skill=js");
const obj = Object.fromEntries(params);
console.log(obj); // { name: "John", age: "25", skill: "js" }

// 对象转键值对数组，再转回对象
const original = { name: "John", age: 25 };
const entries = Object.entries(original); // [["name", "John"], ["age", 25]]
const newObj = Object.fromEntries(entries);
console.log(newObj); // { name: "John", age: 25 }

总结

• URLSearchParams.entries() ：专为解析 URL 查询参数设计，返回字符串键值对的迭代器。
• Object.entries() ：将普通对象转换为键值对数组，保留值的原始类型。
• Object.fromEntries() ：将键值对列表转换为普通对象，常用于重构对象或处理数据结构转换。

三者结合使用可实现 URL 查询参数解析 → 键值对操作 → 对象转换 的完整流程。