本文详细介绍了如何在 javascript 中将 `formdata` 对象高效地转换为一个普通的 javascript 对象。通过利用 `object.fromentries()` 方法，开发者可以轻松地将表单数据从迭代器形式转化为键值对形式，从而实现更直观、便捷的数据访问和操作。文章提供了示例代码，并探讨了转换后的数据结构及潜在的应用场景，是前端开发中处理表单数据的实用技巧。
在现代 Web 开发中，处理用户提交的表单数据是常见的任务。FormData 接口提供了一种方便的方式来构建一组键/值对以代表表单字段及其值，尤其适用于通过 XMLHttpRequest 或 fetch 发送数据。然而，FormData 对象本身并不是一个普通的 JavaScript 对象，它更像是一个可迭代的映射（Map），这意味着我们不能直接通过点运算符（如 formData.firstName）来访问其属性。本文将深入探讨如何将 FormData 转换为一个更易于操作的普通 JavaScript 对象。
理解 FormData 对象
当通过 new FormData(e.target) 从表单元素创建 FormData 实例时，它会捕获表单中所有带有 name 属性的输入字段的值。例如，对于以下 HTML 表单：
<form id="userForm"> <input name="firstName" value="John" /> <input name="lastName" value="Doe" /> <button type="submit">创建用户</button> </form>
以及对应的 JavaScript 事件处理函数：
const formSubmit = (e) => {
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
console.log(formData);
// 尝试直接访问：console.log(formData.firstName) 会是 undefined
// 正确的访问方式是：console.log(formData.get('firstName'))
};
document.querySelector('#userForm').addEventListener('submit', formSubmit);console.log(formData) 的输出会显示 FormData 对象，但它不是一个可直接通过属性名访问的结构。为了获取某个字段的值，必须使用 formData.get('fieldName') 方法。这种访问方式在某些场景下可能不够直观，尤其是在需要将表单数据作为 JSON 发送到后端，或者需要对数据进行批量处理时。
立即学习“Java免费学习笔记（深入）”；
解决方案：使用 Object.fromEntries()
JavaScript 提供了一个非常实用的静态方法 Object.fromEntries()，它可以将一个由键值对（[key, value] 数组）组成的可迭代对象转换为一个新的普通 JavaScript 对象。FormData 对象正好是一个可迭代对象，其迭代器会产生 [name, value] 形式的数组，这与 Object.fromEntries() 的输入要求完美匹配。
因此，将 FormData 转换为普通 JavaScript 对象的解决方案非常简洁：
const formSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
// 使用 Object.fromEntries() 将 FormData 转换为普通对象
const dataObject = Object.fromEntries(formData);
console.log(dataObject);
// 现在可以像访问普通对象属性一样访问了：
console.log(dataObject.firstName); // 输出: John
console.log(dataObject.lastName); // 输出: Doe
};
document.querySelector('#userForm').addEventListener('submit', formSubmit);运行上述代码，console.log(dataObject) 将会输出 { firstName: "John", lastName: "Doe" }，这是一个标准的 JavaScript 对象，可以方便地进行属性访问、修改或序列化为 JSON 字符串。
完整示例代码
结合 HTML 和 JavaScript，一个完整的示例展示了如何实现这一转换：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FormData 到对象的转换</title>
</head>
<body>
<h1>将 FormData 转换为 JavaScript 对象</h1>
<form id="myForm">
<label for="firstName">名:</label>
<input type="text" id="firstName" name="firstName" value="张三"><br><br>
<label for="lastName">姓:</label>
<input type="text" id="lastName" name="lastName" value="李四"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="zhangsan@example.com"><br><br>
<button type="submit">提交表单</button>
</form>
<div id="output"></div>
<script>
const formSubmit = (e) => {
console.log("表单已提交");
e.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(e.target);
// 将 FormData 转换为普通 JavaScript 对象
const dataObject = Object.fromEntries(formData);
console.log("转换后的数据对象:", dataObject);
console.log("访问 firstName:", dataObject.firstName);
console.log("访问 lastName:", dataObject.lastName);
console.log("访问 email:", dataObject.email);
// 将对象内容显示在页面上
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = `
<h2>表单数据（对象形式）:</h2>
<pre>${JSON.stringify(dataObject, null, 2)}</pre>
<p><strong>名:</strong> ${dataObject.firstName}</p>
<p><strong>姓:</strong> ${dataObject.lastName}</p>
<p><strong>邮箱:</strong> ${dataObject.email}</p>
`;
};
document.querySelector('#myForm').addEventListener('submit', formSubmit);
</script>
</body>
</html>注意事项与高级用法
-
同名输入字段的处理： 如果表单中存在多个具有相同 name 属性的输入字段（例如，多个复选框或多选 select），Object.fromEntries() 在转换时只会保留最后一个出现的值。例如：
<input type="checkbox" name="hobbies" value="reading"> 阅读 <input type="checkbox" name="hobbies" value="hiking"> 徒步 <input type="checkbox" name="hobbies" value="coding" checked> 编程
如果只勾选了“编程”，dataObject.hobbies 将是 "coding"。如果勾选了“阅读”和“编程”，dataObject.hobbies 仍然是 "coding"（因为它是最后一个）。
若需要获取所有同名字段的值，应使用 formData.getAll('fieldName') 方法，它会返回一个包含所有值的数组。在这种情况下，可能需要手动遍历 formData.entries() 来构建更复杂的对象结构。
-
文件上传： FormData 对象可以包含文件（File 对象）。当使用 Object.fromEntries() 转换时，文件字段的值将直接是 File 对象本身。例如：
<input type="file" name="profilePicture">
转换后 dataObject.profilePicture 将是一个 File 对象。这对于后续的文件处理（如上传到服务器）非常有用。
兼容性： Object.fromEntries() 是 ES2019 (ES10) 中引入的特性。对于需要支持较旧浏览器的项目，可能需要使用 Babel 等工具进行转译，或者使用替代方法（如手动迭代 formData.entries() 并构建对象）。
总结
将 FormData 转换为普通 JavaScript 对象是前端开发中一项非常实用的技能，它极大地简化了表单数据的处理和后续操作。通过 Object.fromEntries(formData) 这一简洁的方法，开发者可以快速地将表单数据转化为易于访问和操作的结构。了解其工作原理及注意事项，将有助于编写出更健壮、高效的表单处理代码。
