多次元配列のアクセス方法 | 多次元配列 | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

多次元配列とは?

JavaScriptでは、配列の中に別の配列を格納することができます。このように配列の中に配列を持つ構造を多次元配列と呼びます。最も一般的な形は2次元配列で、これを使うことで表形式のデータや複雑なデータ構造を簡単に扱うことができます。

多次元配列のアクセス方法

多次元配列の要素にアクセスするには、配列の階層ごとにインデックスを指定する必要があります。たとえば、2次元配列では2つのインデックスを使い、最初のインデックスで外側の配列を指定し、次のインデックスで内側の配列の要素を指定します。

2次元配列のアクセス例

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0][1]);  // 2
console.log(matrix[2][0]);  // 7

この例では、matrix[0][1]2という値を返し、matrix[2][0]7という値を返します。それぞれのインデックスは、まず外側の配列を選び、その中の要素にアクセスしています。

3次元配列のアクセス方法

3次元配列の場合、さらに1つインデックスが追加され、各階層ごとにインデックスを指定してアクセスします。次の例では、3次元配列に格納された値にアクセスする方法を示します。

3次元配列のアクセス例

const cube = [
    [
        [1, 2, 3],
        [4, 5, 6]
    ],
    [
        [7, 8, 9],
        [10, 11, 12]
    ]
];

console.log(cube[0][1][2]);  // 6
console.log(cube[1][0][1]);  // 8

この例では、cube[0][1][2]6という値を返し、cube[1][0][1]8という値を返します。各インデックスを階層ごとに指定してアクセスしています。

多次元配列の構造

多次元配列は、配列の中に複数の配列を持つため、階層ごとの構造を意識することが大切です。以下に、2次元配列の構造を示す表を用意しました。

インデックス 格納されている要素
matrix[0] [1, 2, 3]
matrix[1] [4, 5, 6]
matrix[2] [7, 8, 9]

各インデックスで外側の配列を選び、次に内側の配列の要素を選択します。このようにして、配列の階層構造に従って要素をアクセスできます。

多次元配列の要素を変更する

多次元配列の要素を変更する場合も、アクセス方法と同様にインデックスを指定して新しい値を代入します。

要素を変更する例

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 要素を変更
matrix[1][2] = 10;

console.log(matrix);  // [[1, 2, 3], [4, 5, 10], [7, 8, 9]]

この例では、matrix[1][2]の要素を10に変更しています。結果として、配列は[[1, 2, 3], [4, 5, 10], [7, 8, 9]]となります。

多次元配列を使った実用例

多次元配列は、表形式のデータや座標のようなデータを管理するのに役立ちます。次に、座標のリストを多次元配列で表現する例を紹介します。

座標リストを多次元配列で管理する例

const coordinates = [
    [10, 20],
    [30, 40],
    [50, 60]
];

console.log(coordinates[0][1]);  // 20
console.log(coordinates[2][0]);  // 50

この例では、各座標が2次元配列として表されており、特定の座標にアクセスするために2つのインデックスを使用しています。たとえば、coordinates[0][1]20coordinates[2][0]50を返します。

まとめ

JavaScriptの多次元配列は、配列の中に配列を持つことで、複雑なデータを階層的に管理できます。各階層ごとにインデックスを使って要素にアクセスし、必要に応じて変更も行えます。多次元配列の使い方をマスターすることで、複雑なデータ構造を効率的に扱えるようになります。