如何获取带name属性的表单元素键值对对象？FormData返回空对象

嘿，我懂你遇到的困惑——用new FormData(form)创建表单数据后，直接console.log(formData)却显示空对象，但其实数据并没有丢失！

为什么会显示空对象？ #

FormData是浏览器专门为表单数据传输设计的特殊对象，它本质上是一个可迭代的键值对集合，但浏览器控制台默认不会自动展开它的内部内容，所以看起来像是空的。

两种获取目标对象的方法 #

如果你想得到一个以表单元素name为键、value为对应值的普通JS对象，可以试试下面两种方法：

方法1：用forEach遍历转换

手动遍历FormData的每一项，把键值对存入普通对象：

var form = document.getElementById('myForm');
var formData = new FormData(form);
var formObj = {};

// 遍历FormData，填充普通对象
formData.forEach((value, key) => {
  formObj[key] = value;
});

console.log(formObj); // 现在就能看到预期的键值对了

方法2：用Object.fromEntries快速转换（ES6+）

这是更简洁的写法，直接把FormData转换成普通对象：

var form = document.getElementById('myForm');
var formData = new FormData(form);
var formObj = Object.fromEntries(formData);

console.log(formObj);

额外验证：查看FormData的真实内容 #

如果只是想确认FormData里有没有数据，也可以直接遍历它：

// 用forEach遍历
formData.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 或者用for...of循环
for (let [key, value] of formData) {
  console.log(key, value);
}

注意：FormData只会收集带有name属性的表单元素，你的表单里username已经设置了name属性，所以这部分没问题~

内容的提问来源于stack exchange，提问作者Reza Saadati