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

【JavaScript】_.where()メソッドで特定の条件に一致するすべての要素を取得する方法

JavaScriptには数多くのフレームワークやユーティリティライブラリが存在しますが、その中でもunderscore.jsは軽量かつ高機能なライブラリとして広く使われています。underscore.jsが提供する便利な関数のひとつが_.where()で、これを使うと配列の中から特定の条件に一致する要素を簡単に見つけ出すことができます。

_.where()は、指定された条件を配列内の各要素が満たしているかどうかを順番に判定し、条件を満たした要素だけを新しい配列として返すメソッドです。たとえば「配列の中から給与が15000と等しい人をすべて探したい」という場合、_.where()は全要素を精査し、条件に合致した要素のみを出力してくれます。

基本構文

_.where(list, testCondition);

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

  • list：検索対象となる配列
  • testCondition：判定基準となるプロパティ名と値のペアを持つオブジェクト

条件に一致したすべての要素が、結果として配列形式で返されます。

サンプルコード1：年齢で要素を絞り込む

次の例では、人物データの入った配列に対して年齢（age）に関する条件を渡し、条件に一致する要素だけを出力しています。

<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<script>
  var people = [
    {"name": "Dhoni", "age": 38},
    {"name": "kohli", "age": 22},
    {"name": "Rohit", "age": 28},
    {"name": "dhawan", "age": 28}
  ];
  document.write(JSON.stringify(_.where(people, {age: 28})));
</script>
</body>
</html>

実行結果

[{"name":"Rohit","age":28},{"name":"dhawan","age":28}]

このように、ageが28である「Rohit」と「dhawan」の2件だけが抽出されました。条件に一致しなかった要素は結果から除外されます。

サンプルコード2：IDで要素を絞り込む

続く例では、studentsという配列に対してID（id）に関する条件を渡し、該当する学生のデータを取得しています。

<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<script>
  var students = [
    {"name": "Ravi", "id": 45},
    {"name": "Surya", "id": 45},
    {"name": "Chandra", "id": 47},
    {"name": "guru", "id": 40}
  ];
  document.write(JSON.stringify(_.where(students, {id: 45})));
</script>
</body>
</html>

実行結果

[{"name":"Ravi","id":45},{"name":"Surya","id":45}]

IDが45の「Ravi」と「Surya」の2件が正しく取得できています。

補足：モダンな代替手段について

_.where()はunderscore.js特有の関数ですが、現在主流となっているLodashの新版では削除されている点に注意が必要です。ES5以降のJavaScriptでは、標準のArray.prototype.filter()メソッドや、underscore.js / Lodash共通の_.filter()を使うことで、同じ処理をより柔軟に実現できます。

const result = people.filter(person => person.age === 28);

既存コードの保守では_.where()が役立ちますが、新規開発では標準APIや最新のメソッドを活用するのがおすすめです。

  1. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから

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

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