技術コンテンツ

JavaScript

No.31 多次元配列

【JavaScript】多次元配列 - 配列を階層的に記憶するデータ構造

JavaScriptの多次元配列について解説します。

検証環境

JavaScript -

macOS

14.1

多次元配列

多次元配列は“配列が階層的になっているデータ構造の配列”です。

配列が記憶する値が配列であるデータ構造で、その階層数に応じて２次元配列や３次元配列と呼びます。

多次元配列のための特別な仕組みはなく、配列や連想配列を使って多次元配列を表現します。

多次元配列の生成

多次元配列の生成は通常の配列や連想配列と同じです。

基本構文

// 配列の場合
変数 = []
// 多次元配列の場合
変数 = {}

サンプル

sample.js

___ih_hl_start
let fruits = [];
___ih_hl_end

console.log(fruits);

Console

[]

このサンプルの段階では変数fruitsは値に配列を持たないため、１次元配列です。

多次元配列の初期化

配列の初期化で値に配列を記述することで、多次元配列を表現できます。

基本構文

変数 = [
    [ 値1, 値2, 値3 ],
    [ 値4, 値5, 値6 ],
    [ 値7, 値8, 値9 ]
]

２〜４行目は各行が１つ１つの配列になっています。

更にその中に配列を記述して、３次元配列、４次元配列と次元数を増やすことが可能です。

サンプル

sample.js

___ih_hl_start
let fruits = [
    { name: 'Apple', price: 150 },
    { name: 'Orange', price: 100 },
    { name: 'Melon', price: 2300 }
];
___ih_hl_end

console.log(fruits);

Console

(3) [{…}, {…}, {…}]
0:
  name: "Apple"
  price: 150
1:
  name: "Orange"
  price: 100
2:
  name: "Melon"
  price: 2300

１〜５行目が多次元配列の初期化です。

変数fruitsは多次元配列を３つ記憶する２次元配列になっています。

値の取得

多次元配列の値を取得するには次元ごとのキーを指定します。

基本構文

変数[キー1][キー2]...

取得する値までのキーを次元ごとに[キー]の形式で繋げます。

サンプル

sample.js

let fruits = [
    { name: 'Apple', price: 150 },
    { name: 'Orange', price: 100 },
    { name: 'Melon', price: 2300 }
];

___ih_hl_start
console.log(fruits[0]['name']);
___ih_hl_end

Console

Apple

７行目のfruits[0]['name']が多次元配列の値の取得です。

このコードを１つずつ解釈すると次のようになります。

No	コード	解釈
1	`fruits`	変数`fruits`を示す。
2	`fruits[0]`	変数（配列）`fruits`のキー`0`の値を取得 → 連想配列`{ name: 'Apple', price: 150 }`
3	`fruits[0]['name']`	No.2で取得した配列のキー`'name'`の値を取得 → `'Apple'`

このように次元を１つずつ辿ることで、次元数が多い多次元配列でも同様に扱うことができます。

値の記憶

多次元配列に値を記憶するには取得の時と同様に次元ごとのキーを指定して値を代入します。

基本構文

変数[キー1][キー2]... = 値

値の取得と同様に次元を１つずつキーで辿って指定し、既に同じキーが存在する場合は値を上書き、存在しない場合は新しい記憶領域に指定したキーで値を記憶します。

サンプル

sample.js

let fruits = [
    { name: 'Apple', price: 150 },
    { name: 'Orange', price: 100 },
    { name: 'Melon', price: 2300 }
];

___ih_hl_start
fruits[1]['price'] = 200;
___ih_hl_end

console.log(fruits);

Console

(3) [{…}, {…}, {…}]
0:
  name: "Apple"
  price: 150
1:
  name: "Orange"
  price: 200
2:
  name: "Melon"
  price: 2300

７行目が多次元配列の値の記憶です。

値の取得と同様に１つずつキーで次元を辿って値を記憶しています。

また、配列を記憶し、２次元目の配列の個数を増やすことも可能です。

sample.js

let fruits = [
    { name: 'Apple', price: 150 },
    { name: 'Orange', price: 100 },
    { name: 'Melon', price: 2300 }
];

___ih_hl_start
fruits[3] = { name: 'Pineapple', price: 1200 };
___ih_hl_end

console.log(fruits);

Console

(4) [{…}, {…}, {…}, {…}]
0:
  name: "Apple"
  price: 150
1:
  name: "Orange"
  price: 200
2:
  name: "Melon"
  price: 2300
3:
  name: "Pineapple"
  price: 1200