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

JavaScriptで配列内の要素が指定した条件を満たしているか判定する方法

JavaScriptでは、配列内の要素が指定された条件（テスト）を通過しているかどうかを確認するために、主に2つの方法があります。1つは標準のJavaScriptメソッドであるArray.filter()、もう1つはJavaScriptライブラリ「underscore.js」が提供する_.filter()メソッドです。

_.filter()メソッド（underscore.js）

underscore.jsは、JavaScriptの便利なユーティリティ関数を多数提供する人気ライブラリです。その中の_.filter()を使うと、リスト内の要素から条件に合致するものだけを抽出できます。

構文

_.filter( list, conditions );

このメソッドは2つの引数を受け取ります。

  • list：対象となる要素を含む配列
  • conditions：各要素を判定するためのコールバック関数（条件）

使用例

次の例では、_.filter()を使って3の倍数だけを取り出して表示しています。第1引数に配列、第2引数に「3で割り切れるか」を判定する関数を渡しています。

<html>
<body>
<script type="text/javascript" src=
   "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>
<script>
   var arr = [3,4,5,6,9,77,36,42];
   var threeMul = _.filter(arr,
      function(num){
         return num % 3 == 0;
      });
   document.write(threeMul);
</script>
</body>
</html>

実行結果

3,6,9,36,42

配列の中から3の倍数である「3、6、9、36、42」だけが抽出され、新しい配列として返されていることがわかります。

Array.filter()メソッド（標準JavaScript）

Array.filter()は、underscore.jsなどのライブラリに依存しない、標準のJavaScriptメソッドです。コールバック関数で指定したテストに合格した要素のみを集めた新しい配列を返します。元の配列は変更されないため、安全にデータを絞り込むことができます。

使用例

次の例では、給与の配列から20,000より大きい値だけを抽出して表示しています。

<html>
<body>
<p id="filter"></p>
<script>
   var salary = [12000, 13000, 15000, 78000, 43000];
   var specSal = salary.filter(myFunction);
   document.getElementById("filter").innerHTML = specSal;

   function myFunction(value, index, array) {
      return value > 20000;
   }
</script>
</body>
</html>

実行結果

78000,43000

コールバック関数には、現在処理中の値（value）、インデックス（index）、元の配列（array）の3つの引数が渡されます。この例ではvalueだけを使い、20,000を超える要素のみを新しい配列として取得しています。

まとめ

  • 標準のJavaScriptだけで完結させたい場合はArray.filter()を使用するのがおすすめです。
  • すでにプロジェクトでunderscore.jsを利用している場合は、_.filter()でも同様の処理が可能です。
  • どちらのメソッドも元の配列を変更せず、条件に合致する要素だけを含む新しい配列を返します。
  1. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=