为何直接打印FormData对象显示为空？用扩展运算符/get可获取值

我在JavaScript中使用FormData实现文件上传功能，编写代码如下（注：代码中appened为笔误，正确写法是append）：

let formdata = new FormData()
formdata.append("key", "value");

console.log(formdata) // 控制台显示空对象
console.log(...formdata) // 控制台显示数组形式的键值对
console.log(formdata.get("key")) // 控制台也能输出对应值

为何直接打印FormData对象时显示为空，而使用扩展运算符或get()方法却能获取到数据？我查阅了很多资料都没找到答案，希望有人能解释该行为的原因。

原因解释 #

这是因为FormData是实现了迭代器接口的特殊对象，它的内部数据并非以普通对象的可枚举属性形式存储，而是封装在内部，只能通过指定接口访问：

• 直接调用console.log(formdata)时，浏览器控制台默认会展示对象的可枚举自有属性，但FormData本身没有这类对外暴露的属性，所以看起来是空对象。
• 扩展运算符...会触发对象的迭代器（FormData实现了Symbol.iterator），迭代器会遍历并返回所有存储的键值对，因此能正确输出数据。
• get()是FormData提供的官方读取API，专门用于访问内部存储的键对应的值，所以能正常获取到内容。

简单说，FormData的内部数据不对外暴露为可枚举属性，只有通过它的专属API或者迭代器才能读取到，直接打印对象本身自然看不到这些内容。

内容的提问来源于stack exchange，提问作者Leo Gul