配列と連想配列の要素を取得する方法[JavaScript]

JavaScriptの配列と連想配列の取得方法について簡単にまとめました。

配列

・変数名[配列番号]

let fruit = ['りんご', 'みかん', 'バナナ'];

console.log(food[0]); // りんご
console.log(food[1]); // みかん
console.log(food[2]); // バナナ

配列の中の配列(多次元配列)

・変数名[配列番号][配列番号]

let foods = [
   ['りんご', 'みかん', 'バナナ'],
   ['にんじん', 'ピーマン', 'なす'],
   ['牛肉','豚肉','鶏肉']
];

console.log(foods[0][0]); // りんご
console.log(foods[1][0]); // にんじん
console.log(foods[2][0]); // 牛肉

配列の中の連想配列

・変数名[配列番号].key
 または
・変数名[配列番号][key]

let color = [
   {
     'red'    : 'りんご',
     'orange' : 'みかん',
     'yellow' : 'バナナ'
   },
   {
     'orange' : 'にんじん',
     'green'  : 'ピーマン',
     'purple' : 'なす'    
   }
];

console.log(color[0].red);      // りんご
console.log(color[0]['red']);   // りんご
console.log(color[1].green);    // ピーマン
console.log(color[1]['green']); // ピーマン

連想配列

・変数名.key
 または
・変数名[key]

let color = {
  'red'    : 'りんご',
  'orange' : 'みかん',
  'yellow' : 'バナナ'
};

console.log(color.red);        // りんご
console.log(color['red']);     // りんご
console.log(color.orange);     // みかん
console.log(color['orange']);  // みかん

連想配列の中の配列

・変数名.key[配列番号]
 または
・変数名[key][配列番号]

let foods_group = {
  fruit      : ['りんご', 'みかん', 'バナナ'],
  vegetables : ['にんじん', 'ピーマン', 'なす'],
  meat       : ['牛肉','豚肉','鶏肉']
};

console.log(foods_group.fruit[0]);    // りんご
console.log(foods_group['fruit'][0]); // りんご
console.log(foods_group.meat[2]);     // 鶏肉
console.log(foods_group['meat'][2]);  // 鶏肉

連想配列の中の連想配列

・変数名.key.key
 または
・変数名[key][key]

let foods_color = {
  fruit: {
    'red'    : 'りんご',
    'orange' : 'みかん',
    'yellow' : 'バナナ'    
  },
  vegetables: {
    'orange' : 'にんじん',
    'green'  : 'ピーマン',
    'purple' : 'なす'
  },
  meat: {
    'red': '牛肉',
    'red': '豚肉',
    'red': '鶏肉',
  }
};

console.log(foods_color.fruit.red);             // りんご
console.log(foods_color.fruit['red']);          // りんご
console.log(foods_color.vegetables.purple);     // なす
console.log(foods_color.vegetables['purple']);  // なす