JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptForループ


ループは、コードのブロックを何度も実行できます。


JavaScriptループ

ループは、同じコードを毎回異なる値で繰り返し実行する場合に便利です。

多くの場合、これは配列を操作する場合に当てはまります。

書く代わりに:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

あなたは書ける:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

さまざまな種類のループ

JavaScriptはさまざまな種類のループをサポートしています。

  • for-コードのブロックを何度もループします
  • for/in-オブジェクトのプロパティをループします
  • for/of-反復可能なオブジェクトの値をループします
  • while-指定された条件が真である間、コードのブロックをループします
  • do/while-また、指定された条件が真である間、コードのブロックをループします

Forループ

ループのfor構文は次のとおりです。

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

ステートメント1は、コードブロックの実行前に(1回)実行されます。

ステートメント2は、コードブロックを実行するための条件を定義します。

ステートメント3は、コードブロックが実行された後に(毎回)実行されます。

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

上記の例から、次のように読むことができます。

ステートメント1は、ループが開始する前に変数を設定します(i = 0とします)。

ステートメント2は、ループを実行するための条件を定義します(iは5未満である必要があります)。

ステートメント3は、ループ内のコードブロックが実行されるたびに値(i ++)を増やします。



ステートメント1

通常、ステートメント1を使用して、ループで使用される変数を初期化します(i = 0とします)。

これは常に当てはまるわけではなく、JavaScriptは気にしません。ステートメント1はオプションです。

ステートメント1(コンマで区切る)で多くの値を開始できます。

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

また、ステートメント1を省略できます(ループが開始する前に値が設定されている場合など)。

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

ステートメント2

多くの場合、ステートメント2は、初期変数の状態を評価するために使用されます。

これは常に当てはまるわけではなく、JavaScriptは気にしません。ステートメント2もオプションです。

ステートメント2がtrueを返す場合、ループは最初からやり直し、falseを返す場合、ループは終了します。

ステートメント2を省略する場合は、ループ内にブレークを指定する必要があります。そうしないと、ループが終了しません。これにより、ブラウザがクラッシュします。このチュートリアルの後の章で休憩について読んでください。


ステートメント3

多くの場合、ステートメント3は初期変数の値をインクリメントします。

これは常に当てはまるわけではなく、JavaScriptは関係なく、ステートメント3はオプションです。

ステートメント3は、負の増分(i--)、正の増分(i = i + 15)、またはその他のことを実行できます。

ステートメント3は省略できます(ループ内で値をインクリメントする場合など)。

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

ループスコープ

varループでの使用:

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

letループでの使用:

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

最初の例では、を使用varして、ループ内で宣言された変数がループ外の変数を再宣言します。

2番目の例では、を使用letして、ループ内で宣言された変数は、ループ外の変数を再宣言しません。

がループ内でi変数を宣言するために使用される場合let、i変数はループ内でのみ表示されます。


For / OfおよびFor / Inループ

for/inループとループについては、次for/of章で説明します。


Whileループ

whileループとは次do/while章で説明します。


エクササイズで自分をテストする

エクササイズ:

0から9まで実行するループを作成します。

let i;
 ( = ;  < ; ) {
  console.log(i);
}