1

私は HTML5 キャンバス ゲームを開発しています。キャンバスに描画される画像の配列があります。配列からの画像は現在すべて正しく描画されており、コンソールに配列のサイズを表示するために使用したい console.log 行があります。しかし、何らかの理由で、配列の長さが未定義であるとコンソールに表示され続けます。

配列の長さを出力するために使用している行は次のとおりです。

console.log("sources array length = " + sources.length);

それはforループにあります：

        for (index=0;index < numImages ;index++){
        console.log(index);
        images[index] = new Image();
        images[index].src = sources[index];
        console.log("Adding " + sources[index]);
        callback(images[index]);
        console.log("sources array length = " + sources.length);
    }

ご覧のとおり、ループ内に別の console.log ステートメントがあり、ループが実行されるたびにログに記録されます...

console.log(index);

この行は、ループが実行されるたびに変数 index の値を出力します。0 から始まり、変数 'numImages' に等しい値に達するとループが終了するまで、毎回 1 ずつ増加します。

しかし、何らかの理由で、配列の長さを出力するはずの行に、配列の実際の長さではなく、ループが実行されるたびに「sources array length = undefined」と表示されます。

これがなぜなのか、誰かが私に指摘できますか？ループが実行されるたびにソース配列の長さを表示するにはどうすればよいですか?

編集 2013 年 2 月 13 日 @ 15:10

ソース配列は、次の行を使用して同じファイルで定義されます。

var sources = {};

配列の長さを定義していない理由は、その長さを動的にする必要があるためです。次に、次のような行を使用して配列に要素を追加しました。

sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,

したがって、console.log の行で実行したいことは、現在の配列の長さ、つまり配列に追加された要素の数を教えてくれることです。元の投稿の最初のコードでわかるように、sources 配列に要素が追加されるたびにコンソールにメッセージを出力する console.log があります。 、それらはキャンバスに表示されません...したがって、配列には、画像がキャンバスに描画される時点で定義された長さが必要です。そうしないと、描画される配列に含まれません。

4

1 に答える 1

3

しかし、何らかの理由で、配列の長さを出力するはずの行に、配列の実際の長さではなく、ループが実行されるたびに「sources array length = undefined」と表示されます。

...これはsources、プロパティを持たないlengthため、配列ではないことを示しています。配列ではない0ものの、 、 などの名前のプロパティを持つものを作成することは完全に可能です1。たとえば、次のようになります。

var sources = {0: "zero", 1: "one", 2: "two"};
console.log(sources[0]); // "zero"
console.log(sources.length); // "undefined"

sourcesサーバー側の情報を出力して取得している場合は、実際の配列としてではなく、上記の形式 (おそらく引用符で囲まれた数値プロパティ名を持つプレーンなオブジェクト) で出力されている可能性があります。これは次のようになります。これ：

var sources = ["zero", "one", "two"];

あなたの編集を再

ソース配列は、次の行を使用して同じファイルで定義されます。

var sources = {};

配列の長さを定義していない理由は、その長さを動的にする必要があるためです。次に、次のような行を使用して配列に要素を追加しました。

sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,

それは問題ではありません.JavaScript配列は動的です . だから変えるだけ

var sources = {};

に

var sources = [];

実際に配列にします。次に、すでに行っている方法で配列に追加するか（それはまったく問題ありません）、sources.push(document.getElementById("chair").src);代わりに使用することができます。

于 2013-02-13T14:52:03.567 に答える