使用 JavaScript 将表单转换为对象

简介

在本实验中，我们将探索如何使用 JavaScript 将一组表单元素转换为一个对象。我们将利用 FormData 构造函数和 Array.from() 方法来创建一个表单数据数组。然后，我们将使用 Array.prototype.reduce() 方法将表单数据收集到一个对象中。在本实验结束时，你将对如何使用 JavaScript 收集和整理表单数据有更深入的理解。

将表单转换为对象

为了练习编码，打开终端/SSH 并输入 node。你可以通过以下步骤将一组表单元素编码为一个对象：

使用 FormData 构造函数将 HTML form 转换为 FormData。
使用 Array.from() 将 FormData 转换为数组。
使用 Array.prototype.reduce() 从数组中收集对象。

以下是一个示例代码片段：

const formToObject = (form) =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

要转换特定的表单，你可以调用 formToObject 函数并将表单元素作为参数传入：

formToObject(document.querySelector("#form"));
// { email: 'test@email.com', name: 'Test Name' }

总结

恭喜你！你已经完成了“将表单转换为对象”实验。你可以在 LabEx 中练习更多实验来提升你的技能。