JS 例題）オブジェクトを要素に持つ配列の説明

■問題

定数「animals」を使って「いぬ4才・ひつじ10才・ねこ5才」を定義

それぞれ「名前は〇〇です」「〇〇歳です」となるように出力する

■回答

①定数　animals　を定義

　　いぬ4才・ひつじ10才・ねこ5才

const animals = [
  {name: "いぬ", age: 4},
  {name: "ひつじ", age: 10},
  {name: "ねこ", age: 5},
];

②変数の定義

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

【条件式】変数iの値がcharactersの要素数より小さい

　　　　　※lengthで要素数を取得

 【変数の更新】変数iに1を加える

for ( let i=0; i<animals .length; i++) ｛ 処理 ｝

③定数　character　を定義

characters配列を複数回使用するので、一度定数に代入して使い回せるようにする

  const animal = animals [i];  

「charactersのインデックス番号がiの要素」

→ characters[i] これを定数characterに代入

定数　character　を定義し、charactersのインデックス番号がiの要素を代入

charactersには配列が代入されており、

for文内でその1つずつの要素を順にcharacterに代入していく

＊繰り返されるたびにスコープが変わるのでfor文の中でconstを使うことができる

このあたり、いまいち理解が・・・

とりあえず今は、そうなのか・・・くらいでおいておく

④「名前は〇〇です」となるように出力

〇〇の部分は定数characterのnameプロパティに対応する値で設定

＜誤り＞

console.log("名前は"+animals [i].name+"です");

→  const animal = animals [i];　で　

　　animal　を定義しているのでanimalsではない

＜正解＞

console.log("名前は"+animal.name+"です");
もしくは 

 console.log(`名前は${animal.name}です`);  

⑤「〇〇歳です」となるように出力

〇〇の部分は定数characterのageプロパティに対応する値で設定

＜正解＞

console.log(animal.age+"歳です");

もしくは

console.log(`${animal.age}歳です`);  

⑥組み合わせて完成

const animals = [  

　{name: "いぬ", age: 4},  

　{name: "ひつじ", age: 10},
   {name: "ねこ", age: 5},
  ];

for ( let i=0; i<animals .length; i++) 

｛   const animal = animals [i];  

      console.log(`名前は${animal.name}です`);  

      console.log(`${animal.age}歳です`);  ｝