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

Question

JavaScript在数组和对象之间有一个surprisingly confusing distinction和array-like objects：

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

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

这种数组/对象的使用发生在3rd party code，因此我正在寻找一种方法在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})

顺便说一下，数组总是一个对象，有或没有额外的属性。