在前端开发中，我们经常需要将一个 JavaScript 对象转换为表单数据，以便通过 HTTP POST 请求来向服务器发送数据。本文将介绍如何使用原生 JavaScript 将 JS 对象转换为表单数据，并提供示例代码和实用技巧。
使用 FormData 对象
在浏览器端，FormData 对象可以方便地构造表单数据。我们可以通过 new FormData() 构造一个空的表单对象，然后使用 append() 方法向表单对象添加键值对。
以下是将 JS 对象 data 转换为 FormData 对象的示例代码：
----- ---- - -
----- -------
------ -------------------
---- --
--
----- -------- - --- -----------
--- ------ --- -- ----- -
-- -------------------------- -
-------------------- -----------
-
-上述代码首先创建了一个名为 data 的 JavaScript 对象，其中包含三个属性：name、email 和 age。然后，我们创建了一个名为 formData 的 FormData 对象，并遍历 data 对象的所有属性，将它们作为键值对添加到 formData 对象中。
使用 URLSearchParams 对象
如果您需要支持较老的浏览器或不想使用 FormData 对象，可以使用 URLSearchParams 对象来构造表单数据。URLSearchParams 对象提供了一组方法，可以方便地构造查询字符串。
以下是将 JS 对象 data 转换为 URLSearchParams 对象的示例代码：
----- ---- - -
----- -------
------ -------------------
---- --
--
----- ------------ - --- ------------------
--- ------ --- -- ----- -
-- -------------------------- -
------------------------ -----------
-
-上述代码首先创建了一个名为 data 的 JavaScript 对象，其中包含三个属性：name、email 和 age。然后，我们创建了一个名为 searchParams 的 URLSearchParams 对象，并遍历 data 对象的所有属性，将它们作为键值对添加到 searchParams 对象中。
实用技巧
下面是一些实用技巧，可以帮助您在将 JS 对象转换为表单数据时更加高效和灵活：
将数组转换为表单数据
如果您需要向服务器发送包含数组的表单数据，可以使用 append() 方法的第二个参数来指定数组索引。
以下是将 JS 对象 data 转换为包含数组的 FormData 对象的示例代码：
----- ---- - -
----- -------
------ -------------------
-------- ----------- ---------- ------------
--
----- -------- - --- -----------
--- ------ --- -- ----- -
-- -------------------------- -
-- -------------------------- -
--- ---- - - -- - - ----------------- ---- -
------------------------------- --------------
-
- ---- -
-------------------- -----------
-
-
-将复杂对象转换为表单数据
如果您需要将嵌套的 JavaScript 对象转换为表单数据，可以使用递归方法来处理。
以下是将包含嵌套对象的 JS 对象 data 转换为 FormData 对象的示例代码：
----- ---- - -
----- -------
------ -------------------
-------- -
------- ---- ---- ----
----- ----------
------ ----
-
--
-------- ----------------------- ----- ---------- -
-- ----- -- ------ ---- --- -------- -- ------ ---------- ----- -- ------ ---------- ------ -
----------------------------- -- -
----------------------- ---------- --------- - ---------------------- - -----
---
- ---- -
----- ----- - ---- -- ---- - -- - -----
-------------------------- -------
-
-
----- -------- - --- -----------
----------------------- ----- ----结论
在本文
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28420