JavaScriptのfor文・while文とdo_while文、繰り返し処理を理解する

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのfor文・while文とdo_while文、繰り返し処理について解説していきます。

1 JavaScriptのfor文・while文とdo_while文、繰り返し処理を理解する
2 関連記事
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 最近の投稿

JavaScriptのfor文・while文とdo_while文、繰り返し処理を理解する

繰り返し処理の基本的な考え方とポイント

条件文が、trueの間はブロック内の処理が実行され続ける(Loop処理)
条件文が、falseになると処理は終了する(Loopから抜ける)
処理ブロックなどに、条件文をfalseにするロジックがないと無限ループになる。
break(処理を強制終了)や continue(処理のスキップ) を Loop-処理中に使用できる。

for文

for文は、for (初期値; 繰り返し条件; 増減設定) { 繰り返し、実行する処理 } という形で定義します。

1番のポイントは、繰り返し条件がtrueの間は、{} 内の処理は実行され続ける(Loop処理する)点です。

// ポイント①: 繰り返し条件が、trueの間は、実行され続ける！
// ポイント②: break や continue を、Loop-処理中に使用できる！

for (初期値; 繰り返し条件; 増減設定) { 
  繰り返し、実行する処理 
}

次のfor文は、配列の要素数から、Indexの配列を作成するLoop処理です。

const itemList = ['りんご', 'ぶどう', 'もも', 'パイナップル', 'みかん', 'マスカット', '梨'];

// 配列の要素数から、Indexの配列を作成する
let idxList = [];
for (let i = 0; i < itemList.length; i++ ) {
  idxList.push(i);
}
console.log('idxList', idxList);
// idxList (7) [0, 1, 2, 3, 4, 5, 6]

for文の中で、for文やforEachのような繰り返し処理を実行することもできます。

const itemList = ['りんご', 'ぶどう', 'もも', 'パイナップル', 'みかん', 'マスカット', '梨'];

// 好きな商品List
const likeList = ['みかん', 'マスカット'];

for (let i = 0; i < itemList.length; i++ ) {
  likeList.forEach(like => {
    if (itemList[i] === like) {
      console.log(`${like}は、好きなフルーツ！`);
    }
  });
}
// みかんは、好きなフルーツ！
// マスカットは、好きなフルーツ！

break(処理を強制終了)や continue(処理のスキップ) を Loop-処理中に使用できるのも、for文やwhile分のポイントです。

const itemList = ['りんご', 'ぶどう', 'もも', 'パイナップル', 'みかん', 'マスカット', '梨'];

// 探している商品
let discoverItem = 'もも';
let discoverFlag = false;

for (let i = 0; i < itemList.length; i++ ) {
  if (discoverFlag) break; // 発見してあったら、Loop-処理終了
  if (itemList[i] === discoverItem) {
    console.log(`探していた商品は、${itemList[i]}です！`);
    discoverFlag = true;
  }
}
// 探していた商品は、ももです！

while文

while文は、while(条件文) { 繰り返し、実行する処理 } という形のシンプルなLoop処理機構です。

const itemList = ['りんご', 'ぶどう', 'もも', 'パイナップル', 'みかん', 'マスカット', '梨'];

let idxList2 = [];
let counter = 0
while (counter < itemList.length) {
  idxList2.push(counter);
  counter ++;
}
console.log('idxList2', idxList2);
// idxList2 (7) [0, 1, 2, 3, 4, 5, 6]

do_while文

do_while文は、do { 繰り返し、実行する処理 } while(条件文) という形で定義します。

do_while文のwhile文との違いは、処理が必ず1回は実行される点です。

let int = 5;
let loopFlag = true;

// 1. doブロックに、実行したい処理を記述する。
do {
  if (int % 5 === 0) {
    loopFlag = false;
  } else {
    int++;
    console.log(int);
  }
// 2. while(条件文)がtrueの間は、doブロックの処理が繰り返し実行される。 
} while (loopFlag);
console.log(int);