JavaScript 連想配列のサンプル |

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

連想配列
連想配列の変更を禁止する
連想配列の数を取得する
連想配列をループで処理する(for...in文)

連想配列

変数 = {プロパティ名(キー):値,プロパティ名(キー):値・・・ };

構文は、プロパティ名(キー)と値を波括弧( { } )でくくります。複数の場合はカンマで区切ります。
連想配列はオブジェクトリテラルまたはハッシュとも呼ばれます。
１つ１つのデータは、プロパティと呼びます。(配列では要素です)
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"]); // 青

a.c4 = "白";

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

a["c5"] = "黒";

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

</script>

3行目は、連想配列を作成しています。
5-7行目は、ブラケット構文でキーを指定して値を表示しています。
9行目は、ドット演算子で新規のキーと値を追加しています。
14行目は、ブラケット構文で新規のキーと値を追加しています。

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

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行目と変わっていません。

連想配列の数を取得する

連想配列の数は、lengthプロパティとObject.keysメソッドを使用して取得します。

<script>
const a = {c1:'赤'};
console.log(Object.keys(a).length); // 1

const b = {c1:'赤',c2:'黄'};
console.log(Object.keys(b).length); // 2

const c = {c1:'赤',c2:'黄',c3:'青'};
console.log(Object.keys(c).length); // 3

</script>

キーと値あわせて1つと数えます。

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

連想配列をループで処理する(for...in文)

for...in文で連想配列のキーと値を取得します。

<script>
const colors2 = {c1:'赤',c2:'黄',c3:'青'};

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

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