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

`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 属性将成为对象的键，而字段的值则成为对应键的值。

AI卡通生成器

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

51

查看详情

实战示例

下面是一个完整的示例，演示了如何在表单提交时，将 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 表单数据处理方面的效率和代码可读性。

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