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

Sahil Bhosale 2021年11月20日
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 機能を実装するプロセス全体です。

著者: Sahil Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

関連記事 - JavaScript Loop