如何通过展开运算符实现对原始 FormData 对象的轻量化浅拷贝转换-js教程-PHP中文网

不能直接用展开运算符拷贝FormData，因其无自有可枚举属性且不可迭代；应使用new FormData(original.entries())实现轻量化浅拷贝，兼容现代浏览器，保留多值顺序与File/Blob引用。

如何通过展开运算符实现对原始 formdata 对象的轻量化浅拷贝转换

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

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

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

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

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

new FormData() 支持接收一个 Iterable 参数（如数组或 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：可行但啰嗦，无必要增加代码体积和执行开销