HOWTO · JavaScript
JavaScript の例外を使用して forEach ループを終了する
このチュートリアルでは、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つの段落タグがあり、その id は errorMsg です。この段落タグは、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 機能を実装するプロセス全体です。