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

JavaScriptのArray.filter()メソッドとは?重要性と実用例をわかりやすく解説

Array.filter()メソッドとは

JavaScriptのArray.filter()メソッドは、引数として渡されたテスト関数(コールバック関数)に合格したすべての要素を含む新しい配列を作成するメソッドです。元の配列は一切変更されないため、既存のデータを壊さずに安全に絞り込み処理を行える点が大きな特徴です。

このメソッドが重要視される理由は、主に以下の3点にあります。

  • 宣言的な記述ができる: for文などのループを明示的に書く必要がなく、「どんな条件で抽出したいか」だけをシンプルに表現できます。
  • 元の配列を保持する: 元データが変更されないため、意図しない副作用を防ぎ、バグの発生を抑えられます。
  • 他のメソッドと組み合わせやすい: map()やreduce()などとチェーンして、柔軟なデータ処理パイプラインを構築できます。

それでは、実際のコード例を見ていきましょう。最初の例では、「給与がユーザーが指定した特定の値(19000)以上であるか」というテストを行い、条件を満たす要素だけを新しい配列として取得しています。

例1: 条件値以上の給与を抽出する

<html>
<body>
<p id="filter"></p>
<script>
    var salary = [2000, 30000, 69000, 70000, 78000];
    function checkSal(sal) {
        return sal >= 19000;
    }
    document.getElementById("filter").innerHTML = salary.filter(checkSal);
</script>
</body>
</html>

出力結果

30000,69000,70000,78000

この例では、checkSal関数が配列の各要素に対して「19000以上であるか」を判定し、trueを返した要素だけが新しい配列に残ります。その結果、2000という要素は除外され、残りの4つの要素が出力されています。

例2: 整数配列から正の値だけを取り出す

続いて、負の値やゼロを含む整数の配列から、正の値のみをフィルタリングする例を紹介します。

<html>
<body>
<script>
    var numbers = [2, 3, 4, 5, -9, 0, -2, -5];
    function Positive(value) {
        return value > 0;
    }
    var posnum = numbers.filter(Positive);
    document.write(posnum);
</script>
</body>
</html>

出力結果

2,3,4,5

このように、filter()メソッドを使えば、複雑なループ処理を書かなくても、わずか数行のコードで配列の絞り込みを実現できます。なお、モダンなJavaScriptでは、アロー関数を併用するとさらに簡潔に記述できます。

var posnum = numbers.filter(value => value > 0);

配列から特定の条件に合うデータだけを効率よく取り出したい場面は開発の中で頻繁に登場するため、filter()メソッドの使い方はぜひマスターしておきましょう。

  1. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー

  2. 【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

    非同期関数（async function）とはJavaScriptの非同期関数は、asyncキーワードを付けて定義する特別な関数です。ES2017（ES8）で標準仕様に組み込まれ、従来のコールバック関数よりも簡潔で読みやすい形でPromiseを扱えるようにするために導入されました。async関数の内部ではawaitキーワードを使用できます。awaitを付けた箇所では処理の流れが一時停止し、対象のPromiseが完了（resolveまたはreject）するまで待機します。この仕組みにより、非同期処理をあたかも同期処理のような直感的なコードとして書ける点が最大のメリットです。押さえておきたいポイン