JavaScriptの連想配列 - 追加削除やソートも解説

JavaScriptの配列には、通常の配列とは異なる連想配列（associative array）という配列があります。これはオブジェクト型の使い方の一つで、自動的に割り当てられる数値をキーとする通常の配列とは異なり、任意のキー（文字列）に紐づけて情報を持たせられるようになっています。「キー」と「値」のペアによるデータ構造ととらえるとわかりやすいでしょう。

連想配列はキーを任意に決定できることで、格納されている情報を連想しやすくした配列ですが、要素の追加、削除なども可能になっています。

ここでは連想配列について、サンプルを見ながら配列の作り方や追加、削除、ソートなどを解説していきます。

JavaScriptの連想配列

配列は要素の「添字（インデックス）」は「0」から始まる数値が自動的に割り当てられます。一方で連想配列の「インデックス」は数値ではなく文字列の「キー」を指定し、代入や取得を行ないます。

連想配列は要素ごとの変数をまとめて管理できるという主目的のほかにも、オブジェクト型であることからfunction（関数）を格納することができます。さまざまなライブラリなどで用いられています。

具体的に配列やオブジェクトとの違いを見ていきましょう。

配列との違い

配列と連想配列の宣言の仕方が異なり、配列の宣言には[]が用いられるのに対し、連想配列では{}が使用されます。また、連想配列では必ずキーと値をセットで代入します。

以下が配列と連想配列の基本形です。

配列の宣言：

var 配列の変数名 = ["値a","値b","値c"];

連想配列の宣言：

var 連想配列の変数名 = {キーa:"値a",キーb:"値b",キーc:"値c"};

このように、任意に定めた文字列（キー）を用いて配列を作るのが連想配列です。

オブジェクトとの違い

厳密にはJavaScriptには「連想配列」は存在しません。他のプログラミング言語で「連想配列」と呼ばれている機能を、JavaScriptでは「オブジェクト」で実現できるということです。

そのため、JavaScriptにおいては「連想配列」＝「オブジェクト」と考えて問題ないでしょう。

JavaScriptの連想配列の基礎 - その1

それでは連想配列の基礎的な記述方法を見ていきましょう。まずは連想配列の基本となる操作として、作り方、要素の追加、削除、取り出し方を、サンプルとともに順に解説していきます。

連想配列の作り方

連想配列の作り方を2種類紹介します。まずはそれぞれサンプルを見ていきましょう。まずは新しいオブジェクトの作成を宣言し、要素を1つずつ追加する方法です。

以下のサンプルでは、「a」という連想配列を宣言し、「a」に「name」というキーと「Mike」という値を追加しています。同様に3行目では「sex」と「Male」のキーと値のセットを追加しています。

let a = new Object();
a.name = "Mike";
a.sex = "Male";

次に、連続して記述する方法です。以下のサンプルは、上のサンプルと同じ処理を行なっています。複数のプロパティが含まれる場合、連続して記述するよりは、可読性を上げるためにプロパティごとに改行したほうがよいでしょう。

let a = {name:"Mike", sex:"Male"};

連想配列の要素の追加

連想配列に新しい要素を追加する方法を2通り紹介します。まずはサンプルを見てみましょう。

// チェーンで追加する方法
let a = {name:"Mike", sex:"Male"};
a.place = "Tokyo";

// 添字（キー）で追加する方法
a["place"] = "Tokyo";

この2つのコードは同じ処理を行なっています。どちらも連想配列aを呼び出し、新しいキーplaceと値Tokyoをセットにして追加しています。

どちらも同じ結果になりますが、記述は統一したほうが見やすいため、プロジェクトのルールに合わせるとよいでしょう。

連想配列の要素の削除

連想配列から要素を削除する場合、deleteという命令を使用します。削除の記述方法は2通りあります。まずはサンプルを見てみましょう。

連想配列を変数名aに代入し、deleteの命令文を実行しています。

let a = {name:"Mike", sex:"Male"};
delete a.name;

または

let a = {name:"Mike", sex:"Male"};
delete a["name"];

どちらでも同じ結果となるため、追加と同様にプロジェクトのルールに合わせるとよいでしょう。

連想配列をループして取り出す方法

連想配列が持っている「キー」や「値」を1つずつ連続して取り出す場合は、for...in文でループ処理を行ないます。for...in文を使用すると短い記述で効率的に「キー」や「値」を取得・設定ができるため、for...in文の記述はしっかりマスターしておきましょう。基本的な記述方法は「for(変数名 in 連想配列名){処理}」です。

ではサンプルコードを見てみましょう。このサンプルでは、変数名aという連想配列からキーを取り出し「keyは（取り出したキー）です」と表示します。

let a = {name:"Mike", sex:"Male"};
for (key in a){
    console.log(key + "は" + a[key] + "です");
}

JavaScriptの連想配列の基礎 - その2

次に、連想配列を操作する応用的な記述方法を見ていきましょう。キーやデータ一覧の取得やソートは、データを格納するオブジェクトである連想配列を操作するのに必須といえる記述です。

連想配列からキー一覧を取得する方法

連想配列からキーを取り出すには、for...in文で取り出すか、もしくは「Object.keys()」メソッドを使用します。それぞれのサンプルコードを見てみましょう。

for...in文の場合、変数名aの連想配列からキーを取り出す方法は、前項のループして取り出す方法と同様です。forループでキーを取得してリストのキー文字列を順番に表示します。

let a = { name:"Mike",  sex:"Male", place:"Tokyo"};
for (key in a){
    console.log(key);
}

Object.keys()を使用すると、キーの一覧を配列として取得できます。

console.log(Object.keys(a));

このコードを実行すると、どちらも以下のような結果が表示されます。

["name" , "sex" , "place"]

連想配列からデータ一覧を取得する方法

連想配列から値（value、データ）を取得するには、for...in文を使用してまずキーを取得し、「連想配列名[取得したキー文字列]」と記述します。

以下のサンプルでは、for...in文で変数名aの連想配列からキーを取り出し、取得したキーとペアになっている値をa[key]で出力しています。

for (key in a){
    console.log(a[key]);
}

では、連想配列の内部に連想配列が格納されている、入れ子（ネスト）された連想配列からのデータ取得はどのように行なえばよいのでしょうか。

ネストされた連想配列の場合、まず変数名[key]で一番外側の連想配列の値を取得します。その上で、なかの連想配列の値を取得するので、「外の連想配列の変数名[key].なかの連想配列のキー文字列」と記述します。

実際のサンプルを見てみましょう。このサンプルではfruitsという連想配列の内側に、apple、orange、melonの3つの連想配列をネストしています。この連想配列からfor...in文でまずfruitsのキーを取得し、キーに含まれている内側の連想配列からデータを取得しています。

var fruits = {
    apple : { "name" : "りんご", "value":100 },
    orange : { "name" : "オレンジ", "value":80 },
    melon : { "name" : "メロン", "value":1000 }
};

for (key in fruits) {
    console.log(key);
    console.log("商品名は" + fruits [key].name +"です");
    console.log("価格は" + fruits [key].value +"円です");
}

連想配列にソートをかける

JavaScriptの連想配列にはソート機能はありません。しかし、連想配列のソートが求められる場合もあります。このような場合、ソート機能を自作する必要があります。

以下のサンプルを見ていきましょう。サンプルではキーと値でそれぞれにソートを行なっています。

キーでソートする場合

キーでソートする場合、サンプルではまずObject.keys(fruits[0]);でキーだけを取得しています。取得したキーは「sort()」を使用してソートし、コンソールにソート順に表示しています。

var fruits = [
             { "name" : "apple", "value" : 100},
             { "name" : "orange", "value" : 80},
             { "name" : "melon", "value" : 1000}
];

// キーのソート：
keys = Object.keys(fruits[0]);
keys.sort();
for (key of keys){
    console.log(`${key} : ${fruits[0][key]}`);
}

値でソートする場合

値でソートする場合、サンプルでは比較関数を用いて2つの値a,bを比較しています。これはaがbより前に来る場合は負、後ろに来る場合は正の値を返します。

この結果を用いてfor文でキー[配列番号]を指定して値を取り出し、コンソールに表示します。

var fruits = [
             { "name" : "apple", "value" : 100},
             { "name" : "orange", "value" : 80},
             { "name" : "melon", "value" : 1000}
];

fruits.sort(function(a,b){
    return (a.value - b.value);
});

for(var i = 0; i < fruits.length; i++){
    console.log(fruits[i].name + "は" + fruits[i]["value"]);
}

連想配列同士を連結させる

複数の連想配列同士を連結させる場合、Object.assign()を使用します。サンプルでは2つの連想配列を呼び出し、Object.assign(obj1, obj2); によってobj1にobj2が連結されます。

const obj1    = { a: 1, b: 2, c: 3 };
const obj2    = { d: 4, e: 5, f: 6 };
const result1 = Object.assign(obj1, obj2);
console.log(result1);

連想配列はJavaScriptの基本！必ず押さえよう

JavaScriptの連想配列は「オブジェクト」を指すため、他の機能でオブジェクトを使用する場合、{ key : value }の構文は非常によく使用されます。多くのデータを格納し、簡単に取り出せる連想配列を使うことで、JavaScriptのデータ操作は格段に容易になります。

JavaScriptでの記述の基本となる連想配列を理解すると、変数、オブジェクトに対しての知識の幅が広がるだけでなく、さまざまなライブラリを扱いやすくなり、飛躍的にプログラミングの幅が広がるため、ぜひマスターしておきましょう。