前回は”配列”についての解説を行いましたが、今回は”連想配列”と呼ばれるものの解説を行います。
前回の記事はこちら↓
連想配列の定義の仕方
配列では角括弧「 [] 」を使用しましたが、連想配列の場合は波括弧「 {} 」を使います。
// 定義と同時に値を設定する場合
var testArray1 = {"name": "Yukimura Aoi", "Age": 15};
// 定義のみ
var testArray2 = {};
連想”配列“という名前で使われてはいますが、配列とはだいぶ挙動が異なり、より複雑になっています。
内容は「{キー : 値}」という形で設定されており、上記の記述の例では「name」と「Age」がそれぞれキーに該当します。
VBやC#では「Dictionary（辞書）型」、Javaでは「HashMap（ハッシュ）」という名前で使われていますので、なんらかの言語の経験者であれば恐らくどこかで似たような型を触った事があるのでは無いでしょうか。
JavaScriptにおいてこの連想配列は「オブジェクト」として扱われます。
まず以下は「testArray」変数に配列を格納したパターンです。
真ん中の値が型を指していますが、角括弧を使用した配列の場合はそのまま「Array」となっています。続いては波括弧を使用した連想配列の場合を見てみましょう。
こちらは「Object」となっています。
見た目は何となく似ていますが、この事からも配列と同様には扱えないというのが何となく分かりますね。
連想配列への要素追加と削除
要素の追加
連想配列には配列で使用していた「pop」や「push」といった関数は存在しません。
ですが値の追加については非常に簡単で、例えば「name」というキーを追加して「Yukimura Aoi」という値を持たせたい場合は以下の様に記述します。
var testArray = {};
testArray["name"] = "Yukimura Aoi";
または
var testArray = {};
testArray.name = "Yukimura Aoi";
どちらの書き方でも結果は同じです。
後者はクラスのプロパティを操作する時の書き方っぽいですよね。・・・というかその通りで、アクティブにプロパティを追加しているイメージで考えれば分かりやすいんじゃないでしょうか。
ただこの書き方が突然出てくると、コードを読む側としては「え・・・『testArray.name』って何？どこで定義されたんだこれ？」と（私は）思ってしまうのであまり好きでは無いですが、こういう使い方もあるという事です。
また、既に同じキーが存在した場合は以下の様に上書きされます。
var testArray = {};
testArray["name"] = "Yukimura Aoi";
// testArray = {name:"Yukimura Aoi"}
testArray["name"] = "Kuraue Hinata";
// testArray = {name:"Kuraue Hinata"}
要素の削除
連想配列に追加した要素の削除を行う場合は、以下の様にdeleteを使用します。
var testArray = {name:"Yukimura Aoi", age:15};
delete testArray["age"];
// または、↓
// delete testArray.age;
// 実行後
// testArray = {name:"Yukimura Aoi"}
testArrayオブジェクトのキーに対してdeleteを使用すると、値ごと要素が無くなっているのが確認できますね。
連想配列の要素数の確認
ついでに連想配列の要素数を確認する方法についても触れておきます。
配列の場合は「length」というプロパティを使いましたが、連想配列はオブジェクトですのでその様なものは持っていません。ではどうすれば良いか。
「キーの要素を抽出して、配列にしてしまう」事でlengthを使える用にすれば良いんです。
var testArray = {name:"Yukimura Aoi", age:15};
var len = Object.keys(testArray).length;
// len = 2
「Object.keys()」という関数を用いる事で、オブジェクトに含まれるキー項目が配列として返ってきますので、戻り値となる配列に対して「length」を指定しています。
上の例は「name」と「age」の2つが配列として返ってくる事になりますので、lengthは2となります。
■「keys()」があるって事はもしかして「values()」も？
と考えるかもしれませんが、残念ながらvalues()は無いんですよね。キー配列と元のオブジェクトを使用して、自分で値の配列を用意しましょう。
Dictionary型にはvaluesってあるんですけどねー。
という事で連想配列についてはここまで。
次回は配列と連想配列の入れ子構造（2次元配列など）の扱い方について解説します。