連想配列の利用

連想配列

  • 配列の場合「０」から始まる添字で要素を指定しましたが意味的な関連性はありません
  • その添字の代わりに、「キー」と呼ばれる文字列で要素を指定します
  • 連想配列は、「Objectオブジェクト」というオブジェクトとして扱います
連想配列の生成
  • new演算子とObjectコンストラクタで生成します
<script>
var members = new Object();
</script>
  • Arrayコンストラクタで生成します
<script>
var colors = new Array();
</script>

※連想配列では、lengthプロパティの値には意味がありません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>連想配列</title>
</head>
<body>
<script>
var colors = new Object();
colors['white'] = '白色';
colors['red'] = '赤色';
colors['green'] = '緑色';
colors['yellow'] = '黄色';
  document.write('<h2>', colors['red'], '</h2>');
</script>
</body>
</html>
連想配列名（キー）として要素を指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>連想配列</title>
</head>
<body>
<script>
var colors = new Object();
colors['white'] = '白色';
colors['red'] = '赤色';
colors['green'] = '緑色';
colors['yellow'] = '黄色';

for (var eigo in colors){
  document.write('<h2>', eigo + ' ' + colors[eigo] , '</h2>');
}
</script>
</body>
</html>
リテラルによる連想配列の生成


{キー1 : '値１', キー２ : '値２', キー３ : '値３', .... }

<script>
var colors = {white:'白色', red:'赤色', green:'緑色', yellow:'&#40643;色'};
</script>
キーをプロパティとして使用する
<script>
colors[ 'yellow' ] = '黄色';
</script>
  • プロパティ形式で要素にアクセス
<script>
colors.yellow = '&#40643;色';
</script>

for〜in文の利用

  • 配列ではすべての要素を順に処理するのにfor文を使用しましたが、連想配列ではその方法は使えません
  • 連想配列の要素数は、lengthプロパティではわからないからです
  • その代わりに「for〜in文」という連想配列のすべてのキーに順にアクセスする文字を使います



for（変数　in　連想配列）{
　処理
}


「for〜in文」では、連想配列のすべてのキーが順番に変数に格納されていきます。

<script>
var colors = new Object();
colors['white'] = '白色';
colors['red'] = '赤色';
colors['green'] = '緑色';
colors['yellow'] = '黄色';

for (var eigo in colors){
  document.write('<h2>', eigo + ' ' + colors[eigo] , '</h2>');
}
</script>
  • eigo：キーが順に変数に代入される
  • colors：連想配列を指定


この場合、連想配列colorsのキーである「white」「red」「green」「yellow」が、順に変数eigoに代入されます。


まとめ

  • キーで要素を指定する、連想配列
  • 連想配列は、Objectコンストラクタで生成する
  • 連想配列の要素を順に処理するには、for〜in文を使用する