連想配列｜1から始めるJavaScript#10

どうもRyokutyaです。
今回は連想配列について説明していきます。

連想配列

連想配列は配列と似ていますが格納されたデータの呼び出し方や記述の仕方が少しことなります。
配列と混同しがちなのでしっかり違いを理解していきましょう。

データの格納方法

let 連想配列名={キー名1:値1,キー名2:値2};

変数や配列同様に連想配列の名前を宣言し、{}で囲ってあげることで連想配列を作ることができます。
配列は[]で囲っていましたが{}で囲ってあることに注意してください。
連想配列は配列とは違い、「キー名：値」のように記述します。

let priceList={book:500,pen:100,note:150};

配列と同じように,（カンマ）で区切ることでいくつでもデータを格納することができます。

データの呼び出し方

配列や連想配列はデータを格納するだけでは意味があまりありません。
格納されたデータを好きな時に好きなデータを呼び出すことで真価を発揮します。
それでは連想配列に格納されているデータを実際に呼び出して利用できるようにしましょう。

データ全体を呼び出したい場合は連想配列名を記述することで呼び出すことができます。
連想配列の形式で呼び出されるためあまり使い勝手はよくありません。
どちらかというと個々のデータを個別に使いたい時の方が多いかと思います。
個々の値を呼び出したい時は、
①「連想配列名.キー名」で「キー名」に対応する「値」を呼び出す。
②「連想配列名[‘キー名’]」で対応する「値」を呼び出す。
このどちらかの方法で呼び出すことが可能です。

let priceList={book:500,pen:100,note:150};
cosole.log(priceList);
//{book: 500, pen: 100, note: 150}

console.log(priceLIst.book);//500
console.log(priceLIst.pen);//100
console.log(priceLIst.note);//150

console.log(priceLIst['book']);//500
console.log(priceLIst['pen']);//100
console.log(priceLIst['note']);//150

②の呼び出し方は配列の「配列名[インデックス番号]」でデータを呼び出すの少し似ていますね。
②の呼び出し方を使うときは少し注意が必要で、[‘ キー名’]のようにシングルクォーテーション（ダブルクォーテーションでも可）でキー名を囲ってあげなければエラーになってしまします。（キー名を文字列として記述しなければいけません）

連想配列とオブジェクト

先ほど説明した①のデータの呼び出し方をどこかで見たことはありませんか？
そうです、「オブジェクト」です。
オブジェクト.プロパティと同じ書き方ですね。
それもそのはずでJavaScriptにおいては、連想配列とオブジェクトは同じもです。
他のプログラミング言語では少し意味合いが変わってくるのですがJavaScriptにおいて言えば「連想配列」＝「オブジェクト」です。
オブジェクトについて忘れてしまったひとはHTMLにJavaScriptで変更を加えよう をもう一度読んでください。

「連想配列名」＝「オブジェクト名」、「キー名」＝「プロパティ名」、「値」＝「プロパティ値」ということです。
つまりcosoleオブジェクトやdocumentオブジェクトもいろいろデータが格納された連想配列であるということです。
またオブジェクトは自分でも新たに作成することが可能ということでもあります。

データの書き換え

連想配列（オブジェクト）のデータの書き換えはプロパティに値を代入することで更新できます。

let priceList={book:500,pen:100,note:150};
console.log(priceList.book);//500
priceList.book=250;
console.log(priceList.book);//250

おわりに

今回は連想配列について説明しました。
連想配列＝オブジェクトということを理解していればオブジェクトの値の書き換えや、新しくオブジェクトを作ることができます。
次回は関数について説明していきます！
では、今回はこのあたりで(^^)/