JavaScript【 array 】3 ～ 多次元配列

配列変数は、変数名にインデックスを付けて「 変数名[0] 」という形で表しますが、「 変数名[0][0] 」のように、インデックスを複数付けた配列変数も使用することができます。
今回は、このような多次元配列について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 多次元配列とは

多次元配列は、2つ以上の種類のインデックスを組み合わせて配列の要素を表します。

JavaScriptでは、多次元配列という構文は用意されていませんが、配列の要素に別の配列を格納することで、多次元配列のように使用することができます。
　
　
次のようなデータがあるとします。

これを、配列変数（1次元配列）に格納すると、次のようになります。

let ary = [90, 89, 93, 91];

今度は、次のようなデータの格納を考えてみます。

JavaScriptは、多次元配列を直接サポートしてはいませんが、配列の要素に、数値や文字列だけでなく、オブジェクトや配列なども格納できるので、1次元の配列の要素に、別の配列を代入することで2次元配列を作成することができます。

let ary0 = [90, 89, 93, 91];
let ary1 = [68, 65, 69, 70];
let ary2 = [81, 76, 82, 79];

let ary = [ary0, ary1, ary2];

これを、まとめて次のように記述することができます。

let ary = [
    [90, 89, 93, 91], 
    [68, 65, 69, 70],
    [81, 76, 82, 79]
];

上のサンプルは2次元配列ですが、配列の要素に2次元配列を格納すると3次元配列となり、同様にして何次元の配列でも作成することが可能です。

▲目次へ戻る

2. 多次元配列の考え方

多次元配列の要素へのアクセスについて考えてみます。

先ほどと同じ2次元配列を作成し、その中のインデックス1の要素を他の変数に代入します。

let ary = [
    [90, 89, 93, 91], 
    [68, 65, 69, 70],
    [81, 76, 82, 79]
];

let ary1 = ary[1];

変数ary1には、配列aryのインデックス1の要素に格納されていた値である「 [68, 65, 69, 70] 」の配列が代入されます。

変数ary1は配列ですので、さらにインデックスを指定して要素の値を取得することができます。

let ary = [
    [90, 89, 93, 91], 
    [68, 65, 69, 70],
    [81, 76, 82, 79]
];

let ary1 = ary[1];

let num1 = ary1[2];

変数ary1に代入されている配列「 [68, 65, 69, 70] 」のインデックス2の要素は「 69 」ですので、変数num1には「 69 」が代入されます。

このように、多次元配列の要素である1つの配列を取得して、さらにその配列の要素を取得する、ということができますが、これらをまとめて次のように記述することもできます。

let ary = [
    [90, 89, 93, 91], 
    [68, 65, 69, 70],
    [81, 76, 82, 79]
];

let num1 = ary1[1][2];

この例は2次元配列ですが、3次元や4次元でも同様に考えます。

▲目次へ戻る

3. 多次元配列の使い方

次のサンプルは、2次元配列に格納された全データを1つずつ出力するプログラムです。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {
    let ary = [
        [90, 89, 93, 91], 
        [68, 65, 69, 70],
        [81, 76, 82, 79]
    ];

    for (let i = 0;  i < ary.length;  i++) {
        for (let j = 0;  j < ary[i].length;  j++) {
            document.getElementById("dat").innerHTML += "配列変数["
                                                        + i
                                                        + "]["
                                                        + j
                                                        + "] = "
                                                        + ary[i][j]
                                                        + "<br>";
        }
        document.getElementById("dat").innerHTML +="<br>";
    }
}
</script>

<div style="background-color : #CCC;">
    <div style="background-color : #EEE;">
        配列変数 = [[90, 89, 93, 91], [68, 65, 69, 70], [81, 76, 82, 79]];
    </div>
　
    <form>
        <div style="display:inline-flex;">
            上の要素を持つ２次元配列の各データを表示します
            <input type="button" value="表示" onClick="dispAry()">
        </div>
　
        <div id="dat" style="background-color : #EEE; width : 200px;"></div>　
    </form>
</div>

for文の中の「ary.length」や「ary[i].length」は、配列の要素数を返す lengthプロパティを使用した記述です（詳しくはArrayオブジェクトとはをご参照下さい）。

上のサンプルでは、配列変数ary自身の要素数が3ですので、「 i < ary.length 」は「 i < 3 」を意味します。

各要素に、さらに要素数4の配列が格納されていますので、「 j < ary[i].length 」は「 j < 4 」を意味します。

要素数とインデックス番号が1ずれる点に注意しましょう。

for文の仕組みについては、for文の使い方をご参照下さい。

表示結果がそのまま、変数の値を取得する際の記述方法となります。
（変数の値「 90 」を取得する場合は、「 配列変数[0][0] 」と記述します。）

▲目次へ戻る