1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】反復処理① ループ文

Posted at

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

  • 反復処理についての理解を深める

#本題
###1.ループ文

####for文

基本構文.
for (初期化式; 条件式; 変化式){
  実行する文1;
  実行する文2;
  ...
}

Javaと一緒??

参照

// ①初期値を設定
// ②条件式 → どうなったらループ抜ける?
// ③変化式 → 1ループごとにどうやって値が変化するか
for(let i = 0; i < 10; i = i + 1){
  // 0から9まで出力される
  console.log(i);
}

####while文

基本構文.
while (条件式){
  実行する文1;
  実行する文2;
  ...
}

参照

// ()内にループを継続する条件を書く
// 例1
while(false){
  // 出力されない
  console.log("Hi!")
}
// 例②
// 初期化
let i = 0;
// 条件式
while(i < 10){
  console.log(i);
  // 変化式(省略形)
  i++;
}

###2.ループ文とブロックスコープ

####例1

基本構造

// ループ分を定義
for(let i = 0; i < 5; i++) {
  const j = i * 2
  // 2,4,6,8と出力される
  console.log(j)
}
// constは再代入も再宣言もブロックスコープが1ループ毎に切り替わっていないと何度も呼び出されてエラーになるはず
// しかし、そうならないのは1ループ毎にブロックスコープが切り替わっているから

####例2

setTimeoutを用いた場合

// ループ分を定義
for(let i = 0; i < 5; i++) {
  const j = i * 2
  // 2秒後に出力される
  setTimeout(function(){
    console.log(j)
  }, 2000)
}

上記例の変数定義をvarを用いたらどうなるのか

// ループ分を定義
for(let i = 0; i < 5; i++) {
  var j = i * 2
  setTimeout(function(){
    console.log(j)
  }, 2000)
}
// 8が5回出力される
// varはブロックスコープを透過するのでループの外で定義しているのと変わりないから
// 下記でも同じ結果

var b;
for(let a = 0; a < 5; a++) {
  b = a * 2
  setTimeout(function(){
    console.log(j)
  }, 2000)
}

###3.ループ文と配列

####例1

for文で配列を1つずつ出力するには

// 配列を定義
const arry = [1, 2, 3, 4, 5];

// for文を使用
// arry.lengthで配列の要素数を表す => 5こ
for(i = 0; i < arry.length; i++){
  // arryの[i]番目を出力する(1,2,....)
  console.log(arry[i]);
}

####例2

while文だとどのように記述するか

// 配列を定義
const arry = [1, 2, 3, 4, 5];

// while文を使用
// 自分の回答
// let i = 0;

while(i < arry.length){
  console.log(arry[i]);
  i++;
}

// vもiも初期値0
let v, i = 0;
// 後方インクリメントなのでiに値が渡ってきたら+1する
// 0番目の値は1 v = 1で1が出力される
// 値がtrueであればループ継続
while(v = arry[i++]){
  // arry[5]は6だが配列表記にないので、undefined = falseとなるのでループから抜け出せる
  console.log(v);
}

今日はここまで!

#参考にさせて頂いた記事

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?