javascript 2次元配列

Question

javascriptを練習しています。
クリックするとマス目が白←→黒になるプログラムの一部でわからない事があります。

<script>
        var m=new Array(16);

	var x,y,n=0,tag="";
	for (y=10;y<=160;y+=10){
		for (x=10;x<=160;x+=10){
			tag+="<img id='square"+n+"' src='block.png' style='position:absolute;left:"+x+"px;top:"+y+"px' onClick='draw(event)' />";
			n++;
		}
	}
	document.getElementById("canvas").innerHTML=tag;
	for (y=0;y<16;y++){
		m[y]=new Array(16);
		for (x=0;x<16;x++){
			m[y][x]=0;
		}
	}

</script>

m[y]=new Array(16);

で、16×16の２次元配列を作成しているそうですが、いまいち仕組みがわかりません。

また

m[y]=new Array(16);　以外に別のわかりやすい書き方はありますでしょうか？

宜しくお願いします。

Comments

[takasima20]

m の初期化が抜けてるような?

[退会済みユーザー]

回答ありがとうございますｍ(__)ｍ

参考書からのコピペですが、参考書では、

var m=new Array(16);

とありました。後で訂正しますね。

Answer 1

for (y=0;y<16;y++){
    m[y]=new Array(16);
}

↑をforを使わずに書くと↓こうなります。

    m[0]=new Array(16);
    m[1]=new Array(16);
//...
    m[15]=new Array(16);

↑これは、大雑把に言うと↓このような意味です。

    m=[
        new Array(16),
        new Array(16),
//...
        new Array(16),
    ];

さらに言うと、↑これは、↓このような意味です。

    m=[
        [,,,,,,,,,,,,,,,,],
        [,,,,,,,,,,,,,,,,],
//...
        [,,,,,,,,,,,,,,,,],
    ];

面倒でなければこのように書いてもいいかと思いますが、わかりやすいかどうかは意見の分かれるところでしょう。

---

そのほか、このような書き方もあります。

Array.from( new Array(16), x => new Array(16) )

わかりやすいかどうかは意見の分かれるところでしょう。

Comments

[退会済みユーザー]

回答ありがとうございますｍ(__)ｍ

いろいろなパターンをありがとうございます！
後で良く見てみます。

Answer 2

解決済みですが参考までに…

例えば、マスの数が少なかったらこんな感じで一気に定義してもいいですし

var m = [[0,0],[0,0];

ちょっと増えたらこんな書き方もありでしょう

var m = new Array(4);
for (var i=0; i<4; i++) {
    m[i] = [0,0,0,0];
}

これを今回の書き方にすると

var m = new Array(4);
for (var i=0; i<4; i++) {
    m[i] = new Array(4);
    for (var j=0; j<4; j++) {
      m[i][j] = 0;
    }
}

たぶん器を用意する部分と値を設定する部分がいっしょになってるので、なかなかイメージしずらくなっているのかなあって気がします。