format_list_bulleted
【JavaScript】多次元配列の使い方について解説
最終更新日時:2022-06-06 09:52:52



JavaScriptにおいては横方向に要素が並ぶ1次元配列だけでなく、横と縦の方向に要素の広がりを持つ二次元配列や、横と縦、そして奥行きを持つ3次元配列を実装することができます。より多くのデータ数を管理する際はこうした多次元配列を使うと便利なので、しっかりと本記事で学習しましょう。

二次元配列の宣言

二次元配列は横方向と縦方向に要素の広がりを持つ配列です。次のように二次元配列は宣言することができます。

let hiragana2d = [
   ["あ","い","う","え","お"],
   ["か","き","く","け","こ"],
   ["さ","し","す","せ","そ"],
   ["た","ち","つ","て","と"]
];

二次元配列は次のような構造になっています。


01234
0
1
2


数字はインデックス番号です。ある一つの要素を参照する際は、縦方向のindex番号とと横方向のindex番号を指定します。例えば縦方向の番号が1、横方向の番号が2である場所に格納されている「く」を参照したいときは、次のようにブラケット構文で書きます。

console.log(hiragana2d[1][2]);

最初に縦方向の番号、次に横方向の番号を指定します。

三次元配列の宣言

三次元配列は横方向と縦方向に、さらに奥方向に要素の広がりを与えた配列です。

次のように三次元配列は宣言することができます。

let hiragana3d = [
   [
       ["あ","い","う","え","お"],
       ["か","き","く","け","こ"],
       ["さ","し","す","せ","そ"]
   ],
   [
       ["た","ち","つ","て","と"],
       ["な","に","ぬ","ね","の"],
       ["は","ひ","ふ","へ","ほ"]
   ],
   [
       ["ま","み","む","め","も"],
       ["や","い","ゆ","え","よ"],
       ["ら","り","る","れ","ろ"]
   ]
];

宣言した三次元配列は次の表のような構造になっています。

奥行き0番目
01234
0
1
2
奥行き0番目





0
1
2
奥行き0番目





0
1
2

図形としてのイメージは次のようになります。

3次元配列の値を参照する際はまず最初に奥行き方向の番号、次に縦方向の番号、最後に横方向の番号を記述します。

console.log(hiragana3d[0][0][1]);//結果:い

for~of文による一次元配列への変換

二次元配列から一次元配列への変換

二次元配列の値を一次元配列に戻したい場合はfor~of文を使うと簡単に展開できます。for~of文は次のように記述します。

let sports = ["soccer","tennis","baseball","basketball"]for(let result of sports){
   console.log(result);
}

配列などの反復可能なオブジェクトのそれぞれの要素全てに処理をします。今回は配列sportsの各要素をresultに格納して順に処理を施していきます。処理の順番は保証されないので、順番が重要な場合はfor文を使いましょう。

二次元配列の値を一次元配列に変換するには次のように記述します。

let array1d =[]for(let array of hiragana2d){
  for(let result of array){
      array1d.push(result)
 }
};
console.log(array1d)//結果:["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ"];

まず、二次元配列hiragana2dから一つの一次元配列に取り出しarrayに格納します。次にネストしたfor~of文で取り出した一次元配列の中の一つの要素をresultに格納して、配列array1dに追加します。この一連の処理を各一次元配列、そしてその配列の各要素で繰り返します。

三次元配列から一次元配列への変換

三次元配列の要素を一次元配列に直す場合はさらにfor~of文をネストしていきます。

let array1d = []for(let array of hiragana3d){
   for(let result1 of array){
       for(let result2 of result1){
           array1d.push(result2)
       }
  }
};
console.log(array1d);//結果:["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "い", "ゆ", "え", "よ", "ら", "り", "る", "れ", "ろ"];

この記事のまとめ

本記事ではJavaScriptの多次元配列の扱い方について学びました。大きなデータなどを扱う際に多次元配列の操作は行うことがあると思うので、しっかりと理解しておきましょう。四次元以上の配列はイメージがしにくく、管理が難しくなりますので、使用を避けるのが無難でしょう。そのため、今回学んだ三次元までの配列の扱い方をしっかりと復習しましょう。最後にこの記事のまとめです。

  • 二次元配列は縦方向と横方向にデータの広がりを持つ配列で、順に縦横の番号をブラケット構文で指定することで参照することができる
  • 三次元配列は縦横に加えて奥方向にデータの広がりを持つ配列で、順に奥方向、縦横の番号をブラケット構文で指定することで参照することができる
  • for~of文を使うと二次元・三次元配列とも一次元配列に簡単に変換することができる

多次元配列の操作を利用して、JavaScriptをさらに便利に使用しましょう!!