JavaScript 基本の学び 記録

JavaScriptの基本を学んだので記録用
Progate2周目での情報整理です

【while】　繰り返し処理

条件式がtrueの間、{ }を繰り返す

例　numberを1〜100まで表示するwhile文

//numberの中身は1を定義①
let number = 1;

while(number <= 100){  //numberの数値を比較しtrueかを判別②
  console.log(number);  //出力
  number += 1;  //numberに1を足す③
}

結果

1
2
3
：
：
98
99
100

【for】繰り返し処理

while文をシンプルにした文

上記のwhile文①〜③を1行で指示できる

例

for(①; ②; ③){
  console.log(number);
}

数値をいれると

for(let number = 1; number <= 100; number++){
  console.log(number);
}

これで上記と同じ出力になる

【if＋for】

応用例：3の倍数なら「3の倍数です」を出力、それ以外は「number」の数値を出力する

for(let number = 1; number <= 100; number++) {
  if(number % 3 === 0){
    console.log("3の倍数です");
  }else{
    console.log(number);
  }
}

【配列】定数に情報を入れておける

配列を出力する場合

const number = ["1です","2です","3です"];
console.log(number);

結果

[ '1です', '2です', '3です' ]

「☆」配列の中身だけを取り出す場合
中身の番号を指示すればOK、配列の番号は0からカウントするため

number = [[0], [1], [2]];

となる

なので配列の1つ目の要素を出力する場合は

console.log(number[0]);

結果

1です

配列の3つ目の要素を出力する場合は

console.log(number[2]);

結果

3です

また以下で配列の中身を変更できる

number[1] = "②です";
console.log(number[1]);

結果

②です

ただ配列内すべてのデータを表示させるには

console.log(number[0]);
console.log(number[1]);
console.log(number[2]);

の指示が必要

もし配列内すべてのデータの数が100以上あったら、100個の指示をしなければいけません(つらい)

そこでfor文を使う

const number = ["1です","②です","3です"];

for(let i =0; i < 3; i ++){
  console.log(number[i]);
}

結果

1です
②です
3です

ちなみに僕は、ここで「このiはいったい…？」となりました。

結論からいうと、iは数値の条件のときに一般的に用いられているだけ。実際にはどんな名前でもOKらしい。なぜならただの変数名だから。

ぶっちゃけ「a」「z」でも問題ないみたいです(結局、無難なのは「i」なのでオリジナルに変えないほうがいいみたいだけど)。

もし、「いやいや、(number[i])ってなんなの？」と思ったら
上記にあった謎の「☆」とfor分を思い出してください

for(let i =0; i < 3; i ++){
  console.log(i);
}

これは「まずiに0をいれて、3以下になるまで繰り返す、iに＋1する」という条件で「console.log(i)」するfor文で、実行すると以下の結果になる

結果

0
1
2

「☆」で覚えた配列の中身を取り出す方法を思い出し、

console.log(number[i]);

この[i]の中に0．1．2が入ることで

console.log(number[0]);
console.log(number[1]);
console.log(number[2]);

となり、以下の結果になるわけですね

結果

1です
②です
3です

配列の中身の数がわからない場合「配列名.length」で中身の数値を取得できる

const number = ["1です","②です","3です","4です","5です"];
console.log(number.length);

結果

5

【オブジェクト】プロパティ名をつけた配列

配列の場合、複数の値を並べて、[]内で管理

配列名 = [値1,値2,値3,値4]

プロジェクトの場合、プロパティ名と値で1つのプロパティとし、{}内で管理
プロジェクト名 ={プロパティ名1:値1,プロパティ名1:値2}
(「プロパティ名1:値1」←これで1つのプロパティ)

オブジェクトの中身を取り出す場合、プロジェクト.プロパティ名で取り出せる
たとえば、

const number = {abc:111, def:222, ghi:333};
console.log(number.def);

222

またプロパティの中身は以下で変更可能

number.def = 000;
console.log(number.def);

結果

000

そしてなんとオブジェクトの値としてオブジェクトを持てる

例

const number = {
 abc:111,
 def:222,
 ghi:{
     jkl:444, 
     mno:555, 
     pqr:666
     }
};

もし「222」を出力したいなら

console.log(number.def);

「666」を出力したいなら

console.log(number.ghi.pqr);

といった指示になる