未定义的索引...但它说它是在调试器中定义的答案

【问题标题】：Undefined index... but it says it's defined in the debugger未定义的索引...但它说它是在调试器中定义的
【发布时间】：2018-05-02 11:48:50
【问题描述】：

（编辑：我解决了我的问题！虽然我仍然不明白我在调试器中看到的情况。有关更多详细信息，请参阅我的答案）

（TL;DR：当与某个数组一起使用时，索引总是未定义。怀疑这将是足够的信息，但也许对于以前经历过这种情况的人来说。）

所以基本上，我在 javascript 中使用了一个数组，我开始注意到一些奇怪的行为，所以我去调试器，我发现一个表示索引的已定义变量被视为未定义。这只是这个特定数组的情况，它是索引。我没有收到错误说它是未定义的，但是当我查看调试器时，当我将鼠标悬停在数组调用中的变量上时，它说它是未定义的（但如果我将鼠标悬停在数组调用之前的任何位置，它就会被定义），并且我收到的错误表明该数组没有被正确使用。这对我来说绝对没有意义，但也许有人遇到过类似的问题。

以这个代码示例为例，它正在为我的 MapRenderer 类绘制一个 tilemap 图层。这里的罪魁祸首是“this.Map.layers”。当我在调试器中进入这个函数时，如果我将鼠标悬停在函数参数上，就会定义 layerIndex，但是如果我将鼠标悬停在数组调用上，它会说它是未定义的，整个逻辑就会中断。

DrawLayer(ctx, camPos, layerIndex)
{
    // Get the map/tile position based on the camera position, to decide which tile to start drawing.
    var mapCamPos = new Point(Math.floor(camPos.x/TILESIZE),
                              Math.floor(camPos.y/TILESIZE));
    // Get the max tile position based on camera position, to decide where to stop drawing.
    var camPosLimit = new Point(Math.ceil(this.DrawSize.x/TILESIZE)+mapCamPos.x,
                                Math.ceil(this.DrawSize.y/TILESIZE)+mapCamPos.y);

    // loop through all tiles we need to draw using rows and columns.
    for(var row=mapCamPos.y;row<this.Map.layers[layerIndex].height&&row<=camPosLimit.y;row++)
    {
        for(var col=mapCamPos.x;col<this.Map.layers[layerIndex].width&&col<=camPosLimit.x;col++)
        {
            var currentTileID = this.GetTileID(layerIndex, row, col);
            if (currentTileID >= 0 && !isNaN(currentTileID))
            {
                var drawPos = new Point(((col*TILESIZE)-camPos.x), ((row*TILESIZE)-camPos.y));
                this.Spritesheet.PlayFrame(currentTileID);
                this.Spritesheet.Draw(ctx, drawPos);
            }
        }
    }
}

无论我在哪里使用该数组，我的代码的许多实例都会发生这种情况。我想补充一下它是如何开始的，因为所有这些逻辑以前都是有效的。我让我的 tilemap 处理多个 csv 文件，我将它们作为二维数组加载到一个数组中。今天，我决定将其全部切换为使用一个 json 文件，因为它更简洁（一个文件而不是每个地图层一个 csv），并且我可以在将来添加额外的属性和东西，而不仅仅是拥有 tileID。因此，在上面的示例中，this.Map 在调用 DrawLayer 之前通过 ajax 调用（使用 jquery）初始化以读取 json 文件。不过，我不明白为什么会导致这种情况。在控制台中执行“mapRenderer.Map.layers”告诉我这是一个普通数组，当我尝试从控制台正常调用它时，它工作正常。我对这个问题很困惑。我之前确实有相同的功能并且它有效，只是我的数组发生了一些变化（它曾经只是“this.Layers”，而不是“this.Map.layers”），但它仍然是一个正常的数组.. . 我不明白为什么它的行为会因为它是通过 json 生成的而如此不同...

任何帮助或解释将不胜感激，谢谢。

【问题讨论】：

当您将鼠标悬停在第二个 layerIndex 上时，您确定它不会认为您悬停在 this.Map.layers[layerIndex] 上吗？
这是哪个浏览器？
这个ajax调用是异步的吗？如果是这样，从哪里调用 DrawLayer 函数？在 ajax 调用之后，还是在它的成功处理程序中？因为如果是在那之后，我希望 ajax 调用的结果还没有到达，所以this.Map.layers 还不会包含数据。
@DavidKnipe Firefox。它肯定只是在看 layerIndex，而不是整个事情。是的，它是异步的，并且 this.Map.layers 在调用 DrawLayers 之前肯定会被填充。所以这是一个游戏（显然），在主菜单加载之前，this.Map 被分配到 ajax 调用的成功处理程序中，并且只有在 ajax 调用（“完成”处理程序）之后，主菜单才会显示，即使在那之后，也需要单击一个按钮来启动游戏，然后调用 DrawLayer 函数。
@DavidKnipe 好吧，我设法解决了我遇到的问题。我仍然不明白我在调试器中看到的情况，我想这是一个 firefox 错误，或者只是我不明白它显示变量的方式。我的主要问题是简单的逻辑......：我正在使用“平铺”地图编辑器，当您将其导出到 CSV 时，平铺 ID 是从零开始的，这意味着空平铺是 -1。当您导出到 json 时，它们不是从零开始的，这意味着空图块是 0，这是许多问题的根源。但就像我说的那样，我仍然没有在调试器中得到整个未定义的索引。哦，好吧。

标签： javascript arrays json scope

【解决方案1】：

我仍然不明白我在调试器中看到的情况，可能是 firefox 的错误，或者我不明白的功能。但我设法解决了我的问题。这是一个基本的逻辑错误：我正在使用“平铺”地图编辑器，当您将这些地图导出到 CSV 时，平铺 ID 是从零开始的，这意味着空平铺是 -1。当您导出到 json 时，它们不是从零开始的，这意味着空图块是 0，我没有注意到，这是我当前所有问题的根源。如果有人可以解释为什么当您将鼠标悬停在 Firefox 调试器上时可能会说已定义的变量是“未定义的”，那还是很高兴知道的。

【讨论】：