オブジェクトを要素に持つ配列

今回は、オブジェクトを要素に持つ配列を見ていきましょう。

配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができます。その特性により、左の図のような配列を作ることができます。
その際、コードが横に長くなることを防ぐために、右の図のように要素ごとに改行することがよくありますので、覚えておきましょう。

配列の中のオブジェクトを取り出す

配列の要素には、先頭からインデックス番号が割り振られていることを思い出してください。
図のような配列では、配列の値がオブジェクトなので、配列[インデックス番号]で対応するオブジェクトを取得することができます。

配列の中のオブジェクトの値を取り出す

さらに、配列の中のオブジェクトのプロパティの値を取り出すには、「配列[インデックス番号].プロパティ名」と書きます。
やや複雑になってきましたが、分からない箇所はしつこく復習しましょう。

例題

すでに定数charactersには、オブジェクトを要素とする配列が代入されているので、 それぞれの要素をコンソールに出力してみましょう。

qiita.js

const characters = [ small - image

  {name: "cat", age: 14},
  
  {name: "turtle", age: 1000}
  
];

// charactersの1つ目の要素をコンソールに出力してください

// charactersの2つ目の要素の「name」に対応する値をコンソールに出⼒してください

配列と繰り返し処理

今回学習した「オブジェクトを要素に持つ配列」と「繰り返し処理」を、例題を使って復習しましょう。
下の図のように、キャラクターの情報（名前・年齢）を順に出力します。

例題

for文を用いて、条件式( )の中は、以下の条件のもと作成してください。

【変数の定義】
・変数iを定義し、0を代入

【条件式】
・「変数iの値がcharactersの要素数より小さい」という条件式をlengthを用いて追加

【変数の更新】
・変数iに1を加える
・定数characterを定義し、charactersのインデックス番号がiの要素を代入する
・「名前は〇〇です」と出力する（〇〇はcharacterのnameプロパティの値）
・「〇〇歳です」と出力する（〇〇はcharacterのageプロパティの値）

qiita.js

const characters = [

  {name: "cat", age: 14},
  
  {name: "turtle", age: 100},
  
  {name: "dog", age: 5},
  
];

// for文を完成させてください

for (;;) {

  console.log("--------------------");

  // 定数characterを定義してください

  // 「名前は〇〇です」を出力してください

  // 「〇〇歳です」を出力してください

}