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

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

仕組み	連想配列とは
サンプル	初期化して作成 / 空の連想配列を作成 / new Objectで作成
	for文で取得(for...in文)
	項目を追加 / 項目を更新 / 項目を削除
	キーの昇順にソート / 項目をコピー
	連想配列の変更を禁止する(Object.freeze)
	連想配列の数を取得する(Object.keys+length)
	配列に連想配列をセット

連想配列とは

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

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>

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

空の連想配列を作成

<script>
  const a = {};
  a["c1"] = "赤";
  a["c2"] = "黄";
  console.log(a["c1"]); // 赤
  console.log(a["c2"]); // 黄
</script>

2行目で空の連想配列を作成し、3,4行目で値をセットしています。

new Objectで作成

<script>
  const a = new Object();
  a["c1"] = "赤";
  a["c2"] = "黄";
  console.log(a["c1"]); // 赤
  console.log(a["c2"]); // 黄
</script>

for文で取得(for...in文)

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

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

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

2行目は、連想配列です。
4行目は、for...in文でキーと値を取得しています。

項目を追加

<script>
  const a = { c1: "赤", c2: "青" };
  a["c3"] = "白";
  a.c4 = "黒";
  console.log(a);//{c1: "赤", c2: "青", c3: "白", c4: "黒"}
</script>

追加は、存在しないキーを指定し値を代入します。
キーの指定はブラケットまたはドットを使用します。

項目を更新

<script>
  const a = { c1: "赤", c2: "黄", c3: "青" };
  a["c2"] = "オレンジ";
  a.c3 = "white";
  console.log(a); //{c1: "赤", c2: "オレンジ", c3: "white"}
</script>

更新は、既にあるキーを指定し値を代入します。

項目を削除

<script>
  const a = { c1: "赤", c2: "黄", c3: "青" };
  delete a["c2"];
  delete a.c3;
  console.log(a); //{c1: "赤"}
</script>

削除は、deleteを使用します。

キーの昇順にソート

<script>
  const color1 = { c3: "青", c1: "赤", c2: "黄" };
  
  const k1 = Object.keys(color1);
  k1.sort();

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

4行目は、Object.keysで連想配列のキーを取得しています。
5行目は、sortで昇順にソートしています。

項目をコピー

Object.assign(コピー先オブジェクト,コピー元オブジェクト)

Object.assignは、連想配列(オブジェクト)をコピーします。
コピー元とコピー先に同じキーがある場合は、値が上書きされます。

<script>
  const a = { c1: "赤", c2: "青" };
  const b = { c2: "A", c4: "B" };

  const c = Object.assign(a, b);

  console.log(c); //{c1: "赤", c2: "A", c4: "B"}
</script>

連想配列bから連想配列aにコピーされます。
キーのc2は連想配列bの値で上書きされます。

連想配列の変更を禁止する(Object.freeze)

Object.freeze(obj)

Object.freezeは、連想配列の変更を禁止します。

<script>
  const a = Object.freeze({ c1: "赤", c2: "黄", c3: "青" });

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

  a.c4 = "オレンジ";

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

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

連想配列の数を取得する(Object.keys+length)

Object.keysとlengthで連想配列の数を取得します。

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

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

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

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

配列に連想配列をセット

配列に連想配列をセットするサンプルです。

<script>
  const color1 = [
    { c1: "赤", c2: "青" },
    { c1: "赤", c2: "青" },
    { c3: "白", c4: "黒" },
  ];
  color1.forEach((c2) => {
    Object.keys(c2).forEach((key) => {
      console.log(key); //c1 c2 c1 c2 c3 c4
      console.log(c2[key]); //赤 青 赤 青 白 黒
    });
  });
</script>

2,6行目の[ ]は配列です。
3行目からの{}は連想配列です。