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.

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

调试代码

要调试此类代码,您有以下几种选择:

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

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

• 如果使用断点无法访问代码(可能eval在控制台中使用或注入),则可以使用该debugger;语句.只需将其放在该位置的代码中即可.运行代码,它会在到达语句时暂停.使用"源"选项卡中的"范围"面板进行检查.