`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 结构可能如下：
<form> <input name="firstName" /> <input name="lastName" /> <button type="submit">创建用户</button> </form>
这种访问方式虽然有效，但对于习惯了直接通过 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：
<form> <label for="firstName">名:</label> <input type="text" id="firstName" name="firstName" placeholder="请输入名" required> <br> <label for="lastName">姓:</label> <input type="text" id="lastName" name="lastName" placeholder="请输入姓" required> <br> <button type="submit">创建用户</button> </form>
当用户填写表单并点击“创建用户”按钮后，控制台将输出类似以下内容：
表单已提交 转换后的数据对象: { 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 表单数据处理方面的效率和代码可读性。