はじめに

JavaScriptを絶対身につけるをテーマに学習していこうと思います。『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』を参考に記事を書いています。

chapter03 配列を学ぼう

05 連想配列とは？

配列の問題点

以下のコードは受験者の一覧を出力する例ですが、受験者名の配列に新井太郎さんを書き忘れてしまいました。

//受験番号と受験者名の配列
let id= [20224,20031,20193];
let meibo = ["井上次郎","山本花子"]; //書き忘れた！
//受験者の一覧を出力
console.log(id[0] + meibo[0]); //20224:井上次郎
console.log(id[1] + meibo[1]);　//20031:山本花子

本当はmeibo[0]に新井太郎さんが入っているはずなのに、書き忘れたために要素番号がずれてmeibo[0]が井上次郎さんになり受験者の一覧がおかしくなっています

//20224:井上次郎
//20031:山本花子

受験番号と受験者名はセットで管理されるべきデータです。しかし、上のコードは受験番号名と受験者名が別々の配列になっているので、どちらかの配列が変わると順番が合わなくなってしまいます。

連想配列

JavaScriptには連想配列という特別な配列の書き方が用意されています。

連想配列は、配列要素を入れる箱に名前付きの鍵をかけた形になります

普通の配列との大きな違いは、meibo[“20031”]のように鍵の名前を指定して中身が取り出せる点です。鍵の名前があっていればよいので、配列要素が何番目に入っているかを気にする必要がありません。

連想配列という名前は、鍵の名前からデータの中身を連想できる配列から来ています。

連想配列ではなくオブジェクト

JavaScriptでは「連想配列」は使いません。他のプログラミング言語で言う連想配列のことを、JavaScriptではオブジェクトといいます。

『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』では「連想配列」で解説されていますが、JavaScriptでは「オブジェクト」、他の言語では「連想配列」と呼びますので、同じようなもの（keyとvalueのセット）と覚えておいてください。

オブジェクトの宣言と初期化

鍵の部分を“キー”と呼び、キーに対応するデータのことを値(value,あたい)と呼びます。このキーと値のセットをプロパティと呼びます。オブジェクトを宣言するには、キーと値を半角コロンでつなげたものを半角カンマで区切って書き並べ、全体を{}(オブジェクトリテラル)で囲みます。

let 変数名 = {キー:値, キー:値, キー:値};

オブジェクトの中身（配列要素）を取り出そう

キーを指定して取り出す

オブジェクトの中に入っているデータを取り出すには次のように書きます。

変数名["キー"]

オブジェクト（meib）の値(受験者名)をキー（受験番号）で取り出して、consoleに表示させてみよう。

let meibo ={
 20224 : "新井太郎",
 20031 : "井上次郎",
 20193 : "山本花子",
}
console.log("20031:" + meibo["20031"]); //受験者の20031の受験者名出力

20031:井上次郎

と出力されたら成功です。

オブジェクトの要素を取り出すとき、meibo[“20031”]のようにキーの両端に””で囲むことに注意しましょう。meibo[20031]にすると要素番号(添字)を意味します。

オブジェクトの中身(配列要素)を書き換える