如何用 Object.fromEntries 快速将动态表单的 FormData 对象转换为可提交的 JSON 格式

Object.fromEntries 更可靠，因其原生匹配 FormData 迭代规范，不丢键、不误转类型、保留最后重复键；但多选 checkbox 需用 getAll 手动处理，File 字段经 JSON.stringify 会消失，故文件上传应直接提交 FormData。

FormData 转 JSON 时 Object.fromEntries 为什么比手动遍历更可靠

因为 FormData 的 entries() 方法原生支持迭代键值对，而 Object.fromEntries 正是为此设计的——它不丢键、不误转布尔/数字、不忽略重复键（会保留最后一个），且能直接处理 File 对象（虽然转成 JSON 后需另行处理）。手动用 for...of 或 Array.from + reduce 容易漏掉 undefined 值或误把 File 当字符串序列化。

直接用 Object.fromEntries 转换后，File 字段会变成什么

会变成 File 实例对象，但 JSON.stringify 时会被忽略（因为 File 不可枚举且无自有可序列化属性），导致字段“消失”。这不是 Object.fromEntries 的问题，而是 JSON 序列化限制：

const data = new FormData();data.append('avatar', new File([''], 'test.jpg', {type: 'image/jpeg'}));data.append('name', 'Alice');const obj = Object.fromEntries(data);console.log(obj.avatar); // File {name: "test.jpg", lastModified: ..., size: 0, type: "image/jpeg"}console.log(JSON.stringify(obj)); // {"name":"Alice"} ← avatar 消失了

• 若需上传文件，不要走 JSON 路径，直接用 fetch(url, { method: 'POST', body: formData })
• 若必须提交 JSON（如某些 API 强制要求），得先用 FileReader 或 arrayBuffer() 提前转为 base64 / blob URL，再塞进对象
• 纯文本字段（input[type="text"]、select、textarea）可安全转换

Object.fromEntries 遇到多选 checkbox 怎么办

浏览器原生把同名 checkbox 多选值按顺序 append 多次，FormData.entries() 会返回多个相同键的条目，但 Object.fromEntries 只保留最后一个——这会导致只拿到最后一个勾选项。

• 正确做法：改用 FormData.getAll(key) 手动收集数组
• 例如：const hobbies = formData.getAll('hobby'); → 返回 ['reading', 'swimming']
• 再合并进对象：{ ...Object.fromEntries(formData), hobby: formData.getAll('hobby') }
• 注意：单选 radio 和普通 input 不受影响，仍可用 fromEntries

IE 兼容性差，有没有轻量 fallback 方案

Object.fromEntries 在 IE 中完全不可用，但不需要引入整个 core-js。可以用一行 reduce 模拟：

const fromEntries = (iterable) =>  Array.from(iterable).reduce((obj, [k, v]) => ({ ...obj, [k]: v }), {});

• 这个实现不处理 Symbol 键、不优化性能，但对表单数据已足够
• 如果项目已用 Babel，加 @babel/preset-env 并设 targets.ie: "11" 会自动 polyfill
• 别用 Object.assign(...) 展开，容易被原型污染（比如 key 是 __proto__）

实际转换逻辑里最常被跳过的一步，是检查哪些字段该进 JSON、哪些该单独构造 FormData——混用两种提交方式时，字段命名冲突和类型隐式转换才是真坑。