読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

連想配列の利用

JavaScript

連想配列

  • 配列の場合「0」から始まる添字で要素を指定しましたが意味的な関連性はありません
  • その添字の代わりに、「キー」と呼ばれる文字列で要素を指定します
  • 連想配列は、「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 : '値1', キー2 : '値2', キー3 : '値3', .... }

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

配列とfor文

  • 配列のインデックスをカウンタ変数で指定することで、配列の要素に対して1つずつ順に処理を実行できます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列とfor文</title>
<script>
  var number = [ 10, 20, 30 ];
  for (var i = 0 ; i < number.length ; i++) {
    console.log(number[i]);
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  • number.lengthは、配列numberの要素数を表します
  • よって、for文の継続条件は「i の値が0から3未満まで」になります
  • 配列numberのインデックスは先頭から順に、0、1、2ですから、ちょうどカウンタ変数の値がインデックスと対応します

for-in文

  • 任意の文字列をキーとする連想配列は、通常のfor文では扱うことができません
  • 連想配列の要素を1つずつ処理する場合、for文ではなく「for-in文」を利用します

for(var 変数名 in 連想配列名) {
   連想配列名 [ 変数名 ] とすることで各要素を参照できる
}

  • for-in文は、連想配列の要素数分繰り返しを実行します
  • 繰り返すたびに変数の連想配列のキーのうちいずれか1つが代入されます

for~in文の利用

  • 配列ではすべての要素を順に処理するのにfor文を使用しましたが、連想配列ではその方法は使えません
  • 連想配列の要素数は、lengthプロパティではわからないからです
  • その代わりに「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に代入されます。


連想配列とfor-in文》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>連想配列とfor-in文</title>
<script>
  var favorites = {
    food : 'カレーライス',
    color : '青',
    number : 7
  };
  for (var key in favorites) {
    console.log(key + ' : ' + favorites[key]);
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 連想配列favorites の要素数が3つなので、for-in文の繰り返し回数は3回です
  2. 1回目の繰り返し処理では、変数key の中に「food」が代入されます
  3. 2回目は「color」、3回目は「number」というように、1回分の繰り返しごとにキーが1つずつ取得されます


キーが取得される順番は保証されないため、配列の先頭要素から順序どおりに処理をしたい場合には、for-in文は適しません。

まとめ

  • キーで要素を指定する、連想配列
  • 連想配列は、Objectコンストラクタで生成する
  • 連想配列の要素を順に処理するには、for~in文を使用する
  • 1つのやることリストに関連する追加情報は「オブジェクト」
  • やることリストの各項目は配列
  • 配列とオブジェクトを組み合わせて使う「Ajax