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

JavaScriptのfilter()メソッドとは？配列から条件に合う要素を抽出する方法

JavaScriptのfilter()メソッドは、配列の各要素に対して指定した関数（テスト関数）を実行し、その条件を満たす要素だけを集めた新しい配列を作成するメソッドです。元の配列は変更されないため、安全にデータの絞り込みを行えます。

filter()メソッドのパラメータ

  • callback：配列の各要素をテストするための関数。この関数が true を返した要素のみが、新しい配列に含まれます。
  • thisObject：callback を実行する際に this として使用するオブジェクト（省略可能）。

以下のコード例では、10以上の値だけを新しい配列として取り出しています。実際にブラウザで実行して、filter()メソッドの動作を確認してみましょう。

サンプルコード

<html>
   <head>
      <title>JavaScript Array filter Method</title>
   </head>
   
   <body>
      <script>
         if (!Array.prototype.filter) {
            Array.prototype.filter = function(fun /*, thisp*/) {
               var len = this.length;

               if (typeof fun != "function")
               throw new TypeError();

               var res = new Array();
               var thisp = arguments[1];

               for (var i = 0; i < len; i++) {
                  if (i in this) {
                  var val = this[i]; // in case fun mutates this
                  if (fun.call(thisp, val, i, this))
                  res.push(val);
                  }
               }
               return res;
            };
         }
         function isBigEnough(element, index, array) {
            return (element >= 10);
         }

         var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
         document.write("Filtered Value : " + filtered );
      </script>
   </body>
   
</html>

実行結果

Filtered Value : 12,130,44

この例では、isBigEnough 関数が「要素が10以上かどうか」を判定しています。[12, 5, 8, 130, 44] のうち条件を満たすのは 12、130、44 の3つなので、これらが新しい配列として返されます。

なお、上記コード内の Array.prototype.filter の定義は、古いブラウザなど filter() メソッドが実装されていない環境向けのポリフィルです。モダンブラウザでは標準で filter() が利用できるため、通常はこの部分を省略して直接使用できます。

  1. JavaScriptの_.union()メソッドとは？配列の重複を除去して結合する使い方を解説

    _.union()メソッドの基本_.union()は、JavaScriptの便利なライブラリであるunderscore.jsに用意されているメソッドです。この関数は、複数の配列を受け取り、それらすべてに含まれる要素を統合したうえで、重複のない新しい配列（いわゆる「和集合」）を返します。各配列の値をすべて精査し、ユニークな値だけを新しい配列へと取り込んでくれるため、データの整理や重複排除の処理を簡潔に記述できるのが大きな魅力です。構文_.union( array1, array2, .... );引数として渡せる配列の数に制限はなく、2つでも3つでも、必要な数だけ指定できます。使用例：数値配列の

  2. JavaScriptの_.size()メソッドとは？配列のサイズを取得する方法を解説

    _.size()メソッドとは_.size()は、JavaScriptの定番ユーティリティライブラリであるunderscore.jsに用意されている関数です。主に配列の要素数（サイズ）を取得するために使われます。このメソッドを使用する前に、underscore.jsのCDNをページに読み込んでおく必要がある点に注意してください。構文_.size(array);例1：通常の配列の場合次の例では、数値を格納した通常の配列を_.size()メソッドに渡し、配列のサイズを取得しています。<html> <body> <head> <script src =