JavaScript 連想配列の仕組みと使い方のサンプル

JavaScriptの連想配列のサンプルです。

連想配列とは
　連想配列を作成する
　連想配列に項目を追加する
　連想配列の項目を更新する
　連想配列の項目を削除する
連想配列の変更を禁止する
連想配列の数を取得する
連想配列をfor文で取得する(for...in文)

連想配列とは

変数 = {キー:値,キー:値・・・ };

1つの変数で複数の「キー」と「値」を保持できます。
キーは任意の文字列を使うことができます。
各項目をプロパティと呼びます。(キーのことをプロパティとも呼びます)
構文は、キーと値を波括弧( { } )でくくります。項目が複数の場合はカンマで区切ります。
連想配列はオブジェクトリテラルまたはハッシュとも呼ばれます。
Object.prototypeを継承します。
配列のarrayオブジェクトを継承していません。
→arrayオブジェクトのメソッドやプロパティは使えません。
以下は、MDNのObject.prototypeのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

連想配列を作成する

連想配列を作成するサンプルです。

<script>

const a = {c1:"赤",c2:"黄",c3:"青"};

console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
console.log(a["c3"]); // 青

</script>

3行目は、連想配列を作成しています。

連想配列に項目を追加する

連想配列に項目を追加するサンプルです。

<script>

const a = {c1:"赤",c2:"黄",c3:"青"};

a["c4"] = "白";

console.log(a);//{c1:"赤",c2:"黄",c3:"青",c4:"白"}

</script>

5行目は、連想配列の最後尾に項目を追加しています。

連想配列の項目を更新する

連想配列の項目を更新するサンプルです。

<script>

const a = {c1:"赤",c2:"黄",c3:"青"};

a["c2"] = "オレンジ";

console.log(a);//{c1:"赤",c2:"オレンジ",c3:"青"}

</script>

5行目は、既にあるキーを指定して値を更新しています。

連想配列の項目を削除する

連想配列に項目を削除するサンプルです。

<script>

const a = {c1:"赤",c2:"黄",c3:"青"};

delete a["c2"];

console.log(a);//{c1: "赤", c3: "青"}

</script>

5行目は、deleteで連想配列の項目を削除しています。

連想配列の変更を禁止する

Object.freeze(obj)

Object.freezeを使用すると連想配列の変更を禁止にできます。

<script>

const a = Object.freeze({c1:'赤',c2:'黄',c3:'青'});

console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
console.log(a["c3"]); // 青

a.c4 = "オレンジ";

console.log(a["c4"]); // undefined
console.log(a);//{c1: "赤", c2: "黄", c3: "青"}

</script>

3行目は、Object.freezeを使用しています。
9行目は、連想配列に新規のキーと値を追加しようとしています。エラーは発生しません。
11行目は、undefinedになっています。
12行目の内容は、3行目と変わっていません。

連想配列の数を取得する

Object.keys(obj)

連想配列の数を取得するサンプルです。

<script>

const c = {c1:'赤',c2:'黄',c3:'青'};

console.log(Object.keys(c).length); // 3

</script>

3行目は、Object.keysメソッドとlengthプロパティを使用して連想配列の数を取得しています。
キーと値あわせて1つと数えます。

以下は、MDNのObject.keysメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

連想配列をfor文で取得する(for...in文)

for (変数 in object) {... }

連想配列をfor文で取得するサンプルです。

<script>

const color1 = {c1:'赤',c2:'黄',c3:'青'};

for(const c in color1 ){
	console.log("キー:"+c); //c1 c2 c3
	console.log("値:"+color1[c]); //赤 黄 青
}
</script>

3行目は、連想配列です。
5～8行目は、for...in文でキーと値を取得しています。
以下は、MDNのfor...in文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in