多次元配列の利用

JavaScript の要素にはどのような値でも格納することができますが、要素の値として別の配列リテラルを格納することもできます。このような配列のことを多次元配列と呼びます。ここでは JavaScript で多次元配列を扱う方法について解説します。

(Last modified: 2023年02月03日)

多次元配列を作成する
多次元配列の要素へアクセスする

多次元配列を作成する

要素として数値や文字列が格納されている配列リテラルは次のようなものでした。

let result = [78, 69, 84, 50];
let fruit = ['apple', 'lemon'];

それでは次のようなデータを配列として扱うにはどうすればいいでしょうか。

多次元配列を作成する(1)

配列の要素には数値などの他に配列などオブジェクト型の値も格納することができます。そのため、先ほどのようなデータは別の配列リテラルを要素として持つ配列を作成することであらわすことができます。

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai']
];

※ 見やすいように要素ごとに改行していますが、続けて記述しても構いません。

このように配列の要素として、別の配列リテラルが格納されているものを多次元配列と呼びます。

先ほどのサンプルは次のように記述した場合と同じです。

let user1 = ['Yamada', 28, 'Tokyo'];
let user2 = ['Suzuki', 35, 'Fukuoka'];
let user3 = ['Honda', 24, 'Sendai'];

let userData = [user1, user2, user3];

このように配列の要素として別の配列リテラルを格納することで、より複雑な値の集まりを配列を使って管理することができます。

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

他の配列と同じようにインデックスを指定することで配列の要素へアクセスすることができます。下記ではインデックス 0 の要素を取得しています。

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai']
];

let user1 = userData[0];
console.log(user1);
>> ["Yamada", 28, "Tokyo"]

取得した要素は配列なので、今度はこの配列に対してインデックスを指定することで配列の要素へアクセスすることができます。

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai']
];

let user1 = userData[0];
console.log(user1[0]);
console.log(user1[1]);
console.log(user1[2]);

>> Yamada
>> 28
>> Tokyo

先ほどはいったん配列の要素を取得したあとで、その要素に含まる配列の要素へアクセスしていましたが、まとめて次のように要素にアクセスすることもできます。

配列名[インデックス][要素に含まれる配列のインデックス]

多次元配列の要素へアクセスする(2)

先ほどのサンプルを書き直してみると次のようになります。

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai']
];

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

>> Yamada
>> 28
>> Tokyo

これで配列の要素に格納されている配列の要素に対しても直接アクセスすることができます。

-- --

JavaScript で多次元配列を扱う方法について解説しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。