Javascript for循环不在数组中循环

我正在尝试读取一个平台级的TMX文件。我试着画瓷砖集，看看我的代码是否正常工作。这是我加载地图的方式：

function TileMapLayer(mapWidth, mapHeight, tileWidth, tileHeight, layerName, tileData) {
'use strict';
    var name = layerName,
    width = mapWidth, height = mapHeight,
    // An array of integers used to figure out whether there is a tile in the
    // player's position
    map = [width][height];
    // The tileset that makes up the tilemap
    this.tileSet = Game.res.getImage('tileSet');
    var data = tileData;

    function getWidth() {return width;}
    function getHeight() {return height;}
}

TileMapLayer.prototype.draw = function() {
        'use strict';
    ctx.beginPath();
    ctx.drawImage(this.tileSet, canvasWidth / 2, canvasHeight / 2);
    ctx.closePath();
};

function TileMap() {
    'use strict';
    this.mapLayers = [];
}

TileMap.prototype.loadFile = function(pathToFile) {
    'use strict';
    var xhr = new XMLHttpRequest();
    var that = this;
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            // read in xml file
            var domParser = new DOMParser();
            var mapData = domParser.parseFromString(xhr.responseText, 'text/xml');
            var mapAttributes = mapData.getElementsByTagName('map')[0].attributes;
            // get tileset location
            var tileSet = mapData.getElementsByTagName('tileset')[0].getElementsByTagName('image')[0].attributes;
            Game.res.addImage('tileSet', '/home/agoston/Documents/js/platformer/res/maps/' + tileSet.getNamedItem('source').nodeValue);
            // get map & tile dimensions
            that.width = parseInt(mapAttributes.getNamedItem('width').nodeValue);
            that.height = parseInt(mapAttributes.getNamedItem('height').nodeValue);
            that.tileWidth = parseInt(mapAttributes.getNamedItem('tilewidth').nodeValue);
            that.tileHeight = parseInt(mapAttributes.getNamedItem('tileheight').nodeValue);

            // get layer data
            var layers = mapData.getElementsByTagName('layer');

            // create layers
            for(var i = 0; i < layers.length; ++i) {
                that.mapLayers[i] = new TileMapLayer(that.width, that.height, 
                                                                    that.tileWidth, 
                                                                    that.tileHeight,
                                                                    layers[i].attributes.getNamedItem('name').nodeValue,
                                                                    layers[i].getElementsByTagName('data')[0]);
            }

        }
    };
    xhr.open('GET', pathToFile, true);
    xhr.send(null);
};

TileMap.prototype.draw = function() {
    // this block of code doesn't execute
    for(var i = 0; i < this.mapLayers; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }
};

它会绘制平铺集图像，但会出现以下错误：

TypeError: this.mapLayers[0] is undefined

---

有人知道为什么会这样吗？如果愿意，您可以在此处找到TMX文件：

看起来mapLayers是一个要迭代的数组，但是您缺少其长度属性来告诉循环何时停止循环。或许这将有助于：

for(var i = 0, j = this.mapLayers.length; i < j; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }

for（var i=0，j=this.mapLayers.length；i

似乎mapLayers是一个要迭代的数组，但缺少了告诉循环何时停止循环的length属性。或许这将有助于：

for(var i = 0, j = this.mapLayers.length; i < j; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }

for（var i=0，j=this.mapLayers.length；i

您是指（var i=0；i的

？什么是
map=[width][height]该怎么办？@scrapdog是的。抱歉，这是一个愚蠢的错误。请参考我的答案以获得优化的解决方案。我的猜测是，由于您正在执行get请求，因此在调用draw函数时映射层没有初始化，因为get需要一些时间来处理，并且是异步的。您的意思是（var i=0；i
？什么是
map=[宽度][高度]
应该做什么？@scrapdog是的。对不起，愚蠢的错误。请参考我的答案，以获得优化的解决方案。我的猜测是，由于您正在执行get请求，因此在调用draw函数时，映射层没有初始化，因为get需要一些时间来处理，并且是异步的。谢谢。我将其更改为scrapdog在comm中发布的内容谢谢。我把它改成了scrapdog在评论中发布的内容。