JavaScript連想配列と配列の違いや、取得・追加・ソートの方法をまとめました

JavaScriptはHTMLとCSSの次に学習に選ばれることの多いプログラミング言語なので、まだ配列に慣れていないという方も多いかもしれません。しかし配列はオブジェクト指向言語でも手続き型の言語でも配列の概念は必ず出てくるので、JavaScriptでぜひ押さえておいてください。

JavaScriptで配列の概念をマスターしておけば、他のプログラミング言語でもほぼ同じです。書き方自体もだいたい同じですし、概念自体はまったく一緒です。メモリの取り方などはまったく同じで、表面的なコードだけ言語ごとに微妙に異なるイメージです。

そこで配列について学習していくのですが、配列と似たような概念に連想配列というものがあります。配列も連想配列も似たようなものなのですが、違いについて解説します。また、併せて取得、追加、ソートの方法についても解説していきます。

連想配列と配列の違い

上記の通り、連想配列と配列はほぼ同じものです。では何が違うのかというと、「連想配列は添え字を自由に設定できる」ということです。添え字とはインデックス番号のことで、配列の何番目、という数字のことです。

普通の配列では要素を入れると勝手に連番になりますが、連想配列の場合キーと値のペアで格納していくことになります。普通の配列では添え字がキーになっています。しかし連想配列には添え字、またはインデックスという概念がないため、キーと値をセットで指定します。

宣言の具体例を挙げると、配列と連想配列の違いは以下のようになります。

配列

var array = ['地震', '雷', '火事', 'オヤジ'];

連想配列

var arrayRenso = {earthquake:地震, thunder:雷, fire:火事, oyaji:オヤジ};;

以上のように配列は値を順番に格納していけば、自動的にキーが0,1,2,3と設定されます。しかし、連想配列の場合キーが必要で、上記の例では英語、ローマ字表記がキーになっています。「キー:値」という書き方になります。

値が先かキーが先か忘れてしまうかもしれませんが、それは問題ありません。概念だけ知っておけば、また実際に使用する際に改めて確認すると良いでしょう。ちなみに、配列は「[ ]」でくくり、連想配列は「[{ }」でくくります。

連想配列のメリットとしては、キーを設定するので、要素番号を把握する必要がないということです。要素数が多いとどれが何番目の要素か把握するのが大変ですが、さらに変更を加えるとインデックスが変わります。

連想配列ならキーが勝手に変わることがないので、要素に変更を加えてもすぐに取得などができます。

連想配列の取得

普通の配列はインデックスを指定して要素を取得しますが、連想配列の場合キーを指定して要素を取得します。具体的には以下のようになります。

var arrayRenso = {earthquake:地震, thunder:雷, fire:火事, oyaji:オヤジ};;
console.log(arrayRenso.oyaji);
console.log(arrayRenso['fire']);

以上のように記述すると、
オヤジ
火事
と出力されます。

構文としては、「配列名.キー」もしくは「配列名[‘キー’]」という書き方で要素を取得することができます。繰り返しになりますが、この掻き方を無理に暗記する必要はありません。なぜなら書き方をざっくりと把握しておけば、後はその都度調べれば良いからです。

頻繁に使用するようであれば、無理に覚えなくても勝手に書けるようになっているでしょう。また、要素ではなくキーを取得することも可能です。キーを取得したい場合、以下のように記述します。

var arrayRenso = {earthquake:地震, thunder:雷, fire:火事, oyaji:オヤジ};;
var key = Object.keys(arrayRenso);
console.log(key);

以上のように記述すると、出力結果は以下のようになります。

earthquake, thunder, fire, oyaji

Object.keys()メソッドによってキーを取得しました。

連想配列の追加

連想配列の追加も考え方は要素取得と同じで、以下のように記述します。

var arrayRenso = {earthquake:地震, thunder:雷, fire:火事, oyaji:オヤジ};;
arrayRenso.ghost = '幽霊';

このように記述すると、キーにghost、値に幽霊が追加されます。要素取得のときと同様に、以下のように記述することもできます。

arrayRenso['ghost'] = '幽霊';

どちらの書き方をしても問題ありません。

連想配列のソート

ソートはsort()メソッドで配列の中身を動かすことができます。具体的な記述は以下のようになります。

var arrayRenso = {earthquake:地震, thunder:雷, fire:火事, oyaji:オヤジ};;
var key = Object.keys(arrayRenso);

まずここまでは上で説明した通り、キーを取得するための記述です。これによって、keyのなかにarrayRensoのキーが格納されました。そして、次に以下のように記述します。

var result = { };
key.sort();

上記のコードの意味は、まず最終的に要素とキーを格納するための配列resultを用意し、キーが入っているkeyをソートしました。あとは、キーの数だけループを回しつつresultに要素とキーを入れれば、キーと同様に要素もソートされることになります。具体的には以下のようになります。

fot (var i = 0; 1 < key.length; i++) {
result[key[i]] = arrayRenso[key[i]];
};

こうすると、今resultの中身は「earthquake:地震, fire:火事, oyaji:オヤジ, thunder:雷」このようにソートされています。キーがアルファベットで昇順になり、セットで値も付いてきました。

連想配列の使用頻度は多い！

連想配列は普通の配列に比べると名前の浸透率は低いように思いますが、実際のシステム開発現場ではよく使われる概念です。むしろ、普通の配列よりも使用頻度は多いと言えるかもしれません。

扱っているシステムにもよりますが、多くの場合途中の要素が抜けたからといってキーが変わってしまうと困ります。普通の配列では要素数がキーのようなものなので、当然途中の要素がなくなるとキーがその都度変わることになります。

システムによっては要素数が変わった方が良いのであえて配列を使用する場合もありますが、多くの場合格納されている場所が変わると困るので、連想配列でキーを指定しておいた方が便利です。

また今回は説明しませんでしたが、複数の配列のキーを統一しておいて、一気に処理を掛けることもできます。上で挙げた例だと、複数の配列のキーを統一しておいて、一気にソートするようなことも可能です。

JavaScriptに限らず連想配列を使用する機会は実際のシステム開発でも非常に多いので、ぜひ今のうちに概要を把握しておいてください。と言っても、書き方を丸ごと暗記する必要はまったくありません。