JavaScript 中浅拷贝怎么在处理 FormData 表单对象时进行快速复制-js教程-PHP中文网

formdata无法用展开运算符或object.assign浅拷贝，正确方式是new formdata()后遍历entries()逐个append键值对，确保内容相同且相互独立。

javascript 中浅拷贝怎么在处理 formdata 表单对象时进行快速复制

FormData 对象本身不支持常规的浅拷贝方法（如展开运算符、Object.assign），因为它不是普通对象，而是一个浏览器原生的接口实例，其属性不可枚举，内部数据存储在隐藏的键值对结构中。直接用 {...formData} 或 Object.assign({}, formData) 会得到一个空对象或报错——这根本不是“复制”，而是无效操作。

FormData 浅拷贝的本质是重新构造一个新实例

所谓“快速复制 FormData”，实际是指创建一个内容相同但独立的新 FormData 实例。这不是内存层面的浅拷贝，而是逻辑等价的重建：

遍历原 FormData 的所有键值对，逐个 append 到新实例中
这个过程天然隔离：修改新 FormData 不会影响原始实例，因为它们是两个独立的浏览器底层对象
它不涉及嵌套引用问题（FormData 内部没有深层对象结构），所以无需深拷贝

推荐的快速复制写法（兼容性好、无依赖）

使用 for...of 遍历 entries() 是最简洁可靠的方式：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const formDataCopy = new FormData();
for (const [key, value] of originalFormData.entries()) {
  formDataCopy.append(key, value);
}

✅ 支持所有类型值（字符串、Blob、File）
✅ 兼容 Chrome 50+、Firefox 44+、Safari 11.1+、Edge 16+
✅ 不丢失重复 key（如多选文件字段）

注意避开这些常见误区

不要用 JSON 转换：FormData 无法被 JSON.stringify 序列化，会得到空对象
不要用扩展运算符：{...originalFormData} 返回空对象，[...originalFormData] 在部分旧环境可能报错
不要用 Object.assign：Object.assign(new FormData(), originalFormData) 无效，因 FormData 没有可枚举自有属性
避免手动 keys() + get()：不能处理同名多个值（如 <input type="file" multiple> 产生的多个 Blob）

如果需要更进一步的灵活性（比如过滤或转换字段）

可以在遍历中加条件逻辑：

const formDataCopy = new FormData();
for (const [key, value] of originalFormData.entries()) {
  if (key !== 'csrf_token' && key !== 'temp_id') {
    formDataCopy.append(key, value);
  }
}

这种写法既保持轻量，又具备业务可控性，适合表单预提交、草稿保存、对比变更等场景。