JavaScriptの連想配列は、キーと値のペアでデータを管理できるとても便利なオブジェクトです。
しかし、配列とは異なる特性を持つため、扱い方をしっかり理解しておく必要があります。
連想配列を使いこなせるようになれば、コードの可読性が上がり、より効率的にプログラミングできるようになるでしょう。
本記事では、連想配列の基本から応用までを網羅的に解説します。
コード例も豊富に紹介するので、ぜひ実践しながら学んでいってください！
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
連想配列とは
連想配列は、キーと値のペアを格納できるオブジェクトです。
配列が数値のインデックスで要素にアクセスするのに対し、連想配列ではキー（文字列）を使ってアクセスします。
連想配列の宣言・初期化
連想配列の宣言・初期化には、オブジェクトリテラルを使う方法と、newキーワードでオブジェクトを作る方法があります。
// オブジェクトリテラルで宣言・初期化
let fruits = {apple: 200, banana: 150, orange: 100};
// newキーワードで宣言・初期化
let vegetables = new Object();
vegetables.carrot = 120;
vegetables.tomato = 200;オブジェクトリテラルを使う方が簡潔で一般的です。初期値がある場合はオブジェクトリテラルを使い、空の連想配列を作るときはnewキーワードを使うと良いでしょう。
連想配列への要素の追加と削除
連想配列に要素を追加するには、新しいキーを指定して値を代入します。
fruits.grape = 500;
// キー名に空白などを含む場合は、ブラケット記法
fruits['green apple'] = 180;要素の削除には、delete演算子を使います。
delete fruits.orange;連想配列からデータを取得する
連想配列からデータを取得するには、キーを指定して値にアクセスします。ドット記法とブラケット記法が使えます。
// ドット記法
console.log(fruits.apple);
// ブラケット記法
console.log(fruits['green apple']);キーの存在チェック
連想配列にキーが存在するかどうかを確認したい場合は、in演算子を使います。
console.log('apple' in fruits); //true
console.log('lemon' in fruits); //false全てのキーや値を取得
連想配列の全てのキーや値を取得したい場合は、Object.keys()やObject.values()を使います。
console.log(Object.keys(fruits)); // ["apple", "banana", "grape", "green apple"]
console.log(Object.values(fruits)); // [200, 150, 500, 180]連想配列のループ処理
連想配列のループ処理には、for…in文を使うのが一般的です。
for (let key in fruits) {
console.log(`${key}: ${fruits[key]}`);
}for…in文はキーに対してループ処理を行うので、値が必要な場合はキーから取得する必要があります。
Object.entriesを使ったループ
Object.entries()メソッドを使うと、連想配列を[キー, 値]のペアの配列に変換できます。これをfor…ofループで処理すると便利です。
for (let [key, value] of Object.entries(fruits)) {
console.log(`${key}: ${value}`);
}連想配列のソート
連想配列のソートは、キーか値を配列に取り出してソートする必要があります。
キーでソート
キーでソートするには、Object.keys()で取り出したキーの配列をソートします。
let keys = Object.keys(fruits);
keys.sort();
let sortedFruits = {};
for (let key of keys) {
sortedFruits[key] = fruits[key];
}
console.log(sortedFruits);値でソート
値でソートするには、Object.entries()で[キー, 値]のペアの配列を取得し、値を基準にソートします。
let entries = Object.entries(fruits);
entries.sort((a, b) => a[1] - b[1]);
let sortedFruits = {};
for (let [key, value] of entries) {
sortedFruits[key] = value;
}
console.log(sortedFruits);連想配列の注意点
キーの重複
連想配列では、キーは一意でなければならない点に注意が必要です。同じキーを複数定義した場合、後に定義された値で上書きされます。
let data = {a: 1, a: 2};
console.log(data.a); // 2プロパティの存在チェック
連想配列にプロパティが存在するかどうかを、undefinedとの比較でチェックすることがありますが、これは危険です。
let obj = {a: undefined};
console.log(obj.a === undefined); // true
console.log(obj.b === undefined); // true上記のコードでは、存在しないプロパティと、undefinedが代入されているプロパティの区別がつきません。
pushメソッドは使えない
配列にはpushメソッドを使って要素を追加できますが、連想配列にはpushメソッドがありません。
let obj = {a: 1, b: 2};
obj.push({c: 3}); // TypeError: obj.push is not a functionまとめ
JavaScriptの連想配列について、基本的な使い方から応用的なテクニックまで解説しました。
- 連想配列はキーと値のペアを格納するオブジェクト
- 要素の追加・削除・取得にはドット記法やブラケット記法を使う
- ループ処理にはfor…in文やObject.entriesが便利
- ソートにはObject.keysやObject.entriesを使う
- キーの重複や、プロパティの存在チェックには注意が必要
この記事の内容を実際のプログラミングで活用し、連想配列をマスターしていきましょう！
柔軟なデータ管理ができるようになると、よりレベルの高いコーディングが可能になるはずです。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
