OP2　多次元配列を理解しよう

それでは多次元配列を学んでいきましょう。
まずはざっくり説明から。

多次元配列
配列の要素が配列のもの

配列の要素がさらに配列になっているものです。
イメージしづらいかもしれませんが、箱の中にさらに箱を入れるイメージです。
これについても具体的な例を元に説明していきたいと思います。

多次元配列

繰り返しとなりますが、配列 in 配列のことです。
今までは、配列に数値や文字列を入れていましたが、配列の要素には配列を入れることができます。
少しわかりにくいと思いますので、実際のプログラムをみてみましょう。

var array = [[1,2,3],['a','b','c'],['A','B','C']];//配列の中に配列

console.log(array[0]);   // [1, 2, 3]
console.log(array[1]);   // ["a", "b", "c"]
console.log(array[2]);   //["A", "B", "C"]

console.log(array[0][0]); // 1 
console.log(array[1][1]); // b
console.log(array[2][12); // C

var array = [[1,2,3],['a','b','c'],['A','B','C']];//配列の中に配列

console.log(array[0]); // [1, 2, 3]

console.log(array[1]); // ["a", "b", "c"]

console.log(array[2]); //["A", "B", "C"]

console.log(array[0][0]); // 1

console.log(array[1][1]); // b

console.log(array[2][12); // C

見るべきところは1行目の部分です。

var array = [[1,2,3],['a','b','c'],['A','B','C']];//配列の中に配列

1	var array = [[1,2,3],['a','b','c'],['A','B','C']];//配列の中に配列

中括弧の中にさらに中括弧で囲われたブロックが3つありますね。
3つの要素をもつ配列の1つ1つにさらに配列を入れています。

図式すると下のようになります。

上の例では括弧が2つなので２次元配列と呼びます。
マス目のようなデータ構造を格納するのに向いています。
ゲームでいうとパスルゲームなんかでよく使われます。

では練習してみましょう。

1. 上のサンプルで紹介した二次元配列の最後に次の配列を追加して中身
を確認してください。追加する配列は次の通りです。
[‘x’,’y’,’z’]

2.1の追加が終わったら、実際に追加した配列の内容を1つずつ
コンソールに表示してください。

演習

下記の表を二次元配列で表現してください。
一番左の行と一番上の列はデータを指定するための番号です。

	1	2	3
1	A	B	C
2	D	E	F
3	G	H	I

ヒント：2次元配列で上記データを格納した場合、
　　　　次のような結果が得られます。

console.log(arrayData['1']['1']); //A
console.log(arrayData['2']['3']); //F

1 2	console.log(arrayData['1']['1']); //A console.log(arrayData['2']['3']); //F

宿題

var field = [["ー","ー","ー"],["ー","ー","ー"],["ー","ー","ー"]]
alert(`${field[0].join("")}\n${field[1].join("")}\n${field[2].join("")}`)

1 2	var field = [["ー","ー","ー"],["ー","ー","ー"],["ー","ー","ー"]] alert(`${field[0].join("")}\n${field[1].join("")}\n${field[2].join("")}`)