【JavaScript】連想配列とは？追加やfor文での扱い方

連想配列とは？

連想配列の一番の魅力はやはり任意のキーと値を一つのデータとしてもっておくことができることです。例えば、従業員ごとのデータを管理したい場合に年齢や住所、名前などの個人情報をキーと値で持つことによってデータの管理が容易に行なえます。

今回はJavaScriptの基本である、連想配列の操作方法について解説します。

　

サンプルコード

定義の仕方から初期化、データの追加、for文での扱い方をみていきます。

連想配列を定義する

定義の仕方は以下の２種類があります。

// 1つ目
var user = new Object();

// 2つ目
var user = {};

上記どちらでも大丈夫です。実際によく見るのは２つ目の書き方をよく見ますし、私もこちらを使用します。

　　

連想配列に初期値を設定する

決まった情報を連想配列に格納したい場合、以下のように記載できます。

var user = {name: "Taro", age: 20};

上記では連想配列を定義しつつ要素の追加も同時に行えます。従業員の情報として”名前”、”年齢”のデータを格納しました。

　

連想配列にデータを追加する

連想配列に要素を追加する方法は複数存在します。

以下では連想配列名＋”ドット” = 任意のキー: “値”と記載します。

user.gender = "man";

変数名userに対してgenderという要素を追加しました。

次にブラケットを記述して追加する方法です。ブラケット内に文字列を記述することでその文字列をキーとして要素を追加します。

user["address"] = "Japan";

ループ処理 キーの取得（for in）

for-inを使用して連想配列内のキーを取得します。キーが取得できたら変数に対してキーを指定すると値を取得できます。

var user = {name: "Taro", gender: "man"};

for (var key in user) {
    console.log("Key: " + key + ", Value: " + user[key]);
}

// 実行結果
Key: name, Value: Taro
Key: gender, Value: man

上記の方法でキーの取得ができることが確認できました。

　

ループ処理　値の取得（for of）

for-inとObject.valuesを使用して格納された各値の取得を行います。

Object.valuesの引数にはループ処理を行いたい連想配列を指定します。

var user = {name: "Taro", gender: "man"};

for (var val of Object.values(user)) {
    console.log("Value: " + val);
}

// 実行結果
Taro
man

for-inとObject.valuesを組み合わせることで値の取得ができていることが確認できます。

　　

ループ処理 (forEach())

forEachは配列に対して使用できるのですが連想配列のままだと使用できません。

そこでObject.keys(連想配列変数名)やObject.values(連想配列名)を使用することで中身の取得を行うことができます。

まずはキーの取得からみていきます。

var user = {name: "Taro", gender: "man"};

Object.keys(user).forEach(key => {
    console.log("Key: " + key + ", Value: " + user[key]);
});

// 実行結果
Key: name, Value: Taro
Key: gender, Value: man

for-inと同様にforEachを使用してキーの取得が行えていることが確認できます。

今回アロー関数を用いて記載しましたが以下のような記載でも同様の動きになります。

Object.keys(user).forEach(function(key) {
    console.log("Key: " + key + ", Value: " + user[key]);
});

// 実行結果
Key: name, Value: Taro
Key: gender, Value: man

　　

次に値を取得しループさせる方法です。上記コードと異なる箇所はObject.valuesを指定します。

var user = {name: "Taro", gender: "man"};

Object.values(user).forEach(val => {
    console.log("Value: " + val);
});

// 実行結果
Taro
man

上記でも値の取得ができていることが確認できます。

　　

Object.entries()でキーと値を同時に取得する

上記までに紹介したループ処理ではキーだけを取得する方法や値のみを取得する方法を紹介しました。

Object.entries()を使用するとキーと値を同時に取得することができます。

var user = {name: "Taro", gender: "man"};

for (var [key, val] of Object.entries(user)) {
    console.log("Key: " + key + ", Value: " + val);
};

// 実行結果
Key: name, Value: Taro
Key: gender, Value: man

for-ofので連想配列を配列で受けます（上記コードでいうとvar [key, val]）。

受けた配列にキーと値がセットで格納されるのでそれぞれを使うことができます。

　　

まとめ

JavaScriptで基本とされる連想配列ですが扱い方がたくさんありまずどれか一つ扱い方を覚えてその後適宜、他の扱い方へとステップアップしていくとスムーズに慣れていくと思います。（私自身そうでした）

連想配列はとても便利で良く利用されるので扱い方をマスターしておきましょう。