如何在Chrome中显示JavaScript数组/对象的所有属性？

Question

JavaScript在数组和对象以及类似数组的对象之间存在令人惊讶的混乱区别 ：

var a = [];  // empty array, right?
a.foo = 'bar';  // a is also an object

问题是，在Chrome DevTools控制台中检查变量时，似乎a只是一个空数组：

这种数组/对象的用法发生在第三方代码中 ，因此我正在寻找一种方法来显示Chrome DevTools中变量的所有属性 。

Answer 1

在现代浏览器（IE9 +，FF4 +，Chrome5 +，Opera12 +，Safari5 +）中，您可以使用内置的Object.keys方法：

Object.keys(a);

从MDN ：

Object.keys（）方法返回给定对象自己的可枚举属性的数组，其顺序与for ... in循环所提供的顺序相同（区别在于for-in循环枚举原型链中的属性为：好）。

Answer 2

只需使用console.log

a = []
[]
a.foo = 'bar'
"bar"
a
[]
console.log(a)
[foo: "bar"]                                                              VM451:2
undefined

Answer 3

当您要求在控制台中查看数组时（这不在javascript规范之内），控制台认为您只想查看数组元素，因此就可以看到该内容。 这并不意味着就没有其他属性-这只是Google选择实现控制台的方式。

---

数组是一个对象，具有对象的所有功能。 您可以像分配一个对象一样为其分配属性（因为它是一个对象）。

数组还具有一个称为.length的特殊属性，该属性会自动跟踪分配给它的数字属性的长度，从而为它赋予数组类型的功能以及一堆用于处理数组顺序性质的方法（ .push() ， .pop() .slice()等）。 普通对象不具有该特殊属性.length或任何这些数组方法。 数组还可以进行一些内部优化，从而在顺序访问数字属性是唯一访问的属性时，可以提高效率。

---

因此，您可以使用以下方法仅迭代数组元素：

for (var i = 0; i < arr.length; i++) {
    // access arr[i] here
}

或.forEach（）：

arr.forEach(function(value, index, array) {
    // use value and index here
})

---

或者，您可以使用以下方法迭代所有属性：

var props = Object.keys(arr);
for (var i = 0; i < props.length; i++) {
    // access props[i] here to get the property
    // and arr[props[i]] to get the value of the property
}

或搭配：

for (var prop in arr) {
    if (arr.hasOwnProperty(prop)) {
        // access arr[prop] here
    }
}

Answer 4

当chrome在控制台输出不包含我感兴趣的所有信息的情况下进行工作时，我发现可以通过将其包装在对象中来访问该信息：

({a:a})

顺便说一下，数组始终是一个对象，带有或不带有额外的属性。