JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの関数型プログラミングでループを中断する方法

関数型プログラミングにおけるループの中断

従来のforループであればbreak文を使って途中で処理を抜けられますが、forEach()など関数型スタイルの反復処理メソッドにはbreak文を組み込むことができません。そこで役立つのがArray.prototype.some()メソッドです。some()は、コールバック関数がtrueを返した時点で残りの要素の走査を打ち切る仕様のため、これを利用することで実質的にループを中断できます。

サンプルコード

以下は、fruitArr配列を先頭から走査し、「peach」が見つかった時点で反復処理を終了する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>関数型プログラミングJavaScriptでループを中断する</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックするとfruitArr配列を走査し、「peach」が見つかった時点で終了します</h3>
<script>
    let resEle = document.querySelector(".result");
    let fruitArr = ["apple", "mango", "peach", "papaya", "watermelon"];
    document.querySelector(".Btn").addEventListener("click", () => {
        fruitArr.some(function (fruit) {
            if (fruit === "peach") {
                return true;
            }
            resEle.innerHTML += fruit + "<br>";
        });
    });
</script>
</body>
</html>

実行結果

JavaScriptの関数型プログラミングでループを中断する方法

「ここをクリック」ボタンをクリックすると −

JavaScriptの関数型プログラミングでループを中断する方法

画面には「apple」「mango」までが表示され、「peach」に到達した時点でコールバックがtrueを返すため、その場でループが中断されます。その結果、「papaya」と「watermelon」は処理されずに終わります。

補足：その他のループ中断テクニック

some()と対になる存在としてevery()メソッドがあります。every()はコールバックがfalseを返した時点で反復を終了するため、こちらでも同様の制御が可能です。また、イテレータプロトコルに対応したfor...of文であればbreak文がそのまま使用できるので、可読性を重視したい場合はこちらを選ぶのも有効です。用途に応じて使い分けましょう。

  1. 関数型プログラミングJavaScriptでループを継続する方法｜some()メソッドの使い方

    従来の for ループでは continue 文を使って特定の要素をスキップできますが、関数型プログラミングのスタイルでも同じような処理を行いたい場面があります。そんなときに便利なのが、Array.prototype.some() メソッドです。 some() メソッドは、配列の各要素に対してコールバック関数を順番に実行し、コールバックが true を返した時点で反復を終了します。逆に言えば、false を返し続ける限りループは継続されるため、これを利用することで continue 文のような「要素のスキップ」を実現できます。 実装例 <!DOCTYPE html> <htm

  2. JavaScriptで非同期ループを実装する方法をわかりやすく解説

    JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。以下は、JavaScriptで非同期ループを実装するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="vi