javascript - 从 URLSearchParams 恢复数组时，Object.fromEntries 无法按预期工作？

Question

简单代码:

const o = { arr: ['a', 'b'] }
const s = new URLSearchParams(o).toString();
// restore:
const r = Object.fromEntries(new URLSearchParams(s));
console.log({ r })

输出:

  r: { arr: "a,b" } // expected: r: { arr: ["a", "b"] }

如何让Object.fromEntries返回预期的数组？

Answer 1

URLSearchParams 将值强制转换为字符串。这里的值[ 'a', 'b' ]是一个数组，所以调用了数组的toString方法，就像arr.join( ',')，生成字符串“a,b”。

new URLSearchParams({ arr: ['a', 'b'] }).get('arr'); // "a,b"

当您初始化 USP 对象时会发生这种情况 - 它与 Object.fromEntries 无关。这两个 API 都无法自动往返此序列化值，因为它不知道您希望逗号分隔的字符串成为字符串数组。不过，您可以为这些值编写自定义反序列化逻辑。

<小时/>

搜索参数中类似数组或类似集合的值通常表示为同一键的多次出现。要像这样初始化 USP 实例，您需要传入条目而不是类似记录的对象。例如:

const usp = new URLSearchParams([ [ 'arr', 'a' ], [ 'arr', 'b' ] ]);

usp.getAll('arr'); // [ 'a', 'b' ]
usp.toString();    // arr=a&arr=b

这种“复数”值的方法有一些优点(USP API 非常适合它，并且它不涉及任何建立在真实 URL 语法和语义之上的自定义 DSL)和缺点(解释需要特定的知识 - 参数的预期“类型”不会在源中传达，因为您通常无法区分表示具有一个成员的数组的参数和一个表示奇异值的参数)。

如果您确实以这种方式处理数组，则无法直接使用 Object.fromEntries(usp) 将其转换为通用对象，但最终会始终设置 arr 到最后出现的值。但是，您可以在两者之间执行一些映射逻辑，以处理您希望解释为数组的键。