デイトラWeb制作 Day14～15 JavaScript基本文法　Object

引き続きJavaScriptの基礎を学びます。
let 変数 of 配列 が、なかなか私の中に定着しないところ。

オブジェクトとは

配列と同様に複数のデータを扱うことができる。
配列と違うところは、キー（プロパティ）を使ってデータを管理すること。そのため、何を表すデータなのかが理解しやすくなる。

const scores = {
  math: 87,　//数学のスコアだよ　
  english: 90,　//英語のスコアだよ
  science: 65, //サイエンスのスコアだよ
};

個別のデータを取り出す方法2つ

//英語のスコアをコンソールに表示

console.log(scores["english"]; //方法その1

console.log(scores.english);  //方法その2　こちらの方が記述量が少なくおすすめ

値の書き換え

scores.english = 10;

配列の中でデータを管理する方法

const allScores = [ //配列なので大かっこ
  {math: 87, english: 90, science: 65},
  {math: 50, english: 75, science: 49},
  {math: 76, english: 58, science: 100},
]

console.log(allScores); 

コンソールに表示

配列の中から個別のデータを取り出す方法

console.log(allScores[0]);

1番目のデータをコンソールに表示

console.log(allScores[1].english);

2番目のenglishのデータをコンソールに表示

オブジェクトの中に関数を定義する

const scores = {
  math: 87,
  english: 90,
  science: 65,
  englishMessage: function () {
    console.log(`英語の点数は${this.english}点です`);
  }
};

scores.englishMessage();

オブジェクトの中に定義した関数を呼び出す

this を使った方法がよく使われる。
呼び出す際には.メソッドの後に() を忘れないように注意！

繰り返し処理

for文

for(let 変数 of 配列)
配列からひとつづつ値を取り出す。

const prefectures = ["北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"];


for (let prefecture of prefectures) { //let 変数 of 配列
  console.log(prefecture);
  //都道府県名をコンソールに出力する
}

沖縄県まで、順番にコンソールに表示される。

カウントを使ったfor文

配列の要素数を超えるまで繰り返す。

for (let i = 0 ; i < prefectures.length; i++) {　//配列の要素数を超えるまで繰り返す。
  console.log(prefectures[i]);
}

結果は上と同様。

forEach

for(let 変数 of 配列)　と似たような処理。
配列からひとつづつ値を取り出す。

prefectures.forEach(function (prefecture){
  console.log(prefecture);
});

結果は同様。

あとがき

わかった気になっていて、急に書いてと言われるとできなかったりする。
たくさん書いて慣れていきます。