JavaScript で複数の条件をフィルタリングする

1. JavaScript で複数の条件をフィルタリングする
2. 従来の方法を使用する
3. フィルターメソッドを使用する

今日の記事では、JavaScript の従来のメソッドと filter メソッドを使用して、複数の条件で配列をフィルター処理する方法を説明しています。

JavaScript で複数の条件をフィルタリングする

配列は、固定の数値キーと動的な値を持つ一種の JavaScript オブジェクトです。JavaScript には、これらの配列要素にアクセスして操作するためのいくつかの組み込みメソッドが用意されています。

filter() メソッドは、提供された関数によって実装された条件/テストに合格したすべての要素を含む元の配列から新しい配列を生成します。

構文：

filter(callbackFn)

filter メソッドは、パラメーターとして callbackFn を受け入れます。この関数は、配列の各要素をテストするための述語です。

要素を強制的に true または false のままにする新しい配列を返します。

コールバック関数は、3つの引数を使用して呼び出されます。

1. element は、アレイで処理されている現在の要素です。
2. index は、アレイで処理されている現在の要素のインデックスです。
3. filter() が呼び出された array。

テストに合格した要素を含む新しい配列が返されます。テストに合格する要素がない場合は、空の配列が返されます。

filter() は、配列の要素ごとに提供された callbackFn 関数を 1 回呼び出し、callbackFn が true を強制する値を返すすべての値の新しい配列を作成します。

callbackFn は、値が割り当てられている配列インデックスに対してのみ呼び出されます。ドロップされた、または割り当てられたことがないインデックスに対しては呼び出されません。

callbackFn テストに失敗した配列要素はスキップされ、新しい配列に含まれません。詳細については、filter() のドキュメントをご覧ください。

従来の方法を使用する

const filter = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key]) return false;
  }
  return true;
});

console.log(filteredUsers);

上記の例では、目的のプロパティを持つ filter オブジェクトについて説明しました。filter メソッドでコールバック関数を定義して、指定した配列に目的のプロパティが存在するかどうかを確認しました。

必要なプロパティが存在しない場合、false が返されます。それ以外の場合は、true が返されます。

このアプローチは、filter オブジェクトが動的に生成される場合に役立ちます。filter オブジェクトが静的である場合、以下の&&条件を使用してオブジェクトをフィルタリングできます。

JavaScript をサポートする任意のブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

フィルターメソッドを使用する

const filteredUsers = users.filter(
    obj => obj.name == filter.name && obj.address == filter.address);
console.log(filteredUsers);

出力：

[{
  address: "India",
  age: 35,
  email: "aleena@mail.com",
  name: "Aleena"
}]

デモ