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

for...of文

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

for...of文は反復可能オブジェクトのプロパティの値に対してループ処理を実行します。

構文が似ている for...in文が「オブジェクトのプロパティ」に対して処理を実行するのに対し、 for...of文は「反復可能オブジェクトのプロパティの値（配列の要素など）」に対して処理を実行する点に注意してください。

// 記述例

for (const プロパティの値が代入される変数 of 反復可能オブジェクト) {
  // 1回のループ中に行う処理
}

出典：for...of文 - MDN web docs

TL;DR

基本

// 反復可能オブジェクトの「プロパティの値」に対してループ処理を実行する
const array1 = ['js', 'JavaScript', 'TypeScript'];
for (const value of array1) {
  console.log(value);
}
==> js
==> JavaScript
==> TypeScript





// Stringオブジェクトの場合
const string1 = 'Foo';
for (const value of string1) {
  console.log(value);
}
==> F
==> o
==> o






// ジェネレーターの場合
function* myGenerator() {
  let count = 0;
  while (true) {
    yield count++;
  }
}

for (const value of myGenerator()) {
  console.log(value);
  if (value >= 3) {
    break;
  }
}
==> 0
==> 1
==> 2
==> 3






// 反復可能オブジェクトでないものは指定できない
const object1 = { name: 'Alice' };
for (const value of object1) {
  console.log(value);
}
==> TypeError: object1 is not iterable

for...in文との違い

// 配列の場合
const array1 = ['Foo', 'Bar'];
array1.ninja = 'Ninja';
// for...of文
for (const e of array1) {
  console.log(e);
}
==> Foo
==> Bar

// for...in文
for (const e in array1) {
  console.log(e);
}
==> 0
==> 1
==> ninja






// 文字列の場合
const string1 = 'JS';
// for...of文
for (const e of string1) {
  console.log(e);
}
==> J
==> S

// for...in文
for (const e in string1) {
  console.log(e);
}
==> 0
==> 1






// オブジェクトの場合
const object1 = { 0: 'A', 1: 'B' };
// for...of文
for (const e of object1) {
  console.log(e);
}
==> TypeError: object1 is not iterable

// for...in文
for (const e in object1) {
  console.log(e);
}
==> 0
==> 1

解説

// 記述例

for (const プロパティの値が代入される変数 of 反復可能オブジェクト) {
  // 1回のループ中に行う処理
}

出典：for...of文 - MDN web docs

基本

for...of文は反復可能オブジェクトの各プロパティの値に対して反復処理を行います。
これは、Arrayオブジェクト（配列）であれば要素（インデックスではない）に、 Stringオブジェクト（文字列）であれば文字列を構成する文字1つ1つに対して反復処理を行うということです。

反復処理を行う値の処理は「オブジェクトに定義された順序」で行います。

// Arrayオブジェクト（配列）
const array1 = [100, 200, 300];
for (const val of array1) {
  console.log(val);
}
==> 100
==> 200
==> 300





// Stringオブジェクト（文字列）
const string1 = 'Bar';
for (const val of string1) {
  console.log(val);
}
==> B
==> a
==> r






// ジェネレーターの場合
function* myGenerator() {
  let count = 0;
  while (true) {
    yield count++;
  }
}

for (const val of myGenerator()) {
  console.log(val);
  if (val === 2) {
    break;
  }
}
==> 0
==> 1
==> 2






// 反復可能オブジェクトでない場合
const obj1 = { 0: 'js', 1: 'javascript' };
for (const val of obj1) {
  console.log(val);
}
==> TypeError: obj1 is not iterable

for...in文との違い

for...of文と構文が似ている for...in文があります。
下記にそれぞれの構文の特徴を記したので、違いに気をつけて使用してください。

for...of文

「反復可能なオブジェクト」の「プロパティの値」に対して「定義された順序」で処理を実行する。

for...in文

「オブジェクト」の「列挙可能な文字列型のプロパティ」に対して「任意の順序」で処理を実行する。

// 文字列の場合
const string1 = 'Bar';
// for...of文
for (const e of string1) {
  console.log(e);
}
==> B
==> a
==> r

// for...in文
for (const e in string1) {
  console.log(e);
}
==> 0
==> 1
==> 2






// 配列の場合
const array1 = [true, false];
array1.fooBarNinja = 'FooBarNinja';
// for...of文
for (const e of array1) {
  console.log(e);
}
==> true
==> false

// for...in文
for (const e in array1) {
  console.log(e);
}
==> 0
==> 1
==> fooBarNinja






// オブジェクトの場合
const object1 = { 0: false, 1: true };
// for...of文
for (const e of object1) {
  console.log(e);
}
==> TypeError: object1 is not iterable

// for...in文
for (const e in object1) {
  console.log(e);
}
==> 0
==> 1

1次情報

for...of - MDN web docs

反復可能(iterable)プロトコル - MDN web docs

for...of文 - ループと反復処理 - MDN web docs

for...ofとfor...inとの違い - MDN web docs