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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

連想配列の基礎

連想配列とは

  • 連想配列は、数値の代わりに意味のある文字列をインデックスとすることで、各要素を識別しやすくすることができます
  • 連想配列の場合、インデックスのことを「キー」と呼びます
連想配列の宣言と初期化
  • 連想配列の要素は、キーと値のセットで1つとして扱われます
  • 全体を囲むのは、カールブラケット{ }になります



var 連想配列名 = { キー1:値1, キー2:値2, キー3:値3, … };

<script>
  var favorites = {
    food : 'カレー',
    color : '青',
    number : 7
  };
</script>

初期化時にシングルクォート(ダブルクォート)で囲むと、全角文字も使えるようになります

<script>
  var favorites = {
    '食べ物' : 'カレー',
    '色' : '青',
    '数字' : 7
  };
</script>
要素の参照
  • 連想配列内の要素を参照するには、ドット「.」またはブラケット[ ]でキーを指定します



連想配列名.キー
または

連想配列名['キー']


上記はどちらも同じ処理をおこないますが、ブラケットを使う場合は、キーを変数に入れて扱うことができます。


《ドットを使った要素の参照》

<script>
  var favorites = {
    food : 'カレー',
    color : '青',
    number : 7
  };
  console.log(favorites.food);
  console.log(favorites.color);
  console.log(favorites.number);
</script>



《ブラケットを使った要素の参照》

<script>
  var favorites = {
    food : 'カレー',
    color : '青',
    number : 7
  };
  console.log(favorites['food']);
  var key = 'food';
  console.log(favorites[key]);
</script>


要素への代入
  • 連想配列も配列と同様に、要素が持つ値を上書きできます
  • 連想配列内に存在しないキーを指定することで、要素を追加できます
<script>
  var favorites = {
    food : 'カレー',
    color : '青',
    number : 7
  };
  favorites.sports = 'サッカー';  //要素が追加される
  console.log(favorites.sports);
</script>

  • 連想配列の初期値はカールブラケット{ }で囲む
  • 連想配列の要素にはキー(要素名)をつける