JavaScriptの配列の中には、通常の配列と違った連想配列と言うものがあります。連想配列にはキーに名前を指定することができます。通常の配列内の要素はindex番号で参照するのに対し、連想配列は名前で参照できるので参照しやすく、どこに何のデータがあるかわかりやすくなります。本記事でしっかりと学習しましょう。

連想配列の基本

連想配列は次のように記述します。

let member1 ={name:'太郎',age:'39',sex:'male'}

連想配列は普通の配列と違い「{}」内でキー名と要素を記述します。

要素を参照する際は２種類やり方があり、例えばnameキーを持つ要素を参照する際には次のように記述します。

console.log(member1.name)
console.log(member1['name'])

どちらも結果は「太郎」となります。前者の書き方はドット演算子を使った方法、後者の書き方はブラケット構文を使った方法です。ドット演算子を使用する際には、「１」や「１person」といった最初が数字から始まるキー名を使用することはできません。数字をキーに持つ連想配列の要素は次のように参照しましょう。

let members ={1:'鈴木',2:'山田',3:'田中'}
console.log(member1['1'])

次のようにするとsyntax errorとなってしまいます。

console.log(member1.1)//結果：syntax error

連想配列の配列を作る

複数の連想配列をまとめた配列を作ることも可能です。

let members =[
   {name:'松井',age:'39',sex:'male'} ,
   {name:'今田',age:'34',sex:'female'} ,
   {name:'鈴木',age:'24',sex:'male'} ,
   {name:'山田',age:'56',sex:'male'} ,
   {name:'田中',age:'89',sex:'female'}
]

各連想配列は上から順に０から始まるindex番号が割り振られています。そのため、値を参照する際は次のように指定します。

console.log(members[0].name);//結果：松井

まず、参照したい値を持つ連想配列のindex番号をブラケット構文で記述し、その次にキー名を指定します。

連想配列の要素の削除・追加

連想配列の要素を排除する際はdelete文を使って次のように記述します。

delete member1['name']
console.log(member1)//結果：{age: "39", sex: "male"}

指定したキー名の要素ごと削除されているのがわかります。ドット演算子を使っても削除することができます。

delete member1.name;

追加するには代入演算（＝）に新しく追加する値を指定します。新しいキー名の指定はブラケット構文、ドット演算子とも使用することができます。

member1.birthday = '4月12日';
member1.job = 'programmer'
console.log(member1)//結果：{name: "太郎", age: "39", sex: "male", birthday: "4月12日", job: "programmer"}

複数の連想配列の要素を追加したり削除する際は次のようにします。

members[0].job = 'programmer'
delete members[0].name
console.log(members[0]);//結果：{age: "39", sex: "male", job: "programmer"}

 連想配列の要素の存在チェック

連想配列に含まれている要素を列挙するにはObject.valuesメソッドを使用します。このメソッドの引数に連想配列を渡すことで要素を列挙した配列が返されます。

console.log(Object.values(member1))//結果：["太郎", "39", "male"]

連想配列は別名オブジェクトリテラルといい、厳密にはarray（配列）型のオブジェクトではなく、object(オブジェクト)型のオブジェクトです。通常の配列の特定の要素を検索する際にはincludesメソッドを使用しますが、連想配列はobject型のオブジェクトなのでarray型配下のincludesメソッドを使用することができません。そのため、Object.valuesメソッド使用して、要素のみの配列を作成し、その配列にincludesメソッドを適用して、特定の要素の存在を確認します。「太郎」が要素に存在していることを確認する際は次のような記述となります。

let data = Object.values(member1)
console.log(data.includes('太郎'))//結果：true

includesメソッドは真偽値を返します。引数に指定した値が存在すればtrue、存在しなければfalseを返します。

keysメソッドによるキーの取り出し

連想配列のキー名を取り出すにはObject.keysメソッドを使用します。Object.valuesメソッドと同じように配列を返します。

let key  = Object.keys(member1);
console.log(key);//結果：["name", "age", "sex"]

Object.keysメソッドの引数にキー名を取り出したい連想配列を指定します。キー名が存在するかどうかもincludesメソッドを使用します。

console.log(key.includes('name'))//結果：true

連想配列のソート

通常の配列はsortメソッドによってソートすることができます。sortメソッドの引数に何も指定しないと配列の要素はunicodeの順番から昇順に並び替えられます。

let fruits = ['りんご','ぶどう','いちご','みかん']
let data1 = [123,345,113]
console.log(data1.sort())//結果：[113, 123, 345]
console.log(fruits.sort())//結果：["いちご", "ぶどう", "みかん", "りんご"]

一方、連想配列のソートをする場合はsortメソッドが用意されていないので、一度、既出のObject.keysメソッドを使って配列を作り、キー名をsortメソッドによって並び替え、連想配列に代入し直します。

連想配列のキー名をソートする

連想配列のキー名をソートするには次のように記述します。

let member1 ={name:'太郎',age:'39',sex:'male'}
let key = Object.keys(member1);
key.sort();
console.log(key);//結果：["age", "name", "sex"]
let sortedMember1 = {};
for( let i = 0; i < key.length; i++ ) {
   sortedMember1[key[i]]= member1[key[i]];
}
console.log(sortedMember1);//結果：{age: "39", name: "太郎", sex: "male"}

まず、キー名をObject.keysメソッドを使って取り出し、配列keyに格納します。配列keyはsortメソッドで並び替えることができます。sortメソッドは元の配列を並び替えて変更してしまうことに注意してください。次にキー名をソートした連想配列を格納するsortedMember1を作成します。for文を使ってキー名をsortedMember1に格納していきます。次のコードで並び替えたキー名を記述します。

sortedMember1[key[i]]

memberのキー名と対応する値を参照します。

member1[key[i]]

参照した値を代入します。

sortedMember1[key[i]]= member1[key[i]];

この処理をfor文を使って配列keyの長さの文だけ繰り返します。

この記事のまとめ

本記事ではJavaScriptの連想配列の扱い方について学びました。連想配列の扱いに慣れると、連想配列と同じものであるオブジェクトの扱いにもなれます。JavaScriptではオブジェクトを操作することだ多いので、しっかり復習しましょう。最後にこの記事のまとめです。

• 配列内の要素はpush、unshiftメソッドで追加、pop、shiftメソッドで削除できる
• concatメソッドで配列を連結させることができる
• joinメソッドで配列内の要素を結合させることができる
• 配列をコピーする際にはArray.fromメソッドを使って複製することができる
• 配列はfor、forEach、for~inでループさせることができる
• map、filterメソッドで新たな配列を作ることができる

ぜひ、配列の操作を利用して、JavaScriptをさらに便利に使用しましょう！！