为何Object.keys()返回空数组但展开后Response对象存在可见属性？

嗨，我来帮你理清楚这个问题～

你遇到的这个现象其实是浏览器API对象的常见特性：Response对象的这些可见属性都是不可枚举的自有属性，而Object.keys()方法只会返回对象自身的、可枚举的属性名称数组，所以它返回空数组完全是正常的。

为什么控制台能看到这些属性？ #

浏览器控制台在展开对象时，会展示对象的所有自有属性（不管是否可枚举），甚至还会显示原型链上的相关属性，所以你能直观看到type、status、url这些内容，但它们并不符合Object.keys()的筛选条件。

怎么正确获取这些属性？ #

有两种常用方式：

• 如果你需要获取所有属性名称（包括不可枚举的），可以使用Object.getOwnPropertyNames(response)，它会返回该对象自身的所有属性名数组，比如针对你的Response，会返回类似['type', 'url', 'redirected', 'status', 'ok', 'body', 'bodyUsed', 'headers', 'statusText']的结果。
• 更直接的方式是直接访问属性，比如你可以直接写response.status、response.url来读取对应的值，这些属性虽然不可枚举，但都是可以正常读取的。

举个简单的例子，针对你给出的Response，执行console.log(response.status)就能直接输出400，完全不需要依赖Object.keys()去遍历。

备注：内容来源于stack exchange，提问作者Afrin Athar