配列の中に配列を格納する | 多次元配列 | JavaScript 超完全入門 基本から発展までのすべて

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

多次元配列とは?

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

多次元配列の基本例

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

console.log(matrix[0]);  // [1, 2, 3]
console.log(matrix[1][2]);  // 6

この例では、matrixという2次元配列が定義されています。最初の配列には[1, 2, 3]が格納されており、2番目の配列には[4, 5, 6]が格納されています。要素にアクセスするには、インデックスを2回使用します。

多次元配列の構造

多次元配列は、配列の中に複数の配列を持つ構造です。各要素はさらに配列であり、それぞれの配列に含まれる要素も配列になります。以下は多次元配列の構造を示す表です。

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

各要素は別の配列を持っており、インデックスを使ってそれぞれの配列にアクセスできます。

多次元配列の要素にアクセスする

多次元配列の要素にアクセスするには、インデックスを2つ使用します。最初のインデックスで外側の配列を指定し、次に内側の配列の要素を指定します。

多次元配列の要素にアクセスする例

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

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

この例では、matrix[0][1]は2番目の要素2にアクセスし、matrix[2][2]は最後の要素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]の要素610に変更されています。結果として、配列は[[1, 2, 3], [4, 5, 10], [7, 8, 9]]となります。

多次元配列の利用例

多次元配列は、表形式のデータや複雑なデータ構造を管理するために役立ちます。以下に、簡単な例として座標を管理する方法を紹介します。

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

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

console.log(coordinates[0]);  // [10, 20]
console.log(coordinates[1][1]);  // 40

この例では、各座標が2次元配列として管理されており、coordinates[1][1]40という値を返します。座標のリストなど、データのまとまりを表現するのに多次元配列が便利です。

まとめ

JavaScriptにおける多次元配列は、配列の中にさらに配列を格納することで、複雑なデータ構造を表現できる強力な手法です。多次元配列を利用することで、表形式のデータや座標リストのようなデータ構造を簡単に管理できます。インデックスを2つ使用して要素にアクセス・変更する方法を理解することで、多次元配列の操作がより直感的に行えるようになります。