JavaScript（ES6〜）ループと反復処理

while文

while文は、指定した条件true の間、繰り返し処理を実行する制御構文
極力使わない方がよいです。理由は、条件式がfalseになるように処理を書かないと無限ループするからです

let i = 1;

while (i <= 5) { //  iが5以下の間ループ
  console.log(i);
  i++; //  iを1ずつ増やす　もしi++がなかった場合、無限ループします
}

// 出力
// 1
// 2
// 3
// 4
// 5

do-while文

少なくとも1回は処理を実行し、その後条件をチェックしてループを続けるか決めるループ処理の構文
こちらも極力使わない方がよいです。理由は無限ループになる可能性があるからです

let i = 1;

do {
  console.log(i);
  i++;
} while (i <= 5);

// 出力
// 1
// 2
// 3
// 4
// 5

for文

回数が決まっているループ処理を実行するための制御構文
for文よりforEachの方が可読性に優れており、よく使われています

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// 出力
// 1
// 2
// 3
// 4
// 5

配列のforEachメソッド

高階関数で、配列の各要素に対して1回ずつ処理を実行するメソッド
for文よりも可読性に優れており、使われています

const fruits = ["りんご", "バナナ", "ぶどう"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

// 出力
// りんご
// バナナ
// ぶどう

// 高階関数とコールバック関数
const fruits = ["りんご", "バナナ", "ぶどう"];

// コールバック関数
const printFruit = (fruit) => {
  console.log(fruit);
};

// forEach(高階関数)にコールバック関数を渡す
fruits.forEach(printFruit);

// 出力
// りんご
// バナナ
// ぶどう

break文

ループやswitch文を途中で強制終了するための制御文

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // i が 3 のときにループを抜けます
  }
  console.log(i);
}

// 出力
// 0
// 1
// 2

配列のsomeメソッド

配列内の要素が「条件を満たすかどうか」を判定するメソッド
条件を満たす要素が1つでもあればtrueを返し、なければfalseを返します

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

// 配列に3以上の数があるか？
const hasLargeNumber = numbers.some((num) => num >= 3);

console.log(hasLargeNumber); // true

continue文

ループ内で現在の反復（繰り返し）をスキップして、次の反復を開始するための制御文

// i === 3 のとき、continueによって残りの処理がスキップされ、次の繰り返しに進みます
for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue; //  iが3のとき、次のループに進みます
  }
  console.log(i);
}

// 出力
// 0
// 1
// 2
// 4

配列のfilterメソッド

配列の各要素に対して指定した条件を満たす要素だけを抽出して、新しい配列を作成するメソッド
配列の要素を抽出して新しい配列を作りたいときやTodoリストなどに使われます

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

// 偶数だけを抽出
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); //  [2, 4, 6]

for...in文

オブジェクトのプロパティ（キー）や配列のインデックスを反復処理するためのループ構文
極力使わない方がよいです。理由は親オブジェクトまで遡って反復処理可能なプロパティがないか探索するなどの問題があるからです。

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

// オブジェクトのプロパティを反復処理
for (const key in person) {
  console.log(key, person[key]);
}

// 出力
// name Alice
// age 25
// job Engineer

安全にオブジェクトのプロパティを反復処理する方法

• Object.keysメソッド
• Object.valuesメソッド
• Object.entriesメソッド

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

const keys = Object.keys(person);

// 各プロパティ名にアクセスして値を表示
keys.forEach((key) => {
  console.log(key, person[key]);
});

// 出力
// name Alice
// age 25
// job Engineer

for...of文

反復可能なオブジェクト（配列、文字列、マップ、セットなど）の値を反復処理するための構文

const fruits = ["りんご", "バナナ", "ぶどう"];

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

// 出力
// りんご
// バナナ
// ぶどう

const text = "こんにちは";

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

// 出力
// こ
// ん
// に
// ち
// は

まとめ

上記の中でよく使われるものは、forEach、some、filterです。
whileやdo-whileは無限ループの危険性があるため、使うことを極力避けた方が良いです