はじめに
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
// ２秒後に出力される
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);
}
今日はここまで！