【JavaScript入門】2次元配列の初期化と各要素の取得を解説

どうも、カメ助(@kamesuke_blog)です。

今回は、JavaScriptでの2次元配列の初期化と各要素の取得方法についてまとめました。

2次元配列を使用する場合の参考にしていただけたら幸いです。

カメ助

この記事はこんな人にオススメ
・2次元配列の扱いについて知りたい

目次

2次元配列とは何か

まず、次のようなExcelの表をイメージしてください。

2次元配列はExcelの表のイメージ

上の表のように、xとyの2つの添字を指定して値を指定可能な配列を「2次元配列」と言います

ちなみに、添字を3つ指定する配列を「3次元配列」、添字を4つ指定するものを「4次元配列」などがあり、それらを総称して「多次元配列」と呼びます。

カメ助

4次元配列以上は「コードの可読性が悪くなる」、「データがどこに格納されているかのイメージが難しい」のであまり使用しないよ

JavaScriptでの2次元配列

JavaScriptでは2次元配列を含め、多次元配列はサポートされていません。

しかし、配列の要素には数値や文字列などの基本データだけではなくオブジェクトや配列などを格納することができます。そこで、1次元の配列を作成し、その配列を要素に格納した配列を作成することで2次元配列を作成します。

JavaScriptの2次元配列の初期化

2次元配列の初期化方法について見ていきましょう。

2次元配列の生成と値の初期化

5×5の2次元配列を0で初期化するコードについて見ていきましょう。

配列を2重ループで初期化する場合

定番のfor文を使用して2次元配列の初期化を行う例です。基本なので押さえておきましょう。

fillを使用して初期化した場合

次は、ES2015で追加されたfillを使用した場合の例を紹介します。ソースコードが短く済むメリットがあります。

2次元配列の初期化をループを1回に抑えています。コード量を減らしたい場合は、こちらの記述をオススメします。

2次元配列の生成時に値をセットする

2次元配列の生成と同時に値をセットする場合は、以下のようにします。

上記をまとめて次のように記述した場合も同じ配列になります。

続いて、作成した配列の各要素のデータ取得方法について見ていきましょう。

JavaScriptの2次元配列の各要素のデータ取得

2次元配列の各要素のデータ取得について、下記サンプルで見ていきましょう。

出力結果

array[i][j]で、配列の各要素にアクセスすることができます。サンプルでは、for文を使用して配列の全要素の値をコンソールに出力しています。

ちなみに、要素の番号は「0」から始まるので覚えておきましょう。

まとめ

いかがでしたか。

今回は、JavaScriptの2次元配列の初期化と各要素の取得方法について紹介しました。

ポイントは以下の3点です。

2次元配列のポイント
  • 2次元配列は、Excelの表のイメージ
  • データ型「Array」とfor文を組み合わせて作成する
  • 配列のデータには、array[i][j]でアクセスする(i、jには数字が入る)

2次元配列は、プログラムでよく使用しますので、参考にしていただければと思います。

こちらはjavascriptのサンプルコードが豊富なのでオススメの1冊です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪でITエンジニアしています。(8年目に突入)
趣味でウェブサイトに関することをいろいろと勉強しています。

勉強した内容やプログラミングに関する情報を中心に役立つ情報を発信するべく日々ブログを更新しています。

3度の飯よりも「柿の種」をこよなく愛する関西人。

コメント

コメントする

目次
閉じる