JavaScript 多次元配列

スポンサーリンク
スポンサーリンク

多次元配列

1次元配列は
1つの入れ物に仕切りを付けて
複数のデータを格納することができましたが
このほかに、2次元配列や3次元配列といった
多次元の配列を作成して使用することができます。

2次元配列は1次元配列を積み重ねた構造で
3次元配列は2次元配列を積み重ねたイメージです。

4次元配列以降も同様のイメージで使用できますが
よく使用されるのは多くても3次元配列までです。

4次元配列以上はコードの可読性が悪くなることと
データがどこに格納されているかのイメージが
つきにくくなるためあまり使用されません。

2次元配列の書式

var 配列名 = [[データ1,データ2,・・・・],[データ1,データ2,・・・],・・・]


1次元配列と比べると複雑にみえますが
[]の内側に1次元配列をカンマ「,」で区切って配置しています。

3次元配列の書式

var 配列名 = [
[[データ1,データ2,・・・・],[データ1,データ2,・・・],・・・],
[[データ1,データ2,・・・・],[データ1,データ2,・・・],・・・]
]


さらに複雑になったように見えますが
[]の中に必要な分だけ2次元配列の固まりを配置しています。

2次元配列のコード例

var h2d = [["A","B","C","D"],["E","F","G","H"]];


2次元配列の要素を参照するには
「添え字」を2つ並べて記述し
左辺は「行の添え字」
右辺は「列の添え字」を記述します。

2次元配列の要素を参照する書式

h2d[0][0]        A(1行1列目を参照)
h2d[0][1]        B(1行2列目を参照)
h2d[0][2]        C(1行3列目を参照)
h2d[0][3]        D(1行4列目を参照)
h2d[1][0]        E(2行1列目を参照)
h2d[1][1]        F(2行2列目を参照)
h2d[1][2]        G(2行3列目を参照)
h2d[1][3]        H(2行4列目を参照)

2次元配列を参照して出力するコード例

 var h2d = [ ["A","B","C","D"], ["E","F","G","H"]];
   for(var h1d of h2d){
    for(var h of h1d){
      document.write(h);
    }
   }

コードの解説

多次元配列の各要素を参照するには
繰り返し処理で配列の各要素を参照する
for of【フォーオフ】文が便利です。
多次元配列の要素を参照する
For of文はfor文を入れ子(ネスト)にすることで
全要素を参照ができます。
まず最初(外側)のfor of文で
2次元配列「h2d」に格納されている
行の添え字が0の1次元配列を1次元配列「h1d」の格納します。
次に内側のfor of文で
1次元配列「h1d」に格納されている
各要素を1つずつ変数「h」に格納して
document【ドキュメント】オブジェクトの
write【ライト】メソッドを使用して各要素を出力します。

3次元配列のコード例

var h3d = [
  [ 
    ["A","B","C","D"],
    ["E","F","G","H"]
  ],
  [
    ["i","J","K","L"],
    ["M","N","O","P"] 
  ]
 ];


3次元配列は2次元配列が2つあり
それぞれの2次元配列に対して添え字の0と1が付けられています。
3次元配列の要素を参照する書式は
配列名[3次元の添え字][2次元の添え字][1次元の添え字]
で表します。

3次元配列の要素を参照する書式

h3d[0][0][0]        A(0の1行1列目を参照)
h3d[0][0][1]        B(0の1行2列目を参照)
h3d[0][0][2]        C(0の1行3列目を参照)
h3d[0][0][3]        D(0の1行4列目を参照)
h3d[0][1][0]        E(0の2行1列目を参照)
h3d[0][1][1]        F(0の2行2列目を参照)
h3d[0][1][2]        G(0の2行3列目を参照)
h3d[0][1][3]        H(0の2行4列目を参照)
h3d[1][0][1]        I(1の1行2列目を参照)
h3d[1][0][1]        J(1の1行2列目を参照)
h3d[1][0][2]        K(1の1行3列目を参照)
h3d[1][0][3]        L(1の1行4列目を参照)
h3d[1][1][0]        M(1の2行1列目を参照)
h3d[1][1][1]        N(1の2行2列目を参照)
h3d[1][1][2]        O(1の2行3列目を参照)
h3d[1][1][3]        P(1の2行4列目を参照)

3次元配列を参照して出力するコード

 var h3d = [
   [ 
    ["A","B","C","D"],
    ["E","F","G","H"]
  ],
  [
    ["i","J","K","L"],
    ["M","N","O","P"] 
  ]
 ];
   for(var h2d of h3d){
    for(var h1d of h2d){
      for(var h of h1d){
         document.write(h);
      }
    }
   }

ジャグ配列

多次元配列の3次元配列や2次元配列では
各行の要素の数は同じでしたが
「ジャグ配列」は多次元配列である点は同じですが
行の要素数が異なるという特徴があります。

ジャグ配列の使用ケースとしては
例として、1月~12月の日次の売上データを入れる
配列が必要な場合、各月ごとに日数が異なるので
ジャグ配列が適しています。

ジャグ配列のコード例

var jagu3d = [
  [ 
    ["A","B","C"],
    ["D","E","F","G"]
  ],
  [
    ["H","i","J","K"],
    ["L","M","N","O","P"] 
  ]
 ];

ジャグ配列のすべての要素を参照する方法は
2次元配列や3次元配列の参照方法と同じです。


以上でJavaScriptの多次元配列についての解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク