【初級編DAY13】JavaScriptの基本文法を学ぼう③-02,03
【初級編DAY13】JavaScriptの基本文法を学ぼう③-02,03
オブジェクトとくりかえし文について学びます。
■オブジェクトとは■
配列同様に複数のデータを管理する
？配列と何が違うの？
？配列と何が違うの？
配列と似ているが、データの管理方法が違ってくる。
配列：複数のデータをindex番号で管理
アブジェクト：複数のデータをキー（プロパティ）で値を管理する。要素に名前を付けることが可能。
基本記述
変数 変数名 = {
キー名:要素,
キー名:要素,
キー名:要素,
}
例
const scores = {
math:87,
english:90,
science:65,
};
console.log(scores);
// math:87,english:90,science:65,が表示される
変数scoresの中にそれぞれの名前（キー）が付いた要素が格納されたね！
オブジェクト内の一部の要素を取り出す
一部の要素を取り出すには２つの記述方法があります。
基本記述
方法1 console.log(変数名["キー名"]);
方法2 console.log(変数名.キー名);
例
const scores = {
math:87,
english:90,
science:65,
};
console.log(scores["english"]);
console.log(scores.english);
// どちらも90が表示される
方法②の 変数名.キー名での記述がよりスマートだね！
ブジェクト内の一部の要素の書き換え
一部の要素を書き換えにはキー名での指定が可能です。
基本記述
変数名.キー名 = 書き換えの値
例
const scores = {
math:87,
english:90,
science:65,
};
scores.english = 10
console.log(scores);
// math:87,english:10,science:65,が表示される
キーenglisを指定して書き換えを行っている。
配列の中でオブジェクトを管理する
配列の中にオブジェクトを入れることも可能です。
配列ってなんだっけ？の方はコチラ
基本記述
変数 変数名 = [
{キー名：要素,キー名:要素・・・}
{キー名：要素,キー名:要素・・・}
{キー名：要素,キー名:要素・・・}
]
例
const allScores = [
{math:89,english:56,science:48,}
{math:29,english:76,science:58,}
{math:47,english:68,science:85,}
]
console.log(allScores);
// 配列が3つ表示され、その中に各オブジェクトが表示される
配列は[] オブジェクトは{} で記述だったね！これで配列の中にオブジェクトが配置されたよ！
配列内のオブジェクト表示
配列の中にあるオブジェクトを呼び出す際は通常の配列の際と同様になります。
例
const allScores = [
{math:89,english:56,science:48,}
{math:29,english:76,science:58,}
{math:47,english:68,science:85,}
]
console.log(allScores(0));
// math:89,english:56,science:48が表示される
配列内のオブジェクト内さらに一部の要素を取り出す
配列＞オブジェクト＞要素 となっている中で一部の要素を取り出します。
例
const allScores = [
{math:89,english:56,science:48,}
{math:29,english:76,science:58,}
{math:47,english:68,science:85,}
]
console.log(allScores(1).english);
// index番号1の中のenglishなので76が表示される
オブジェクト内で関数を使用する
キーと値以外にも値以外のもの（文字列、ブーリアン、function関数）が使用可能。
また、functionで関数を使用した際などでは、同一のオブジェクト内のキーを呼び出し使用することが可能。その際は ${this.キー名} で指定をする。
基本記述
変数 変数名 ={
キー名:要素,
キー名:要素,
キー名:要素,
キー名:function(){
// 処理を記述
// 同じオブジェクト内のキーを使用する際は
${this.キー名}で呼び出すことが可能
}
};
例
const scores = {
math:87,
english:90,
science:65,
englishMessage:function(){
console.log(`英語の点数は${this.english}点です`);
}
};
// function内でキー名englishを読み込み使用がされる。
scores.englishMessage();
// 出力結果 英語の点数は90点です
// 変数scores＞キー名englishMessageが選択されたことで
functionが呼び出される
※今回functionは無名関数
注意
オブジェクト呼び出しの際にはメソッドの後に();を忘れないよう注意
※メソッドとは オブジェクトがプロパティ（キー、要素）として持っている関数を指します。（今回で言えばenglishMessage）
オブジェクトの解説は以上となります。配列とオブジェクトの違いを理解していきましょう！
次は繰り返し処理について学んでいきます。
繰り返し【for文】
下記のようにいくつかの配列データがあったとき、その一つ一つのデータを呼び出すとなると以下のような長いコードが必要となってきます。
console.log(prefectures[0]);
console.log(prefectures[1]);
console.log(prefectures[2]);
console.log(prefectures[3]);
console.log(prefectures[4]);
...
...
以下省略
これをすべてに書くのは大変ですよね。
その際に使用するのが繰り返し（for文）となります。
■for文とは■
くりかえし処理を行える構文。
for文にはいろいろな方法があります。
下記には【for・・・of】【カウントを使用したfor文】【forEach】の３つを紹介します。
①for・・・of文
基本記述
for (let 変数 of 配列){
// 処理内容
}
例
console.log(prefecture);
}
配列(prefectures)から変数(prefecture)に値をひとつずつ取り出して、コンソールログに表示させています。
コンソール画面には47都道府県が表示され、コードはこの3行の文で完結してしました。
②カウントを使用した繰り返し処理【for】
基本記述
for (初期化式; 条件式; 変化式){
// 処理
}
例
for (let i = 0; i < prefectures.length; i++) {
console.log(prefectures[i]);
}
■解説■
・初期化式 let i = 0;
配列のindex番号をカウントするための変数を i とする。
i は 0 から始まるためiに0を入れ、変数を初期化している。
※iが使われるのはindexの略と言われている。
・条件式 i < prefectures.length;
iが変数prefecturesの要素数length（この例でいうと47）が下回るうちは処理を行うという条件を指定している。
・変化式 i++
{}の処理が終わったらiに1をプラスする、という指定をしている。
上記のことから、下記処理の流れとなる。
1.変数iの宣言・変数iを０へ初期化
2.iが0であるため変数prefecturesの要素数length＝47を下回るため、{}の処理を行う。（console.log(prefectures[i]);iが0の為index番号0の北海道がコンソール画面へ表示される）
3.処理が終わったら 変数i にプラス１となり 変数i=1となる。
4.iが1となった。変数prefecturesの要素数length＝47を下回るため、{}の処理を行う。（console.log(prefectures[i]);iが0の為index番号0の北海道がコンソール画面へ表示される）
5.3以降 変数1 が48になるまで繰りかえされる。
③【forEach】
■foeEachとは■
配列に含まれる要素を先頭から順番に取り出し、記述したコールバック関数に沿って処理をします。forEachメソッドは配列がもっているメソッドです。
基本記述
配列.forEach(function※コールバック関数(変数){
// 処理
});
例
console.log(prefecture);
});
■解説■
1.配列prefecturesの先頭から順に取り出します。（北海道）
2.forEachでコールバック関数を呼び出します。
3.取り出した要素が変数prefectureに格納され処理が実行される。
4.１に戻る。配列が終わるまで。
このように何度も繰り返しする処理に対してはfor文を使ってみましょう。
※変数(prefecture)の名前について
特にルールはありませんが、配列の名前を複数形（～s）とし、変数は単数形にするのが分かり易いね！
繰り返しのメソッドはよく使いそうな予感・・・
記号や構文が多くなってきて難しそうですが、一つ一つ理解を進めていきましょう！
