JavaScript中FormData到普通对象的转换技巧

`formdata`实例提供了一种方便的方式来收集html表单数据，但其默认并非可直接通过点语法访问属性的普通javascript对象。本文将介绍如何利用`object.fromentries()`方法，将`formdata`实例高效地转换为一个易于操作的键值对对象，从而简化表单数据的访问和处理。

理解FormData对象

在Web开发中，FormData接口提供了一种构建键/值对集合的方式，这些键/值对集合与<form>元素的字段及其值完全相同。它主要用于通过XMLHttpRequest或fetch API发送表单数据，特别是当表单包含文件上传字段时。

然而，FormData实例本身并不是一个普通的JavaScript对象。它是一个可迭代的对象（iterable），这意味着你可以使用for...of循环遍历它，或者将其传递给期望可迭代对象的函数。当你尝试直接通过点语法（如formData.firstName）访问其属性时，会发现这是无效的，因为FormData对象并没有将表单字段作为其自身的属性暴露出来。它更像是一个Map结构，你需要使用formData.get('fieldName')方法来获取特定字段的值。

例如，考虑以下HTML表单和JavaScript代码：

HTML结构：

立即学习“Java免费学习笔记（深入）”；

<form id="userForm">
  <input name="firstName" placeholder="名" />
  <input name="lastName" placeholder="姓" />
  <button type="submit">创建用户</button>
</form>

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()方法正是解决此问题的理想工具。

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

51

查看详情

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结构（与上例相同）：

<form id="userForm">
  <input name="firstName" placeholder="名" />
  <input name="lastName" placeholder="姓" />
  <button type="submit">创建用户</button>
</form>

当用户在表单中输入“John”和“Doe”并提交时，console.log("转换后的对象:", formObject);将输出：

{ firstName: "John", lastName: "Doe" }

此时，formObject.firstName将返回"John"，formObject.lastName将返回"Doe"，实现了我们期望的便捷访问方式。

为什么进行转换？

将FormData转换为普通JavaScript对象有以下几个优点：

1. 便捷的属性访问： 允许使用点语法（object.property）或方括号语法（object['property']）直接访问表单字段值，提高了代码的可读性和编写效率。
2. 与其他库/API的兼容性： 许多JavaScript库和框架（如React、Vue等）以及后端API通常期望接收普通的JavaScript对象作为数据载体。将FormData转换为对象可以更方便地集成这些工具。
3. 数据操作和验证： 转换为普通对象后，可以更容易地对数据进行修改、验证或进一步处理，例如序列化为JSON字符串进行发送。
4. 调试友好： 在控制台中打印普通对象比FormData实例更直观，有助于快速理解数据结构。

注意事项

• 重复的字段名： 如果表单中存在多个同名的输入字段（例如多个复选框），Object.fromEntries()只会保留最后一个字段的值。如果需要处理所有同名字段的值，FormData的getAll('fieldName')方法或手动遍历FormData并构建对象会更合适。
• 文件类型输入： Object.fromEntries()会将文件输入字段的值转换为File对象。如果需要将文件数据作为普通对象的一部分发送（例如通过JSON），通常需要进行额外的处理（如将文件转换为Base64编码的字符串，但这通常不推荐，更推荐直接使用FormData发送文件）。

总结

Object.fromEntries()方法为前端开发者提供了一个简洁而强大的工具，用于将FormData实例转换为普通的JavaScript对象。通过这一转换，可以极大地简化表单数据的访问和处理，提高开发效率和代码的可维护性，使其在现代Web应用开发中成为一项不可或缺的技巧。在需要对表单数据进行复杂操作、验证或与期望普通JavaScript对象的API进行交互时，这一转换尤为有用。

以上就是JavaScript中FormData到普通对象的转换技巧的详细内容，更多请关注php中文网其它相关文章！