JavaScript の例外を使用して forEach ループを終了する

JavaScript プログラミング言語にはさまざまな for ループのバリエーションが付属していますが、他のプログラミング言語とは異なり、初期化、条件、インクリメントまたはデクリメントの 3つで構成される従来の for ループしか表示されません。従来の for ループを機能させるには、これら 3つの要素に従う必要があります。特にプログラミングに不慣れな場合は、かなり混乱するように思われるかもしれません。

JavaScript は、for ループを記述する新しい方法を提供してくれました。それが forEach ループです。forEach ループは、配列を反復処理するために使用されます。多くの開発者は、従来の for ループよりも forEach ループを使用して配列を反復処理することを好みます。これは、記述がはるかに簡単で、読みやすいためです。

for ループまたは while ループのいずれかのループは、break ステートメントを使用して終了できます。forEach ループを使用して配列を反復処理する場合の唯一の欠点は、break キーワードを使用して配列を終了できないことです。プログラムの実行中に特定の条件(true または false)が成立したときに、forEach ループを終了したい場合があります。したがって、そのために、例外処理を使用できます。

JavaScript の try...catch ブロックを使用して forEach ループを終了する

array.forEach ループ内の break ステートメントによって提供される機能を実現するために、JavaScript で使用可能な例外処理の概念を使用できます。例外処理は、プログラムの実行中にエラーが発生した場合の異常状態の処理と、不要なプログラムのクラッシュの回避に他なりません。これは、try...catch ブロックの助けを借りて行われます。

try ブロックは、すべてのコードを記述する場所です。また、catch ブロックには、例外を処理するために使用されるコードが含まれます。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p id="errorMsg"></p>

    <script>
        var arr = [1, 2, 3, 4, 5]
        try {
        arr.forEach((element)=> {
            if (element === 4) throw "number is equal to four";
            console.log(element);
        });
        } 
        catch (e) {
            errorMsg = document.getElementById('errorMsg');
            errorMsg.innerHTML = "Error: " + e + ".";
        }
    </script>
</body>
</html>

出力:

// The below output will be printed on the screen.
Error: number is equal to four.

// The below output will be printed inside the web browser console
1
2
3

これは HTML5 ドキュメントです。<body> タグ内。1つの段落タグがあり、その iderrorMsg です。この段落タグは、JavaScript プログラムによってスローされるエラーメッセージを表示するために使用されます。

<script> タグの中に、実際のプログラムがあります。ここでは、最初に、1 から 5 までの要素を含む arr という配列を宣言しました。ここでの主な目標は、forEach ループを使用してこの配列を反復処理し、arr 配列内の要素 4に到達した時点でループを解除することです。

try ブロックでは、forEach ループを使用してこの配列を反復処理します。このループ内で、無名関数(矢印関数とも呼ばれます)を渡しました。その関数内には、配列内の特定の位置にある要素が 4 であるかどうかを確認するための if ステートメントがあります。4 でない場合は、その要素を Web ブラウザのコンソールに出力します。それ以外の場合は、number is equal to four という例外がスローされます。

try ブロックによってスローされたこの例外は、catch ブロックによってキャッチされ、変数 e 内に格納されます。これで、innerHTML と呼ばれる HTML プロパティを使用して、p タグ内の変数 e 内に存在するエラーメッセージを表示できます。これは、JavaScript で配列を反復処理しながら、forEach ループ内に break 機能を実装するプロセス全体です。

関連記事 - JavaScript Loop

  • JavaScript のネストされたループ
  • JavaScript 配列を反復処理する