Javascript 数组元素未定义，它真的不是

Question

谁能给我解释一下。下图描述了 Chrome 控制台中的输出。当我注销主要对象时，控制台会显示所有属性。如您所见，该数组有一个名为“markers”的属性，它不是未定义的，因为我可以浏览它。但是当我尝试注销此属性时，假设是 object.markers，它表示该属性未定义。现在我真的很困惑，因为如您所见，我是按顺序记录它们的。

第一个对象是 directionsRenderer。第二个对象是 directionsRenderer 的“j”属性。第三个是 directionsRenderer 'j' 属性的 'markers' 属性。

这是源码

Answer 1

我敢打赌，我们在这里看到的是控制台在 Chrome 中令人惊讶的工作方式。

在 Chrome 中，当您“记录”一个对象时，您得到的不仅仅是该对象它被记录时的样子。您可以与该对象进行实时交互。第一次展开该对象时，您会看到它的属性列表，展开时的属性，而不是记录时的属性。

我怀疑你有没有

console.log(JSON.stringify(directionsRenderer));

...您会看到 .j.markers 确实是未定义的，因为它是在您显示的代码运行后异步填充的。

如果你这样做你可以看到这个效果:Live Copy

var a = {b: {}};
console.log(a); // Note that b is currently empty
setTimeout(function() {
    a.b.c = "foo";
    var p = document.createElement('p');
    p.innerHTML = "Now expand <code>a.b</code> in the console";
    document.body.appendChild(p);
});

注意当a.b为空时我们记录a，然后在我们记录它之后，我们添加一个属性到b。当您在控制台中展开 a 时，您会看到 b 具有 c 属性。

例如，您遇到的是时间问题。涉及一些异步调用，您需要找到与之关联的回调才能访问 directionsRenderer.j.markers。