【ES6】JavaScript：for…of文とは？使えないときの対処法

1. const animals = ["猫", "犬", "うさぎ"];
   「animals」という名前の変数を作り、配列[]の中に「猫」「犬」「うさぎ」という要素を入れる。
2. for (const animalhouse of animals)
   変数「animals」の中から1つずつ要素を取り出して、「animalhouse」という変数に入れる繰り返しを始める。
3. console.log(animalhouse);
   変数「animalhouse」の中身をコンソール画面に表示する。

【配列のコード】

const animals = ["猫", "犬", "うさぎ"];

　
【for…of文のコード】

for (const animalhouse of animals) {
  console.log(animalhouse);
}

1. const text = "こんにちは";
   「text」という名前の変数を作り、その中に「こんにちは」という文字列を入れる。
2. for (const a of text)
   変数「text」の中から1つずつ値を取り出して、「a」という変数に入れる繰り返しを始める。
3. console.log(animalhouse);
   変数「a」の中身をコンソール画面に表示する。

const text = "こんにちは";

【for…of文のコード】

for (const a of text) {
  console.log(a);
}

1. const fruits = ["りんご", "スイカ", "もも", "みかん"];
   「animals」という名前の変数を作り、配列[]の中に「りんご」「スイカ」「もも」「みかん」という要素を入れる。
2. for (const basket of fruits)
   配列「fruits」の中から、1つずつ果物を取り出して「basket」という変数に入れる繰り返しを始める。
3. if (basket === "スイカ") continue;
   もし取り出した果物（basket）が「スイカ」だったら、このループの中の処理はスキップして次の果物に進む。
4. console.log(basket);
   変数「basket」の中身をコンソール画面に表示する。

【配列のコード】

const fruits = ["りんご", "スイカ", "もも", "みかん"];

　
【for…of文のコード】

for (const basket of fruits) {
  if (basket === "スイカ") continue;  // スイカはスキップ
  console.log(basket);
}

1. const numbers = [1, 2, 3, 4, 5];
   「numbers」という名前の変数を作り、配列[]の中に「1,2,3,4,5」という数値を入れる。
2. for (const num of numbers)
   配列「numbers」の中から1つずつ数値を取り出して「num」という変数に入れる繰り返しを始める。
3. if (num > 3) break;
   もし取り出した数字が「3より大きい」なら処理を終了する。
4. console.log(num);
   変数「num」の中身をコンソール画面に表示する。

【配列のコード】

const numbers = [1, 2, 3, 4, 5];

　
【for…of文のコード】

for (const num of numbers) {
  if (num > 3) break;
  console.log(num);
}

1. function findFirstBiggerThanThree(numbers)
   「findFirstBiggerThanThree（3より大きい最初の数字を見つける）」という関数を作り、引数として「numbers」という配列を受け取る。
2. for (const num of numbers)
   配列「numbers」の中から1つずつ数値を取り出して「num」という変数に入れる繰り返しを始める。
3. if (num > 3) {return num;}
   「num」が3より大きければ、その数字をすぐに関数の結果として返して終了する。
4. return null;
   もし最後まで3より大きい数字がなければ「null（値がない状態）」を返す。
5. const result = findFirstBiggerThanThree([1, 2, 3, 4, 5]);
console.log(result);
   配列 [1, 2, 3, 4, 5] を関数に渡して最初に3より大きい数字を探して「result」に代入し、結果を表示する。

function findFirstBiggerThanThree(numbers) {
  for (const num of numbers) {
    if (num > 3) {
      return num;  // 3より大きい数字を見つけたら返す
    }
  }
  return null;  // 見つからなければnullを返す
}

【関数のコード】

　
【関数の呼び出しと結果表示のコード】

const result = findFirstBiggerThanThree([1, 2, 3, 4, 5]);
console.log(result);

1. const animals = ["ねこ", "いぬ", "うさぎ"];
   「animals」という名前の変数を作り、配列[]の中に「ねこ」「いぬ」「うさぎ」という要素を入れる。
2. for (const [index, animalhouse] of animals.entries())
   「animals」の中から1つずつ要素を取り出して、そのときの順番（index）と中身（animal）をセットで「index」と「animal」という変数に入れる繰り返しを始める。
3. console.log(`${index}番目は ${animal} です`);
   何番目の動物か（index）と、その動物の名前（animal）を使って「〇番目は △△ です」とコンソール画面に表示する。

【配列のコード】

const animals = ["ねこ", "いぬ", "うさぎ"];

　
【for…of文のコード】

for (const [index, animalhouse] of animals.entries()) {
  console.log(`${index}番目は ${animalhouse} です`);
}

1. const fruits = new Set(["みかん", "もも", "バナナ", "スイカ"]);
   「fruits」という名前の変数を作り、[]の中に「みかん」「もも」「バナナ」「スイカ」という値を入れる。
2. for (const basket of fruits)
   変数「fruits」の中から1つずつ要素を取り出して、「basket」という変数に入れる繰り返しを始める。
3. console.log(basket);
   変数「basket」の中身をコンソール画面に表示する。

【配列のコード】

const fruits = new Set(["みかん", "もも", "バナナ", "スイカ"]);

　
【for…of文のコード】

for (const basket of fruits) {
  console.log(basket);
}

1. const userAges = new Map([]);
   「userAges」という名前の変数を作り、Mapオブジェクト[]の中に「キー,値」を入れる。
2. for (const [name, age] of userAges)
   Mapオブジェクトから1組ずつ「キー」と「値」を取り出して「name」と「age」という変数に入れる。
3. console.log(`${name}さんは${age}歳です`);
   「◯◯（index）さんは◯◯（animal）歳です」とコンソール画面に表示する。

【配列のコード】

const userAges = new Map([
  ["田中", 25],
  ["鈴木", 30],
  ["佐藤", 28]
]);

　
【for…of文のコード】

for (const [name, age] of userAges) {
  console.log(`${name}さんは${age}歳です`);
}

たとえば「見出し」「文章」「画像」「ボタン」「リスト」など、ページ内にあるそれぞれのパーツがDOM要素に当たります。

1. const items = document.querySelectorAll("li");
   HTMLの中からliの要素を抜き出し「items」という変数に保存する。
2. for (const item of items)
   変数「items」の中から1つずつliの要素を取り出して「item」という変数に入れる繰り返し処理。
3. console.log(item.textContent);
   「item」の中にあるテキストのみをコンソール画面に表示する。

【HTML要素の取得するコード】

const items = document.querySelectorAll("li");

　
【for…of文のコード】

for (const item of items) {
  console.log(item.textContent);
}