在前端开发中，表单是一个非常基础和重要的组件。而有时我们需要将表单数据转化为 JavaScript 对象进行处理，这时候 jQuery 提供了方便的方法来实现此功能。
表单数据序列化
在介绍如何将表单数据转化为 JavaScript 对象之前，我们先来了解一下表单数据的序列化。
表单数据序列化是将表单中的键值对序列化成可传输或存储的格式的过程。jQuery 中提供了 serialize() 和 serializeArray() 两种方法可以用于表单数据的序列化：
serialize()：返回字符串类型的序列化结果，并且默认情况下会将空格转换为加号 (+)。serializeArray()：返回数组类型的序列化结果。
例如以下 HTML 表单：
-- -------------------- ---- -------
------
------ ----------- --------------- -------------
------ ------------ ------------ -------------------------
------- --------------
------- --------------------------
------- -------------- ------------------------
---------
------ --------------- ------------ --------------- ---------------
------ --------------- ------------ -------------------------
--------- -------------------- -----------------
-------使用 serialize() 方法序列化后的结果为：
"username=John&email=john%40example.com&gender=female&hobby=reading&hobby=swimming&message=Hello+world%21"
使用 serializeArray() 方法序列化后的结果为：
[
{ name: "username", value: "John" },
{ name: "email", value: "john@example.com" },
{ name: "gender", value: "female" },
{ name: "hobby", value: "reading" },
{ name: "hobby", value: "swimming" },
{ name: "message", value: "Hello world!" }
]将表单数据转化为 JavaScript 对象
有了表单数据的序列化方法之后，我们就可以将其转化为 JavaScript 对象了。
首先，我们需要获取到表单数据并进行序列化。可以使用 jQuery 的 serializeArray() 方法或者原生的 FormData 对象来实现：
// 使用 serializeArray() 方法
var $form = $('form');
var data = $form.serializeArray();
// 使用 FormData 对象
var $form = document.querySelector('form');
var formData = new FormData($form);接着，我们可以遍历序列化后的数组，并将每个键值对存储到一个 JavaScript 对象中。
考虑到表单可能存在同名元素的情况（比如多选框），我们可以使用对象的“属性名为数组”的形式来处理这种情况。
以下是将表单数据转化为 JavaScript 对象的示例代码：
-- -------------------- ---- -------
-------- ------------------ -
-- ---------------
--- --- - ---
-- ---------------
--- ---- - - -- - - ------------ ---- -
--- ---- - -------------
--- ----- - --------------
-- ---------- --- ---------- -
--------- - ------
- ---- -
-- ---------------------------
-- --------------------------- -
--------- - ------------
-
----------------------
-
-
------ ----
-
-- -- ---------------- --
--- ----- - ----------
--- ---- - -----------------------
--- --- - -------------------
-- -- -------- --
--- ----- - -------------------------------
--- -------- - --- ----------------
--- --- - --------------------------------------总结
将表单数据转化为 JavaScript 对象在前端开发中非常常见。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14798