簡単!JavaScript for文の基礎が即わかる!breakとcontinueの違いとは?

web開発

2017/06/19

web開発

プログラミング言語JavaScriptのfor文について、Web開発経験のある筆者が初心者向けに丁寧に解説します。

初心者向けの記事ですので、JavaScript for文について丁寧に解説しています。

本記事を読めば、JavaScript for文の書き方・使い方(基本と配列)、breakとcontinueの違いについて理解できるでしょう。

ぜひ最後まで読んで、JavaScript for文の基本を理解してください!

JavaScript forの書き方

プログラムの処理で、同じ処理を繰り返したい時があります。今回解説するfor文では、そのような処理を書くときに有用です。

For 文を書くときの書式は次の通りです。

[]に囲まれた文はオプションで、記載なしでも動作します。for(;;) と記載し無限ループとして処理させることも可能です。

For文が実際にする処理する流れを見てみましょう。

①:カウンター用変数の初期化処理

②:条件式の評価

③:処理文

④:カウンター用変数の更新

⑤2の条件式処理に移動。条件式の評価が「正」の間ループが行われる。「誤」になった場合はfor文を終了する。

次の項で実際に簡単なfor文を書いてみましょう。

 

JavaScript for文を実際に使ってみよう(基本)

簡単なサンプルソースコード1を用意しました、0〜10を順番に出力する例です。

For文の流れ

①初期化処理:ループ制御に使う「変数i」が「0」で初期化される

②条件式の評価:iが10以下の間はループを実施、現在iは「0」である

③処理を実施:変数iに1を足して変数iを更新する

④更新式を実施:変数iに1を足して変数iを更新する

⑤2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。

 

JavaScript for文を実際に使ってみよう(配列)

次に、配列に入った情報をfor文で処理するループを考えてみましょう。

サンプルソースコード2は、配列arrに含まれるデータを順番に取り出す例です。

※配列には,lengthプロパティがあります。定義した配列に.lengthをつけることによって現在の配列の長さ「配列インデックスの最大値+1」が取得できます。

配列の長さ(length)=配列に含まれる要素の個数と覚えてしまう方もいますが、実際は要素の個数ではなく「配列のインデックス最大値+1」です。

for文の流れ

①初期化処理:ループ制御に使う「変数i」が「0」で初期化される

②条件式の評価:iが配列の長さ(3)以下の間はループを実施、現在iは「0」である

③処理を実施:console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力

④更新式を実施:変数iに1を足して変数iを更新する

⑤2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。

 

JavaScript for文におけるbreak

for文を使用しているとループ処理の途中で処理を抜けたいといったケースがでてきます。そのようなケースでは「break」を使用します。

では、実際にサンプルソースコードを見てみましょう。

for文の流れ

①初期化処理:ループ制御に使う「変数i」が「0」で初期化される

②条件式の評価:iが配列の長さ(10)以下の間はループを実施、現在iは「0」である

③if処理を実施:指定配列のデータが5より大きい値のときbreakしfor文を強制終了

④処理を実施:console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力

⑤更新式を実施:変数iに1を足して変数iを更新する

⑥2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。

 

JavaScript for文におけるcontinue

先程の「break」文では、ループを途中で終了したいときに使いました。次は特定の周回の処理のみをスキップする場合に使える「continue」について解説します。

For文の流れ

①初期化処理:ループ制御に使う「変数i」が「0」で初期化される

②条件式の評価:iが配列の長さ(10)以下の間はループを実施、現在iは「0」である

③if処理を実施:指定配列のデータが5と7の時4の処理をスキップする。

④処理を実施:console.log(arr[i]);で、コンソール画面上に配列arrのデータを出力

⑤更新式を実施:変数iに1を足して変数iを更新する

⑥2の条件式処理に移動し、条件式の評価が「正」の間ループが行われる。「誤」になった場合終了する。

先程、勉強したbreak文では③の処理時にfor文自体を強制的に抜けました。

今回のcontinue文ではfor文のループ自体は抜けず、for文内のcontinue文以降の処理をスキップする処理になります。

 

「break」と「continue」の使い分けのポイント

break→break文を実施するとループ処理ブロックから抜ける。

continue→continue文を実施すると、以降の処理をスキップ。ループ処理は継続的に行われる。

break文とcontinue文の違いについては、きちんと理解し使いこなして行きましょう。

 

いかがでしたか?JavaScript for文の基礎が理解できましたか?

for文は文法の基礎ですので、必ず理解しておきましょう。

udemyでは、初心者にも学習しやすいJavaScriptの講座を用意しています。

ぜひ受講して、JavaScriptをマスターしてみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事