如何将HTML表单数据转换为JavaScript对象？

HTML表单是向用户请求输入的最基本和推荐的方式。但是当一切都结束时，你如何将表单中的数据传递到JavaScript代码中呢？下面是方法！

将表单数据转换为对象

FormData接口提供了一种简单构建表示表单字段及其值的键/值对集合的方式，然后可以轻松地将其转换为对象。使用FormData()构造函数并传入表单元素的引用将返回适当的结果。

获取FormData对象后，我们只需要使用Object.fromEntries()将其转换为对象。这将生成一个以表单字段名称作为键，其值作为值的普通JavaScript对象。

const formToObject = form => Object.fromEntries(new FormData(form));

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

将表单数据序列化为查询字符串

如果你需要将表单数据序列化为查询字符串而不是对象，你需要对上面的代码进行一些调整。

创建FormData对象后，可以使用Array.from()创建一个条目数组。使用函数的第二个参数，你可以指定如何映射每个条目。在这种情况下，我们希望将每个条目映射为一个字符串，其中键和值由=符号连接，并对每个部分应用encodeURIComponent()。

最后，我们可以使用Array.prototype.join()将字符串数组连接成一个查询字符串，使用&作为分隔符。

const serializeForm = form =>
  Array.from(new FormData(form), field =>
    field.map(encodeURIComponent).join('=')
  ).join('&');

serializeForm(document.querySelector('#form'));
// 'email=test%40email.com&name=Test%20Name'