JavaScript:无法访问对象中的数组

Question

我在访问对象的属性时遇到了极其奇怪的行为。

运行这段代码:

console.log(myObj);
console.log(myObj.items);
console.log(myObj);

我在控制台中得到这个输出:

这怎么可能发生？

Answer 1

console.log，在执行期间，在控制台中输出值的字符串表示形式。根据 Chrome 的心情，它可能会显示某些内容 [object Object] 或类似 Object {} 的内容。没关系。

现在请注意旁边的蓝色小i。这意味着该对象在它被记录的时间和您在控制台中展开它的时间之间已经被修改，它现在显示当前值(有 2 个项目)，而不是值console.log 执行期间(无项目)。实际上，您可以将鼠标悬停在蓝色的 i 上以获取解释。

要重现该问题，请打开控制台并运行此代码段:

var obj = {arr: []};

console.log(obj);
console.log(obj.arr);
console.log(obj);

// by this time, you see 2 object logs, 1 empty array
// (representation differs from time to time)
// > Object
// []
// > Object

obj.arr.push(1,2);

// when you try to expand the objects, an array of 2 items magically appear
// but you still see the empty array ([]) in the log.

此行为因浏览器而异。据我所知，当 console.log 执行时，Firebug 会输出一个序列化版本，因此不会发生这种情况。

调试代码

要调试此类代码，您有多种选择:

• 最快的方法是使用 JSON.stringify 记录对象的字符串化版本，例如 console.log(JSON.stringify(obj))；

• 最好的方法是通过“源”选项卡添加断点。在 Dev Tools 的 Sources 选项卡中浏览到您的文件，并在该位置添加断点。运行您的代码，它会在此时暂停。使用范围面板检查变量。

• 如果您无法使用断点到达代码(可能使用 eval 运行或在控制台中注入(inject))，您可以使用 debugger; 语句.把它放在那个位置的代码中。运行代码，它会在到达语句时暂停。使用 Sources 选项卡中的 Scope 面板进行检查。