window.URLSearchParams 在 Edge 上损坏答案

【问题标题】：window.URLSearchParams broken on Edgewindow.URLSearchParams 在 Edge 上损坏
【发布时间】：2020-01-26 18:03:01
【问题描述】：

我正在尝试以下内容；

let formUrl = new window.URLSearchParams(
        new window.FormData(this.searchForm)
      ).toString()

但我得到 '0: Invalid argument'

这适用于除边缘之外的所有浏览器。

以前有没有人遇到过这个问题

【问题讨论】：

您正在尝试哪个 Edge 版本？您是否尝试打印语句的每个部分以查看 Edge 中是否有未定义的内容？

标签： javascript

【解决方案1】：

Edge 中的问题是 they do not support 解构 FormData 对象。（链接表中的for ... of）。

确实，您在代码中依赖于其他浏览器的这种行为，因为URLSearchParams( init ) 构造函数接受record 作为init 参数。

The specs阅读

否则，如果 init 是一条记录，那么对于 init 中的每个 name → value，追加一个名为 name 的新名称-值对em> 和 value 是 value，用于查询的列表。

所以这意味着你的代码实际上在做

const formData = new FormData( searchForm );

const urlParams = new URLSearchParams();
for ( let [ name, value ] of formData ) {
  urlParams.append( name, value );
}
let formUrl = urlParams.toString();

console.log( formUrl );

<form id="searchForm">
  <input name="foo" value="bar">
  <input name="baz" value="bla">
</form>

但是，由于 Edge 再一次不支持 FormData 的解构，因此您的代码会中断。

但是，根据 MDN，他们确实支持 for ... of FormData.entries()，所以也许这会起作用（虽然没有 Edge 可以测试，所以请告诉我）。

let formUrl = new window.URLSearchParams(
  new window.FormData(this.searchForm)
    .entries() // explicitely call .entries() to get the iterator
).toString()

console.log( formUrl );

<form id="searchForm">
  <input name="foo" value="bar">
  <input name="baz" value="bla">
</form>

【讨论】：

我必须将条目分散到一个数组中才能真正让它们在 Edge 中工作。 new URLSearchParams([...(new FormData(this.searchForm)).entries()])

【解决方案2】：

另一个问题的好答案可以为您提供正确的代码：https://stackoverflow.com/a/44033425/1568714

基本上，这样做

new URLSearchParams(Array.from(new FormData(formElement))).toString()

Kaiido 的回答很好地解释了这个问题，但是使用这种方法你会在 iOS Safari 版本 .entries。 (https://caniuse.com/#feat=object-entries)

【讨论】：