`formdata`实例提供了一种方便的方式来收集html表单数据，但其默认并非可直接通过点语法访问属性的普通javascript对象。本文将介绍如何利用`object.fromentries()`方法，将`formdata`实例高效地转换为一个易于操作的键值对对象，从而简化表单数据的访问和处理。
理解FormData对象
在Web开发中，FormData接口提供了一种构建键/值对集合的方式，这些键/值对集合与
JavaScript代码（初始）：
const formSubmit = (e) => {
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
// 尝试直接访问属性会失败
console.log("尝试直接访问 firstName:", formData.firstName); // undefined
console.log("尝试直接访问 lastName:", formData.lastName); // undefined
// 正确的访问方式
console.log("使用 get() 方法访问 firstName:", formData.get('firstName'));
console.log("使用 get() 方法访问 lastName:", formData.get('lastName'));
};
document.querySelector('#userForm').addEventListener('submit', formSubmit);在上述代码中，formData.firstName和formData.lastName会返回undefined，因为FormData对象不提供这种直接的属性访问方式。
解决方案：使用Object.fromEntries()转换
为了实现更便捷的数据访问，将FormData实例转换为一个普通的JavaScript对象是一个常见的需求。ES2019引入的Object.fromEntries()方法正是解决此问题的理想工具。
Object.fromEntries()方法接收一个可迭代的键值对（[key, value]数组）作为参数，并返回一个由这些键值对组成的新对象。由于FormData对象本身就是可迭代的，并且在迭代时会产生[fieldName, fieldValue]形式的键值对，因此可以直接将其传递给Object.fromEntries()。
示例代码：
const formSubmit = (e) => {
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
// 将 FormData 转换为普通 JavaScript 对象
const formObject = Object.fromEntries(formData);
console.log("转换后的对象:", formObject);
// 现在可以像访问普通对象属性一样访问表单数据了
console.log("通过对象访问 firstName:", formObject.firstName);
console.log("通过对象访问 lastName:", formObject.lastName);
};
document.querySelector('#userForm').addEventListener('submit', formSubmit);HTML结构（与上例相同）：
当用户在表单中输入“John”和“Doe”并提交时，console.log("转换后的对象:", formObject);将输出：
{ firstName: "John", lastName: "Doe" }此时，formObject.firstName将返回"John"，formObject.lastName将返回"Doe"，实现了我们期望的便捷访问方式。
为什么进行转换？
将FormData转换为普通JavaScript对象有以下几个优点：
- 便捷的属性访问： 允许使用点语法（object.property）或方括号语法（object['property']）直接访问表单字段值，提高了代码的可读性和编写效率。
- 与其他库/API的兼容性： 许多JavaScript库和框架（如React、Vue等）以及后端API通常期望接收普通的JavaScript对象作为数据载体。将FormData转换为对象可以更方便地集成这些工具。
- 数据操作和验证： 转换为普通对象后，可以更容易地对数据进行修改、验证或进一步处理，例如序列化为JSON字符串进行发送。
- 调试友好： 在控制台中打印普通对象比FormData实例更直观，有助于快速理解数据结构。
注意事项
- 重复的字段名： 如果表单中存在多个同名的输入字段（例如多个复选框），Object.fromEntries()只会保留最后一个字段的值。如果需要处理所有同名字段的值，FormData的getAll('fieldName')方法或手动遍历FormData并构建对象会更合适。
- 文件类型输入： Object.fromEntries()会将文件输入字段的值转换为File对象。如果需要将文件数据作为普通对象的一部分发送（例如通过JSON），通常需要进行额外的处理（如将文件转换为Base64编码的字符串，但这通常不推荐，更推荐直接使用FormData发送文件）。
总结
Object.fromEntries()方法为前端开发者提供了一个简洁而强大的工具，用于将FormData实例转换为普通的JavaScript对象。通过这一转换，可以极大地简化表单数据的访问和处理，提高开发效率和代码的可维护性，使其在现代Web应用开发中成为一项不可或缺的技巧。在需要对表单数据进行复杂操作、验证或与期望普通JavaScript对象的API进行交互时，这一转换尤为有用。
