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

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

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

JavaScriptでは、配列の中に別の配列を格納できます。このような配列を多次元配列と呼びます。最もよく使われるのは2次元配列で、表形式のデータや座標などを扱う際によく利用されます。

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

多次元配列の要素にアクセスするには、階層ごとにインデックスを指定します。2次元配列では配列[行][列]のように2つのインデックスを指定します。

2次元配列のアクセス例

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

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

実行結果

2
7

matrix[0][1]は1行目2列目の値である2、matrix[2][0]は3行目1列目の値である7を取得しています。

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

3次元配列では、さらに1つインデックスを指定します。配列[階層][行][列]のような形になります。

3次元配列のアクセス例

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

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

実行結果

6
8

3次元配列では、外側から順番に階層を指定して目的の要素へアクセスします。

多次元配列の構造

2次元配列では、外側の配列の各要素がさらに配列になっています。

まず外側の配列を選択し、その後に内側の配列の要素へアクセスするという流れになります。

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

要素を書き換える場合も、インデックスを指定して新しい値を代入するだけです。

要素を変更する例

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]
]

このように、指定した位置の要素だけを書き換えることができます。

多次元配列をループで処理する

多次元配列では、for文を入れ子にしてすべての要素を処理することがよくあります。

2次元配列を順番に表示する例

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

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(matrix[i][j]);
    }
}

実行結果

1
2
3
4
5
6
7
8
9

外側のループが行を、内側のループが列を順番に処理しています。

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

多次元配列は、座標や表形式のデータなどを管理する際によく利用されます。

座標リストを管理する例

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

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

実行結果

20
50

このように、X座標とY座標の組み合わせを簡単に管理できます。

まとめ

• 多次元配列は配列の中に配列を格納したデータ構造である。
• 2次元配列は配列[行][列]のようにアクセスする。
• 3次元配列ではさらにインデックスを追加してアクセスする。
• インデックスを指定することで要素の取得や変更ができる。
• 多次元配列は表形式データや座標データなどの管理によく利用される。