怎么将JS表单序列化结果转换为JSON对象

在前端开发与接口对接过程中，前后端通信大多遵循 Content-Type: application/json 规范。然而浏览器原生的表单提交或各类序列化工具（例如 FormData、jQuery 的 serialize()、以及形如 key1=value1&key2=value2 的查询字符串）给出的默认结果通常是流式条目或键值编码字符串。将这些表单序列化结果精准、无损地还原为 JavaScript 对象（进而通过 JSON.stringify 生成合法的 JSON 字符串），是表单提交与数据校验的关键一环。

本文从实际开发中最常见的几种序列化形态出发，分别介绍基于原生现代 API、多选复选框兼容处理、URL 编码字符串解析以及对象数组归约的具体解法，并给出工业级可复用的封装函数。

一、原生表单最简转换：FormData 配合 Object.fromEntries

如果当前表单结构简单，每个字段名（name 属性）都只对应单一值（例如普通文本输入框、单选按钮 radio、单选下拉框 select），现代 JavaScript 标准库提供了直接从表单节点转换为普通对象的标准语法：

// 假设页面存在表单：<form id="userForm">...</form>
const formElement = document.getElementById('userForm');

// 1. 获取 FormData 键值流，并借助 Object.fromEntries 一键成形
const formData = new FormData(formElement);
const formObject = Object.fromEntries(formData.entries());

// 2. 转为最终要发送给后端的 JSON 字符串
const jsonString = JSON.stringify(formObject);

console.log('转换结果对象：', formObject);
console.log('JSON 字符串：', jsonString);

new FormData(formElement) 会自动抽取表单中具备 name 属性且未被禁用的控件值，返回一个可迭代的 FormData 实例。紧接着调用 Object.fromEntries() 即可直接把 [key, value] 迭代器铺平为一个标准的 JavaScript 对象。

二、支持多选与复选框：健壮的通用转换函数

为了在生产项目中万无一失地处理复选框（checkbox）或多选下拉菜单（<select multiple>），我们需要遍历 FormData 条目，当侦测到重复出现的键名时，自动将其升格为数组存储。以下是开箱即用的健壮转换函数：

/**
 * 将 HTML 表单节点转换为标准的 JSON 对象（支持多选与复选框）
 * @param {HTMLFormElement} form - 表单 DOM 节点
 * @returns {Record<string, any>} 转换后的普通对象
 */
function formDataToJSON(form) {
  const formData = new FormData(form);
  const result = {};

  for (const [key, value] of formData.entries()) {
    if (!Object.prototype.hasOwnProperty.call(result, key)) {
      // 首次出现该字段：按常规标量存储
      result[key] = value;
    } else if (Array.isArray(result[key])) {
      // 已是数组：直接追加新值
      result[key].push(value);
    } else {
      // 第二次出现同名键：将原有单值升级为数组，并加入新值
      result[key] = [result[key], value];
    }
  }

  return result;
}

通过这套逻辑，普通的单值输入框仍以纯净的字符串存储，而勾选了多个选项的复选框组则被自然聚合成字符串数组，契合后端绝大部分数据绑定模型。

三、处理已序列化的 URL 编码字符串（QueryString）

在维护使用 jQuery 或旧版表单插件的项目中，往往会遇到已经通过 $(form).serialize() 序列化好的字符串，其格式类似于：

username=zhangsan&roles=editor&roles=admin&city=%E5%8C%97%E4%BA%AC

切忌自行使用 str.split('&') 与 split('=') 进行粗暴切分，因为表单值可能包含等号、特殊字符或经过 URI 编码的中文。正确的解法是借助现代浏览器与 Node.js 均内置的标准 URLSearchParams 接口：

/**
 * 将序列化查询字符串转换为 JSON 对象
 * @param {string} queryString - 形如 "a=1&b=2&b=3" 的序列化字符串
 * @returns {Record<string, any>} 解析后的 JSON 对象
 */
function serializeStringToJSON(queryString) {
  // 过滤可能包含在开头的 '?'
  const cleanStr = queryString.startsWith('?') ? queryString.slice(1) : queryString;
  const params = new URLSearchParams(cleanStr);
  const result = {};

  for (const [key, value] of params.entries()) {
    if (!Object.prototype.hasOwnProperty.call(result, key)) {
      result[key] = value;
    } else if (Array.isArray(result[key])) {
      result[key].push(value);
    } else {
      result[key] = [result[key], value];
    }
  }

  return result;
}

// 运行示例
const serializedStr = "title=Article&tag=js&tag=web&author=%E6%9D%8E%E9%9B%B7";
const articleObj = serializeStringToJSON(serializedStr);
console.log(articleObj);
// 输出：{ title: "Article", tag: ["js", "web"], author: "李雷" }

四、处理数组型序列化结果（serializeArray 格式）

有些前端组件或库（如 jQuery 的 $(form).serializeArray()）会将表单字段序列化成由名值对象构成的数组，结构如下：

[
  { "name": "nickname", "value": "coder" },
  { "name": "skills", "value": "CSS" },
  { "name": "skills", "value": "JavaScript" }
]

对于这种结构，使用 Array.prototype.reduce 能够以最地道的函数式方式将其规约为单一的 JSON 对象：

/**
 * 将 serializeArray 数组转换为标准的 JSON 对象
 * @param {Array<{name: string, value: any}>} list - 名值对数组
 * @returns {Record<string, any>}
 */
function serializeArrayToJSON(list) {
  return list.reduce((acc, { name, value }) => {
    if (!Object.prototype.hasOwnProperty.call(acc, name)) {
      acc[name] = value;
    } else if (Array.isArray(acc[name])) {
      acc[name].push(value);
    } else {
      acc[name] = [acc[name], value];
    }
    return acc;
  }, {});
}

五、进阶：处理嵌套对象与类型转换注意事项

在实际业务中，表单字段可能还涉及点号分层（如 user.name、user.email）以及数值、布尔值类型的转换：

• 空值与未勾选状态： 原生未勾选的单选/复选框在表单序列化时不会产生任何条目；若后端强依赖 boolean 值，可在前端手动判断 form.checkboxField.checked 赋予 true/false。
• 数字类型还原： 表单控件的 value 原生均为字符串类型。若后端字段严格定义为数字，转换时可通过判断 !isNaN(Number(val)) && val.trim() !== '' 转换为数值。
• 文件字段（File / Blob）： <input type="file"> 的文件对象经过 JSON.stringify 时会变成空对象 {}。如果表单包含上传文件，必须保持原生 FormData 进行二进制上传，或将文件读取为 Base64 编码后再写入 JSON。

六、不同序列化结果转换方案对比与选型

输入源形态	典型场景	推荐转换方式	多值兼容性
原生 <form> 节点	无多选复选框的简单单页表单	Object.fromEntries(new FormData(form))	不支持（同名键被覆盖）
原生 <form> 节点	通用生产表单、问卷、复选框列表	formDataToJSON() 迭代器封装	完美支持（自动升格为数组）
URL 查询字符串	GET 请求参数解析、jQuery serialize()	new URLSearchParams() + 迭代归纳	完美支持（自动完成 URL 解码）
键值对象数组	jQuery serializeArray()、自定义表单组件	Array.prototype.reduce()	完美支持（易于嵌入类型映射）

总结而言，转换 JS 表单序列化结果的核心原则在于识别源数据形态并提前处理同名键冲突。对于现代纯原生项目，结合 FormData 与迭代器分支逻辑是兼具轻量与鲁棒性的最佳实践。