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

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

従来の for ループでは continue 文を使って特定の要素をスキップできますが、関数型プログラミングのスタイルでも同じような処理を行いたい場面があります。そんなときに便利なのが、Array.prototype.some() メソッドです。

some() メソッドは、配列の各要素に対してコールバック関数を順番に実行し、コールバックが true を返した時点で反復を終了します。逆に言えば、false を返し続ける限りループは継続されるため、これを利用することで continue 文のような「要素のスキップ」を実現できます。

実装例

<!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を反復処理してマンゴーとモモをスキップします</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 === "mango" || fruit === "peach") {
                return false;
            }
            resEle.innerHTML += fruit + "<br>";
        });
    });
</script>
</body>
</html>

出力結果

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

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

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

コードのポイント

  • some() は配列の各要素に対してコールバック関数を順番に実行します。
  • コールバックが true を返すと、その時点で反復処理が終了します。
  • 逆に false を返している間はループが継続されるため、従来の continue 文と同じように特定の要素をスキップできます。
  • 本例では「mango」と「peach」の場合に false を返して表示をスキップし、それ以外の果物名を画面へ出力しています。

なお、単純にすべての要素を処理したいだけであれば forEach() や filter() のほうが意図が明確になります。some() を使うのは、「条件を満たす要素が見つかったら早期にループを抜けたい」というケースで特に有効です。用途に応じて適切なメソッドを選択しましょう。


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

    関数型プログラミングにおけるループの中断 従来のforループであればbreak文を使って途中で処理を抜けられますが、forEach()など関数型スタイルの反復処理メソッドにはbreak文を組み込むことができません。そこで役立つのがArray.prototype.some()メソッドです。some()は、コールバック関数がtrueを返した時点で残りの要素の走査を打ち切る仕様のため、これを利用することで実質的にループを中断できます。 サンプルコード 以下は、fruitArr配列を先頭から走査し、「peach」が見つかった時点で反復処理を終了する例です。 <!DOCTYPE html>

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

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