English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 基礎教程

JavaScript オブジェクト

JavaScript 関数

JS HTML DOM

JS ブラウザBOM

AJAX 基礎教程

JavaScript 参考マニュアル

JavaScriptのForループ

ループはプログラミングで繰り返しタスクを自動的に実行するために使用されます。

例えば、"Hello World"を印刷する必要があると仮定すると、 10回実行されます:

  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");
  document.write("Hello World<br>");

ループ内では、この文は一度だけ書かれ、ループが10回、以下のように表示されます:

for (let i = 0; i < 10; i++) {
document.write("Hello World<br>");
}
テストをしてみて‹/›

For ループ

forループの構文は以下の通りです:

for (initialization; condition; final-expression) {
    //実行待ちの文
}

initialization実行文の前に実行(一度)。

condition実行文の実行条件を定義しました。

文の実行後、次に実行されるたびに、final-expression

for (var i = 0; i < 5; i++) {
    document.write("<br>The number is ") + i);
}
テストをしてみて‹/›

上記の例から、以下のように読み取ることができます:

  • initialization ループの前に変数を設定します(変数i = 0)。

  • condition ループの実行条件を定義しました(私は少なくとも5)。

  • ループ内のコードブロックが実行されるたびに、final-expressionがすべて値を増加する(i ++)。

以下の例では、配列を昇順にループで巡回する方法を示します:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = ";"
for (var i = 0; i < fruits.length; i)++) {
    txt += fruits[i] + '<br>';
}
テストをしてみて‹/›

以下の例では、配列を降順にループして巡回します:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = ";"
for (var i = fruits.length -1; i >= 0; i--) {
txt += fruits[i] + '<br>';
}
テストをしてみて‹/›

オプションの式

forループの3つの式はすべてオプションです。例えば、初期化式を省略して、ループ外部で変数を初期化することで、同じFor文を書くことができます。

//ループ外で変数を宣言
var i = 0;
//ループの初期化
for (; i < 5; i++) {
document.write(i);
}
テストをしてみて‹/›

この場合、最初の;は、この文が初期化、条件、最終式を指すことを示し、省略しても必要です。

以下では、ループから条件を削除することもできます。ループをiが3の場合に停止します、これはtrue条件の逆

//ループ外で変数を宣言
var i = 0;
//初期化と条件を省略
for (; ; i++) {
if (i > 3) {
break;
}
document.write(i);
}
テストをしてみて‹/›

注意:break省略するときは、この文を含めなければなりません、さもなければループは無限に繰り返し実行され、ブラウザがクラッシュする可能性があります。

最後に、ループの最後に最終式を配置することで、それを削除できます。2つの分号は必ず含めなければなりません、さもなければループは実行されません。

//ループ外で変数を宣言
var i = 0;
//すべての式を省略
for (; ; ) {
if (i > 3) {
break;
}
document.write(i);
i++;
}
テストをしてみて‹/›

上の例から分かるように、これら3つの文をすべて含むと、最も簡潔で読みやすいコードが生成されます。しかし、省略できることを知っておくことは非常に有用です。

ネストループ

ネストループを使用できます、すなわち、別のループ内でループします。

マトリックス乗法の多くの場所で使用されるネストループ、テーブルの表示や他の多くの場所:

var txt = "";
for (var row = 0; row < 10; row++) {
   for (var col = 0; col < row; col++) {
   txt += "" * ";
   }
   txt += "<br>";
}
テストをしてみて‹/›

For ...inループ

for...inループでオブジェクトの属性を巡回する

例示のために、シンプルなmyObjオブジェクト、いくつかのname:valueはい。

var myObj = {
name: "VISHAL",
age: 22
height: 175
city: "New Delhi",
getNothing: function () { return ""; }
};
for (let x in myObj) {
document.write(x);
}
テストをしてみて‹/›

各反復で、オブジェクトから一つの属性がxこのループは、オブジェクトのすべての属性が尽きるまで続行します。

以下の例では、for...inループを実行し、WebブラウザのNavigatorオブジェクト:

for (let x in navigator) {
document.write(x);
}
テストをしてみて‹/›

For ... Ofループ

for...of文は、組み込みのString、Array、Arrayに似たオブジェクト、ユーザー定義の可反復オブジェクトを含む可反復オブジェクトを反復するループを作成します。

let iterable = [10 20, 30, 40, 50];
for (let x of iterable) {
document.write(x);
}
テストをしてみて‹/›

各反復で、オブジェクトから一つの要素がxこのループは、オブジェクトのすべての要素が尽きるまで続行します。

for...inとfor...ofループが反復するものは何でもありますが、主要な違いは反復する内容です:

  • for...inループは反復するオブジェクトのプロパティの列挙を反復し、任意の順序で

  • for...ofループはデータを反復し、反復するオブジェクトの定義が遍历される

Whileループ

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