从 FormData 对象中删除空键的最佳方法？

Question

我正在使用 FormData 构建 Ajax 请求，但找不到消除空键的可接受方法。

我写了自己的方法来做到这一点，但我想知道，有没有一种方法可以在没有迭代器的情况下做到这一点，或者更有效的方法来迭代它？

let payload = new FormData(document.querySelector('#form'));
[...payload.entries()].forEach(([key, value]) => {
    if (value == 0) payload.delete(key);
});

我预计会对该特定函数进行大量调用，因此每一点优化都会有所帮助。

Answer 1

如果您想过滤整个

FormData

对象，您将无法避免迭代器，因为

FormData

将始终返回带有键/值对的对象。

如果您可以使用最新的 JS 来处理某些事情（或者至少是相对较新的事情），那么最简单/可读的版本可能会使用 Array.filter()。类似于以下内容。

let data = Array
   .from(new FormData(document.querySelector('#form')))
   .filter(function([k, v]) { return v });

Array.from()

用于将对象强制转换为数组原型，以便您可以在其上使用

filter()

。但您可以轻松地对其使用当前的数组强制。

使用 Filter（而不是当前的）的一个好处是 Filter 将返回一个包含清理后的数据的新数组，而不是像您当前所做的那样改变当前的有效负载。

MDN 参考链接

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Answer 2

我认为您能做的最好的事情就是使用可用于 FormData 对象的本机工具：

实现

FormData

的对象可以直接在

for...of

结构中使用，而不是

entries()

：

for (const p of myFormData)

相当于

for (const p of myFormData.entries())

。

IMO 下面的示例更具可读性。

let payload = new FormData(document.querySelector('#form'));

for (let [key, value] of payload.entries())
{
   if (value === '') payload.delete(key);
}