このページでは通常のfor文の解説をしています。
for文と構文が似ている、 for...in文、 for...of文、 ArrayオブジェクトのforEachメソッドについては各リンク先ページで解説しているのでそちらを参照してください。

for文

このページでは豊富な例を用いてJavaScript（js）のfor文の使い方を学ぶことができます。

for文はループ処理を実現するためのJavaScriptの構文です。

forキーワードに続けて()（丸括弧）に;（セミコロン）区切りで3つの引数を指定し、その後に1回のループ処理中に行う処理を記述します。
指定する3つの引数の指定方法、continue文やbreak文の組み合わせにより複雑な条件下でのループ処理を実行することができます。

// 記述例

for (初期化式; 条件式; 更新式) {
  // 1回のループ中に行う処理
}

出典：for文 - MDN web docs

TL;DR

基本

// 3回ループさせる処理
for (let i = 0; i < 3; i++) {
  console.log(i);
}
==> 0
==> 1
==> 2




// 配列を先頭から順番に処理する
const array1 = ['js', 'javascript', 'typescript'];
for (let i = 0; i < array1.length; i++) {
  console.log(array1[i]);
}
==> js
==> javascript
==> typescript




// 配列を末尾から処理する
const array2 = ['js', 'javascript', 'typescript'];
for (let i = array2.length - 1; i >= 0; i--) {
  console.log(array2[i]);
}
==> typescript
==> javascript
==> js




// 無限ループ（計算機に負荷を与えるので実行環境に気をつけてください）
for (let i = 0; true; i++) {
  console.log(i);
}
------------------------------
0
1
...
無限ループ
------------------------------




// {}（波括弧）の省略
const array3 = [];
for (let i = 0; i < 3; i++) array3.push(i);
console.log(array3);
==> [ 0, 1, 2 ]

ループ処理をスキップする（continue）

// iが偶数のときの処理をスキップする
for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}
==> 1
==> 3
==> 5




// continue文の前に処理を置くこともできます
const array1 = [];
for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) {
    array1.push(i);
    continue;
  }
  console.log(i);
}
==> 1
==> 3
==> 5
console.log(array1);
==> [ 0, 2, 4 ]





// ageが20以上のオブジェクトのみ表示する
const array2 = [{ name: 'Olivia', age: 18 }, { name: 'Alex', age: 20 }, { name: 'Joshua', age: 40 }];
for (let i = 0; i < array2.length; i++) {
  if (array2[i].age < 20) {
    continue;
  }
  console.log(array2[i]);
}
==> { name: 'Alex', age: 20 }
==> { name: 'Joshua', age: 40 }

ループ処理を中断する（break）

// iが3以上になったらループ処理を終了する
for (let i = 0; i < 10; i++) {
  if (i >= 3) {
    break;
  }
  console.log(i);
}
==> 0
==> 1
==> 2




// sumが30以上になったら処理を終了する
let sum = 0;
for (let i = 0; true; i++) {
  sum += i;
  if (sum >= 30) {
    console.log(i);
    break;
  }
}
==> 8
console.log(sum);
==> 36

複数の変数宣言

// ,（カンマ）区切りで複数の変数を宣言できる
for (let i = 0, j = 1; j < 4; i++, j++) {
  console.log(`i=${i}, j=${j}`);
}
==> i=0, j=1
==> i=1, j=2
==> i=2, j=3




// 条件式に複数の変数を使用する
for (
  let i = 0, j = 5;
  i < 3 && j > 3;
  i++, j--
) {
  console.log(`i=${i}, j=${j}`);
}
==> i=0, j=5
==> i=1, j=4

for文の引数の省略

// for文の（）（丸括弧）内の引数は省略できる

// 無限ループの場合
for (; ;) {
  console.log('js');
}
------------------------------
js
js
...
無限ループ
------------------------------

解説

// 記述例

for (初期化式; 条件式; 更新式) {
  // 1回のループ中に行う処理
}

出典：for文 - MDN web docs

基本

for文を用いることでループ処理を実現することができます。

forの後に使用する()（丸括弧）内に、「初期化式」、「条件式」、「更新式」をセミコロン区切りで順番に記述します。

初期化式

「ループ処理が始まる前」に1度だけ評価され、ループのカウンターに使用する変数などを宣言します。

条件式

初期化式が評価された後、「ループの各処理前」に評価され、trueが返される場合のみ記述した処理が行われます。falseが返された場合はそのfor文を終了します。
条件式によっては無限ループが発生することがあります。無限ループは計算機に多大な負荷をかけるので実行に気をつけてください。

更新式

「ループの各処理後」に評価される式です。つまり、次の条件式の評価前に実行され、初期化式で宣言した変数の更新などを行います。

// 3回ループの処理
for (let i = 0; i < 3; i++) {
  console.log(i);
}
==> 0
==> 1
==> 2




// 配列の処理.1
const array1 = ['JS', 'JavaScript'];
for (let i = 0; i < array1.length; i++) {
  console.log(array1[i]);
}
==> JS
==> JavaScript




// 配列の処理.2（末尾からの処理）
const array2 = [{ name: 'Josh' }, { name: 'Alex' }];
for (let i = array2.length - 1; i >= 0; i--) {
  console.log(array2[i].name);
}
==> Alex
==> Josh




// 無限ループ
for (let i = 0; i > 0; i++) {
  console.log(i);
}
------------------------------
0
1
...
無限ループ
------------------------------




// {}（波括弧）の省略
const string1 = 'js';
for (let i = 0; i < string1.length; i++) console.log(string1[i]);
==> j
==> s

ループ処理をスキップする（continue）

continue文をfor文内で使用することで処理をスキップさせることができます。

for文内でcontinue文が評価されると、continue文から更新式（for文の第3引数）まで処理が移動し、continue文以降の処理は実行されなくなります。

// iが5以下の場合は処理をスキップ
for (let i = 0; i < 10; i++) {
  if (i <= 5) {
    continue;
  }
  console.log(i);
}
==> 6
==> 7
==> 8
==> 9




// scoreが80以上のオブジェクトのみの配列を生成する
const array1 = [
  { subject: 'math', score: 85 },
  { subject: 'science', score: 100 },
  { subject: 'literature', score: 68 }
];
const filteredArray1 = [];
for (let i = 0; i < array1.length; i++) {
  if (array1[i].score < 80) continue;
  filteredArray1.push(array1[i]);
}
console.log(filteredArray1);
==> [ { subject: 'math', score: 85 }, { subject: 'science', score: 100 } ]

ループ処理を中断する（break）

break文をfor文内で使用することで対象のfor文自体の処理を中断し、for文以降の処理に制御を移動させることができます。

for文内でbreak文が評価されると、直ちに対象のfor文の処理を終了します。それ以降のfor文で行われるはずであった処理はすべて行われません。

// iが2以上になったらループ処理を終了する
for (let i = 0; i < 10; i++) {
  if (i >= 2) {
    break;
  }
  console.log(i);
}
==> 0
==> 1




// 'js'という文字列が出てきたら処理を終了する
const array1 = ['apple', 'banana', 'js', 'kiwi'];
for (let i = 0; i < array1.length; i++) {
  if (array1[i] === 'js') {
    break;
  }
  console.log(array1[i]);
}
==> apple
==> banana

複数の変数宣言

for文の引数に複数の変数を宣言することもできます。
複数の変数を宣言する場合は,（カンマ）でそれぞれの変数を区切ってください。

// ,（カンマ）区切りで複数の変数を宣言
for (let i = 0, j = 1; i < 3; i++, j++) {
  console.log(`i=${i}, j=${j}`);
}
==> i=0, j=1
==> i=1, j=2
==> i=2, j=3




// 条件式に複数の変数を使用
for (
  let i = 0, j = 5;
  i + j < 10;
  i++, j++
) {
  console.log(`i=${i}, j=${j}`);
}
==> i=0, j=5
==> i=1, j=6
==> i=2, j=7

for文の引数の省略

for文では引数を省略することができます。
引数の区切りに使用する;（セミコロン）は省略できません。

// 無限ループ（3つの引数を省略）
for (; ;) {
  console.log('js');
}
------------------------------
js
js
...
無限ループ
------------------------------

1次情報

for - MDN web docs

ループと反復処理 - MDN web docs

continue - MDN web docs

break - MDN web docs