循環不遍歷數組的JavaScript

Question

我正在嘗試讀取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();
    }
};

但是，本應經過地圖圖層陣列的循環根本不會循環。 當我嘗試使用此方法在數組中繪制第一個地圖層時：

TileMap.prototype.draw = function() {
    this.mapLayers[0].draw();
};

它會繪制圖塊圖像，但會出現以下錯誤：

TypeError: this.mapLayers[0] is undefined

有人知道為什么會這樣嗎？ 如果願意，可以在以下位置找到TMX文件： http : //pastebin.com/MYdJCHfQ

Answer 1

似乎mapLayers是要迭代的數組，但是缺少其length屬性來告訴循環何時停止循環。 也許這會有所幫助：

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