JavaScript中FormData的用途及控制台显示为空的疑问

FormData主要有这几个核心用途：

• 快速收集HTML表单数据：直接通过表单元素创建FormData实例，自动把表单里的输入框、单选框、文件上传等字段打包成键值对，不用手动拼接数据
• 动态构造表单数据：支持用append()、delete()、set()等方法手动添加或修改数据，适合需要在代码里自定义表单内容的场景
• 支持文件上传：是浏览器端发送multipart/form-data请求的标准方式，能轻松携带文件数据提交给服务器

这是因为FormData不是普通的JavaScript对象，它属于可迭代的特殊对象，浏览器的console.log在直接打印这类对象时，不会自动遍历它内部的键值对，所以看起来是空对象，但实际上数据一直存在。

你可以用这些方法验证FormData里的内容：

1. 用get()方法直接取值：

console.log(formData.get('access_key')); // 会输出"00000000"

2. 用for...of循环遍历所有键值对：

for (const [key, value] of formData) {
  console.log(`${key}: ${value}`);
}

3. 转换成数组后打印：

console.log(Array.from(formData)); // 会输出包含所有键值对的数组

你代码里用Object.fromEntries(formData)能正常拿到值，是因为这个方法会自动迭代FormData的所有键值对，把它们转换成普通JavaScript对象，自然就能显示出所有内容了。

内容的提问来源于stack exchange，提问作者saba ali