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の多次元配列についての解説を終了します。ありがとうございました。

スポンサーリンク

関連記事・広告