たいしょんブログのデザインが新しくなりました!

JavaScriptでの多次元配列(2次元配列)の扱いをまとめてみた

Web技術
スポンサーリンク

最近授業でPHPによる多次元配列を扱ったりするのですが、JavaScriptではどう処理するのか気になったのでまとめてみました。

そもそも多次元配列とは何か

「多次元配列」と聞いて、ピンとくる方もこない方もいらっしゃると思うので、説明したいと思います。例えば、以下の様な表をイメージしてください。

1 2 3 4
1 100 200 300 400
2 500 600 700 800
3 900 1,00 1,100 1,200
4 1,300 1,400 1,500 1,600

Excelで表を作る際、こんな感じになるのでは無いでしょうか。上の表のように、2つの添字を指定して値を指定できる配列を「2次元配列」と言います。「3次元配列」や「4次元配列」もあり、それらを総称して「多次元配列」と呼びます。

JavaScriptで2次元配列を扱う

2次元配列は以下のようにして作ります。

2次元配列の生成


    var array01 = [100, 200, 300, 400];
    var array02 = [500, 600, 700, 800];
    var array03 = [900, 1000, 1100, 1200];
    var array = [array01, array02, array03];
  

あるいはまとめて以下の様な記述も可能です。


    var array = [
    [100, 200, 300, 400],
    [500, 600, 700, 800],
    [900, 1000, 1100, 1200]
    ];
  

2次元配列へのアクセス

2次元配列は以下のようにしてアクセスできます。


    var array = [
    [100, 200, 300, 400],
    [500, 600, 700, 800],
    [900, 1000, 1100, 1200]
    ];
    var num = array[0][0];
  

上記は、変数numに100を代入した処理です。あっ大事なことを言い忘れていましたが、配列は0から始まるので、1列目の1行目を指定する場合[0][0]と指定してあげなければいけません。では、簡単なサンプルを試して実際2次元配列を使ってみます。


var array = [
      [100, 200, 300, 400],
      [500, 600, 700, 800],
      [900, 1000, 1100, 1200]
      ];
      for (var i = 0; i < 3; i++){
    document.write("<p>");

    for (var j = 0; j < 4; j++){
      document.write("[" + i + "][" + j + "] = " + array[i][j] + "<br>");
    }

    document.write("</p>");
  }

上記コードを実行すると、以下の様な結果が返ってきます。

実行結果

PHPでも同じ処理ができますが、今回は省きます。データベースを使うまでもないけど、任意のデータを呼び出したい場合に便利なのでぜひ使ってみてください・ω・

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web技術
スポンサーリンク
たいしょんをフォローする
たいしょんブログ
タイトルとURLをコピーしました