使用展开运算符浅拷贝 FormData 对象

FormData 对象无法通过展开运算符（...）进行浅拷贝，因其既无自有可枚举属性也不具备原生可迭代性，直接使用 {...formData} 会得到空对象；真正轻量、高效且语义准确的拷贝方式是利用 new FormData(original.entries())，它能完整保留多值顺序、File/Blob 引用及表单结构，兼容主流现代浏览器，同时避免深克隆开销与序列化陷阱——掌握这一技巧，让你在处理动态表单数据时更精准、更可靠。

直接用展开运算符（...）无法对 FormData 对象进行有效浅拷贝，因为它不是可迭代的普通对象，也没有自有可枚举属性——FormData 是一个迭代器对象，其键值对需通过 .entries()、.keys() 或 .values() 显式遍历。所谓“轻量化浅拷贝转换”，核心是快速生成一个内容相同但独立的新 FormData 实例，不依赖深克隆或序列化反序列化。

为什么不能直接写 {...formData}？

FormData 的原型链上没有 [Symbol.iterator]（在部分旧环境甚至没有），且其自有属性为空（Object.keys(formData) 返回空数组）。展开语法作用于对象时，仅提取**自身可枚举属性**，因此 {...formData} 得到的是一个空对象，完全丢失表单数据。

正确做法：用 entries() 构造新实例

最轻量、兼容性好（ES2015+）、语义清晰的方式是遍历原始 FormData 的键值对，并传入新 FormData 构造函数：

• new FormData() 支持接收一个 Iterable<[string, any]> 参数（如数组或 entries() 返回的迭代器）
• formData.entries() 返回键值对迭代器，每个项为 [key, value] 数组
• 直接将该迭代器传入构造函数，即可完成一次性拷贝

代码示例：

const original = new FormData();
original.append('name', 'Alice');
original.append('file', fileInput.files[0]);

// ✅ 轻量化浅拷贝
const copy = new FormData(original.entries());

注意边界情况与兼容性

该方法是浅拷贝，意味着：

• 所有 File 或 Blob 实例被原样引用（不复制二进制内容，符合“轻量化”预期）
• 同名字段的多值顺序和数量完全保留（append 语义被忠实复现）
• 在 Safari 15.4+、Chrome 79+、Firefox 72+ 中原生支持；若需支持更老版本（如 Safari ≤15.3），可用数组中转：

const copy = new FormData(
  Array.from(original.entries()) // 兼容旧版：先转成数组再传入
);

不推荐的替代方案

以下方式看似可行，但存在冗余或隐患：

• new FormData(formElement)：依赖 DOM 表单元素，且会重新读取当前表单控件状态，不是对原始 FormData 的拷贝
• Object.assign(new FormData(), Object.fromEntries(formData.entries()))：错误——FormData 不接受普通对象初始化，且 Object.fromEntries 会丢弃重复 key
• 手动循环 append：可行但啰嗦，无必要增加代码体积和执行开销

理论要掌握，实操不能落！以上关于《使用展开运算符浅拷贝 FormData 对象》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！