（最終更新月：2023年10月）
✔このような方へ向けて書かれた記事となります
「Javascriptの連想配列が何なのか知りたい」
「Javascriptの連想配列の使い方がわかりたい」
「Javascriptの連想配列の活用の仕方を把握したい」
✔当記事を通じてお伝えすること
- Javascriptの連想配列の基本理解
- Javascriptの連想配列への熟練したアクセス方法
- Javascriptの連想配列の活用事例
当記事では、Javascriptの連想配列のアクセスの基本から、その応用、実例までを詳細に画像を用いて解説します。
ぜひ最後までお付き合いください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
JavaScript の連想配列とは
こちらでは、JavaScript の連想配列の基本についてお伝えしていきます。
- 通常の配列との違い
- 連想配列の特性
通常の配列との違い
通常の配列は、インデックス番号を用いてデータにアクセスします。
例えば、array[0] は、インデックス「0」により、最初の要素にアクセスできます。
一方、連想配列（オブジェクト）は、キーと値のペアでデータを管理する構造です。
このキーを使用してデータにアクセスします。
object["key"]
//もしくは
object.key連想配列の特性
連想配列は、文字列やシンボルをキーとして持てるもの。
また、キーは一意である必要があり、同じキーが存在する場合、後から追加されたデータで上書きされます。
この特性により、特定の名前やラベルに関連付けられたデータを効率的に管理できます。
連想配列の作成と利用方法
こちらでは、「連想配列の作成と利用方法」について詳しく解説します。
- 連想配列の作り方
- 配列へのデータ追加方法
- 連想配列の要素削除方法
連想配列の作り方
連想配列は、{} を使用して作成します。
let person = {name: "John", age: 30};ここで、name と age はキー、"John" と 30 はそれぞれのキーに関連付けられた値です。
配列へのデータ追加方法
データの追加は、新しいキーを指定して値を設定します。
person.job = "Engineer";これにより、job という新しいキーに "Engineer" という値が追加されます。
連想配列の要素削除方法
要素の削除は、delete 演算子を使用します。
delete person.age;これにより、age キーとそれに関連付けられた値がオブジェクトから削除されます。
連想配列のデータ抽出
こちらでは、「連想配列のデータ抽出方法」について詳しく解説します。
- 値の取得方法
- キーの抽出方法
値の取得方法
値の取得は、キーを指定しておこないます。
let name = person.name;これにより、name キーに関連付けられた値が取得されます。
キーの抽出方法
オブジェクトのキーを抽出するには、Object.keys() メソッドを使用します。
let keys = Object.keys(person);これにより、person オブジェクトのすべてのキーが配列として返されます。
連想配列のループ処理について
こちらでは、「連想配列のループ処理方法」について詳しく解説します。
- for-in を用いたループ処理方法
- forEach を用いたループ処理方法
for-in を用いたループ処理方法
for-in ループは、オブジェクトの各キーに対して繰り返し処理をおこなうための方法です。
for (let key in person) {
console.log(key, person[key]);
}これにより、person オブジェクトのすべてのキーと値がコンソールに表示されます。
forEach を用いたループ処理方法
Object.entries() と forEach を組み合わせることで、オブジェクトの各キーと値に対して繰り返しの処理が可能。
Object.entries(person).forEach(([key, value]) => {
console.log(key, value);
});
配列の並び替えとソート
こちらでは、「連想配列の並び替えとソート方法」について詳しく解説します。
- キーを利用したソート方法
- 複数の連想配列に対するソートの考え方
キーを利用したソート方法
オブジェクトのキーを基にソートする場合、Object.entries() と sort() を組み合わせます。
let sortedByKeys = Object.entries(person).sort((a, b) => a[0].localeCompare(b[0]));複数の連想配列に対するソートの考え方
複数の連想配列が含まれる配列をソートする場合、特定のキーの値を基にソートをおこないます。
例えば、age キーの値を基にソートしたい場合、以下のようにしましょう。
let people = [
{name: "John", age: 30},
{name: "Jane", age: 25},
{name: "Doe", age: 35}
];
people.sort((a, b) => a.age - b.age);
console.log(people);このコードは、age の値に基づいて、people 配列内の連想配列を昇順にソートします。
連想配列でのpushメソッドの利用について
JavaScriptのオブジェクト（連想配列）には、配列のような push メソッドは存在しません。
しかし、新しいキーと値のペアを追加することは簡単です。
let person = {name: "John", age: 30};
person.job = "Engineer";
console.log(person);このコードは、job という新しいキーと "Engineer" という値を person オブジェクトに追加します。
まとめ
当記事では、JavaScriptの連想配列（オブジェクト）について学習してきました。
連想配列は、キーと値のペアでデータを管理する強力なツールです。
適切に使用することで、データの管理や操作が効率的におこなえます。