JavaScriptのきほんを学ぼう

■第16話：配列と連想配列の操作

（最終更新日：2023.04.16）

「APIからの情報をうまく取り出したい」

配列と連想配列の基本的な概念を理解し、JavaScriptにおけるそれらのデータ構造の特性や用途について知ることは非常に重要だ。 なぜなら、これらはAPIやデータベースから得られた情報を操作することにも使われる。 そこでまず、配列と連想配列の違いを明確に理解しよう。 次に、JavaScriptにおけるそれらのデータ構造の使い方や操作方法を理解し、適切なデータ構造を選択できるようになろう。

１. 配列と連想配列の基本

配列は、複数のデータを順序付けて格納するためのデータ構造である。 JavaScriptの配列は、異なるデータ型の要素を混在させることができる。 配列の各要素にはインデックスを使ってアクセスでき、インデックスは0から始まる。 下記はその例で、配列の最初である0番を取得している。

連想配列（オブジェクト）は、キーと値のペアでデータを格納するデータ構造だ。 JavaScriptでは、オブジェクトリテラル構文を使って連想配列を作成できる。 連想配列のキーは、ユニークで不変なシンボルか文字列である必要があり、対応する値は任意のデータ型を持つことができる。 下記はその例で、連想配列の最初のkey、nameの値を取得している。

配列は順序付けられたデータの集まりで、インデックスを使ってアクセスする。 一方、連想配列はキーと値のペアでデータを格納し、キーを使ってアクセスする。 配列は要素の順序が重要である場合に使用し、連想配列は特定のキーに基づくデータの参照が必要な場合に使用する。

２. JavaScriptにおける配列と連想配列

JavaScriptの配列は、Arrayオブジェクトのインスタンスである。 配列は動的であり、要素の追加や削除によりサイズが変わる。 配列は添字を使ってアクセスし、添字は0から始まる。それは１の配列と連想配列の基本で説明した。 加えて配列の要素は、下記のように異なるデータ型を持つこともできる。

連想配列に関しても同様で、valueの部分は同じデータ型も持てるし、異なるデータ型も持つことができる。 加えて、上記で示した連想配列では、person.nameというように順番ではなく、keyの値でアクセスするという違いを覚えてほしい。

JavaScriptでは、配列と連想配列を操作するための様々なメソッドが提供している。 例えば、配列ではpush、pop、shift、unshiftなどのメソッドを使って要素の追加や削除ができる。 連想配列では、キーを使用して値にアクセスしたり、キーの削除にはdelete演算子を使用する。 下記の例では、上記の配列はpushを使って末尾に要素を追加している。 そして、下記の連想配列は、keyを新たに指定して値（Developer）を追加している。

３. まとめ

JavaScriptでは配列と連想配列に対してさまざまな操作が可能だ。 これらの操作方法を理解し、適切なデータ構造を使うことが重要である。 まずは、この２つの違いや使い方を理解した上で、適切な場面で使えるようになろう。 基本さえ分かっていれば、実践を通して深く学べるはずだ。

▼参考図書、サイト

  配列と連想配列の要素を取得する方法　　ふくねこ
  【javascript】連想配列（オブジェクト）の値を取得する 　　GXY-life