JavaScript で forEach ループを続行する

このチュートリアルでは、JavaScript で forEach ループを続行する方法を説明します。

JavaScript で forEach ループを続行する

forEach ループは、配列内のすべての項目に対してカスタム コールバック関数を実行する JavaScript 配列メソッドです。 forEach ループを利用できるのは配列だけです。

forEach ループの例から始めましょう:

5 から 10 個の数値を含む数値配列があるとします。 forEach ループを使用してどのように値を出力しますか?

以下のデモを参照してください。

const numb = [5, 6, 7, 8, 9, 10];

numb.forEach((num) => {
  console.log(num);
});

実行コード

出力：

5,6,7,8,9,10

何か他のことをしたいとします。 numb 配列内の偶数のアイテムをスキップしたい。 これをどのように達成しますか？

そのループで、continue を追加します。 ただし、forEach ループで continue を使用すると問題が発生します。

問題から始めましょう：

const numb = [5, 6, 7, 8, 9, 10]

numb.forEach(num => {
  if (num % 2 === 0) {
    continue;
  }
})

実行コード

出力：

Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

ご覧のとおり、JavaScript forEach ループ内の continue ステートメントは Uncaught SyntaxError を引き起こします。 したがって、return ステートメントの方が優れた代替手段です。

forEach ループはループというよりも関数のように動作するため、構文エラーが発生しました。 それがあなたがそれを実行し続けることができない理由です。

ただし、forEach ループで continue を使用する必要がある場合は、オプションがあります。 forEach ループを終了するには、return を使用できます。

以下のコードを見てください。

const numb = [5, 6, 7, 8, 9, 10];

numb.forEach((num) => {
  if (num % 2 === 0) {
    return;
  }
  console.log(num);
});

実行コード

出力：

5,7,9

return を使用して必要な出力を取得することもできますが、より効率的な方法があります。 filter() 関数を使用して、不要な値を簡単に削除できます。

例：

const numb = [5, 6, 7, 8, 9, 10];

numb.filter((num) => num % 2 !== 0).forEach((num) => {
  console.log(num);
});

出力：

5,7,9

まとめ

この記事を締めくくるには、forEach ループ内で直接 continue ステートメントを使用することはできません。 代わりに、return ステートメントが理想的なソリューションです。

return ステートメントを使用できない場合は、forEach ループを for または while ループに置き換えて、continue ステートメントを使用する必要があります。