比较 JavaScript 的 FormData 对象

Question

我该如何比较FormData对象？在发送ajax请求之前，我想检查表单是否已更改。

但是似乎无法比较对象。是否有将其转换为js对象或优雅的方法？

let a = new FormData()
let b = new FormData()

console.log(a === b ) // returns false

- rho

Answer 1

我会尝试这个

const a = new FormData();

a.append("username", "Alexander");
a.append("accountnum", 123);

const b = new FormData();

b.append("username", "Alexander");
b.append("accountnum", 123);

let different = false
for (let [key, value] of b.entries()) {
  if (a.get(key) !== value) different = true
}

或者您可以尝试在结尾迭代两个对象并比较它们，这可能更加高效。

JSON.stringify([...a.entries()]) === JSON.stringify([...b.entries()])

- alexandercannon

---

这个代码可以进行一些清理，但在我看来这似乎是最明显的方法。 - alexandercannon

这不会捕捉到 b 中有一个条目不在 a 中的更改（尽管如果表单正在动态修改，这只会是一个问题）。 - Quentin

我一直在假设表格不会改变，应该迭代B来改进它。我还假设多次执行get比同时迭代更快，值得运行一些基准测试。 - alexandercannon

我可能在这里错了，但我认为这个解决方案在你有多个相同的键的情况下也不会起作用。 - undefined

Answer 2

您可以使用 formData.entries()。

let a = new FormData()
let b = new FormData()

let arr1 = [];
let arr2 = [];

for(let pair of a.entries()) {
    const key = pair[0];
    arr1.push({[key]: pair[1]})
}

for(let pair of b.entries()) {
    const key = pair[0];
    arr2.push({[key]: pair[1]})
}

然后你可以比较两个对象数组。

- Daniyal Lukmanov

Answer 3

我最终得到了这个。

export default function formDataEqual(one, two) {
    return new URLSearchParams(one).toString() === new URLSearchParams(two).toString();
}

不会考虑字段的顺序，但似乎要简单得多 :)

- Maciej Paprocki

---

目前我发现的最好的方法是在元素本身中使用defaultValue和value。https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement - undefined