初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript 連想配列

連想配列

連想配列は、数値の代わりに任意の文字列をインデックスにすることで、各要素を区別しやすくすることができます
連想配列の場合、インデックスのことを【キー】と呼びます
全体の囲み方は、配列とは異なり【カールブラケット{ }】になります

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

 

<script>
 var favorites = {
  animal: '猫',
  sports : 'サッカー',
  music: 'ロック'
};
</script>

初期化の際に,シングルクォート('␣')で囲むと、全角文字も使用できます

<script>
 var favorites = {
  '動物': '猫',
  'スポーツ' : 'サッカー',
  '音楽': 'ロック'
};
</script>

要素の参照

連想配列内の要素を参照するには、ドット「.」か、ブラケット[ ]でキーを明記します

・ドットを使用した要素の参照

<script>
  var favorites = {
   animal : '猫',
   sports : 'サッカー',
   music : 'ロック'
};
console.log(favorites.animal);
console.log(favorites.sports);
console.log(favorites.music);
</script>

f:id:bellsmarket:20150206010848p:plain
f:id:bellsmarket:20150206010852p:plain

・ブラケットを使用した要素の参照

<script>
  var favorites = {
   animal : '猫',
   sports : 'サッカー',
   music : 'ロック'
};
console.log(favorites['animal']);
var key = 'animal';
console.log(favorites[key]);
console.log(favorites['sports']);
console.log(favorites['music']);
</script>

f:id:bellsmarket:20150206011218p:plain

要素への代入

連想配列も配列と同様に、要素が保持する値の上書きが可能です
連想配列内に定義していないキーを指定することで、要素を追加できます

<script>
 var favorites = {
  animal: '猫',
  sports : 'サッカー',
  music: 'ロック'
};
favorites.color = '紫'; //要素が追加される
console.log(favorites.color);
</script>

f:id:bellsmarket:20150206011351p:plain

topへ戻る