`formdata` 对象在处理表单数据时非常有用，但其默认的键值对访问方式可能不够直观。本教程将介绍如何利用 `object.fromentries()` 方法，将 `formdata` 实例高效地转换为一个易于属性访问的普通 javascript 对象，从而简化数据处理流程。
理解 FormData 对象
在 Web 开发中，FormData 接口提供了一种轻松构建键值对集合以表示表单字段及其值的方法。它主要用于通过 XMLHttpRequest 或 fetch API 发送表单数据，尤其是在处理文件上传时。当你通过 new FormData(formElement) 创建一个 FormData 实例时，它会自动收集表单中所有 name 属性有效的输入字段。
然而，FormData 对象本身并不是一个普通的 JavaScript 对象。它更像是一个可迭代的 Map 结构，你可以使用 get()、set()、append() 等方法来操作其数据，或者通过 for...of 循环遍历其键值对。例如，要获取某个字段的值，你需要使用 formData.get('fieldName')：
const formSubmit = (e) => {
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
console.log(formData.get('firstName')); // 获取 'firstName' 字段的值
console.log(formData.get('lastName')); // 获取 'lastName' 字段的值
};
document.querySelector('form').addEventListener('submit', formSubmit);对应的 HTML 结构可能如下：
这种访问方式虽然有效，但对于习惯了直接通过 object.property 方式访问数据的开发者来说，可能不够直观和便捷，尤其是在需要将表单数据进一步处理为 JSON 对象时。
立即学习“Java免费学习笔记（深入）”；
转换之道：Object.fromEntries()
为了将 FormData 转换为一个普通的 JavaScript 对象，我们可以利用 Object.fromEntries() 方法。这个方法是 ECMAScript 2019 (ES2019) 引入的，它接收一个可迭代的 [key, value] 对数组（或任何可迭代对象），并返回一个由这些键值对组成的新对象。
FormData 对象恰好就是这样一个可迭代对象，当对其进行迭代时，它会按顺序生成 [name, value] 形式的数组。因此，Object.fromEntries(formData) 能够完美地将 FormData 实例中的所有字段及其值转换为一个普通的 JavaScript 对象，其中表单字段的 name 属性将成为对象的键，而字段的值则成为对应键的值。
实战示例
下面是一个完整的示例，演示了如何在表单提交时，将 FormData 转换为一个普通对象，并进行访问：
const formSubmit = (e) => {
console.log("表单已提交");
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
// 使用 Object.fromEntries() 将 FormData 转换为普通对象
const dataObject = Object.fromEntries(formData);
console.log("转换后的数据对象:", dataObject);
// 现在可以像访问普通对象属性一样访问数据：
console.log("姓名 (firstName):", dataObject.firstName);
console.log("姓氏 (lastName):", dataObject.lastName);
// 示例：转换后的对象可以轻松地用于发送到后端 API
// fetch('/api/users', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json' // 如果发送 JSON
// },
// body: JSON.stringify(dataObject)
// })
// .then(response => response.json())
// .then(data => console.log('API 响应:', data))
// .catch(error => console.error('请求出错:', error));
};
// 为表单添加提交事件监听器
document.querySelector('form').addEventListener('submit', formSubmit);对应的 HTML 结构，为了更好的用户体验，我们添加了 label 和 id：
当用户填写表单并点击“创建用户”按钮后，控制台将输出类似以下内容：
表单已提交
转换后的数据对象: { firstName: '张', lastName: '三' }
姓名 (firstName): 张
姓氏 (lastName): 三通过这种方式，我们成功地将 FormData 转换为了一个普通的 JavaScript 对象，极大地简化了数据的访问和后续处理。
注意事项
在使用 Object.fromEntries() 转换 FormData 时，需要注意以下几点：
- 重复字段处理： 如果表单中存在多个同名的输入字段（例如，多个复选框具有相同的 name），FormData 会将它们都包含在内。然而，Object.fromEntries() 在遇到重复的键时，会默认只保留最后一个值。如果你需要获取所有同名字段的值（例如，将它们收集到一个数组中），你需要对 FormData 进行额外的迭代处理，而不是直接使用 Object.fromEntries()。
- 数据类型： FormData 对象中的所有值都将被视为字符串。即使你在输入框中输入的是数字，通过 Object.fromEntries() 转换后，它们仍然是字符串类型。如果需要数字、布尔值或其他类型，你需要在获取到对象后手动进行类型转换。
- 浏览器兼容性： Object.fromEntries() 是 ES2019 的特性。现代浏览器（如 Chrome 73+、Firefox 63+、Safari 12.1+、Edge 79+）均已良好支持。对于需要兼容旧版浏览器的项目，可能需要引入相应的 Polyfill。
总结
Object.fromEntries() 方法为处理 FormData 对象提供了一个简洁而强大的工具。通过将其转换为一个普通的 JavaScript 对象，开发者可以更直观地访问表单数据，并将其无缝集成到各种数据处理流程中，例如发送到后端 API、进行本地验证或更新 UI 状态。理解并掌握这一技巧，将显著提升你在 Web 表单数据处理方面的效率和代码可读性。
