Zenn
🔍

【JavaScript】filterメソッドで条件に合う要素だけを抽出する

2024/03/31に公開
JavaScript
tech

filterについて

JavaScriptのfilterメソッドは、配列の各要素に対して指定されたテスト関数を実行し、その関数がtrueを返したすべての要素からなる新しい配列を生成します。このメソッドは元の配列を変更せず、条件に合致する要素のみを含む新しい配列を提供します。

filterのサンプルコード

以下のサンプルコードでは、checkプロパティがtrueであるすべてのオブジェクトを配列から選択しています。

処理の流れ(知りたい方はクリックしてください)

①データの準備: オブジェクトの配列dataを用意します。各オブジェクトにはid、status、checkのプロパティが含まれています。
②filterの適用: filterメソッドを使用して、配列data内のオブジェクトを順にチェックします。テスト関数data => data.check === trueを各要素に適用し、その結果がtrueである要素だけを新しい配列に含めます。
③結果の抽出: checkプロパティがtrueであるオブジェクトのみが新しい配列に含まれます。
④結果の出力: 抽出されたオブジェクトをコンソールに出力します。この例では、idが2と4のオブジェクトが出力されます。

const data = [
  { id: 1, status: 1, check: false },
  { id: 2, status: 1, check: true },
  { id: 3, status: 2, check: false },
  { id: 4, status: 1, check: true },
];
// 指定した条件で新しい配列を作成(指定した条件の全ての要素を返す)
const filter = data.filter(data => data.check === true);
console.log(filter);
/*
0: {id: 2, status: 1, check: true}
1: {id: 4, status: 1, check: true}
*/

実践的な応用例

ユーザー入力に応じたデータのフィルタリング

ユーザーがプルダウンメニューでステータスを選択し、その選択に基づいて配列から条件を満たす要素をfilterで抽出する機能を実装します。ステータスが数値で管理されている場合、プルダウンメニューの各選択肢は対応するステータスの数値を持つようにします。

const users = [
  { id: 1, name: 'John', status: 1 },
  { id: 2, name: 'Jane', status: 2 },
  { id: 3, name: 'Doe', status: 1 },
];
const userSelection = 1; // ユーザーがプルダウンメニューで選択したステータスの数値
const filteredUsers = users.filter(user => user.status === userSelection);
console.log(filteredUsers); 
// [{id: 1, name: 'John', status: 1}, {id: 3, name: 'Doe', status: 1}] を出力

データセット内の特定の条件を満たすアイテムの表示

ウェブアプリケーションで、特定の条件（例えば、在庫がある商品のみを表示する）に基づいてアイテムをフィルタリングし、結果を表示します。

const products = [
  { id: 1, name: 'Product A', inStock: true },
  { id: 2, name: 'Product B', inStock: false },
  { id: 3, name: 'Product C', inStock: true },
];
const inStockProducts = products.filter(product => product.inStock);
console.log(inStockProducts); // 在庫がある商品だけを出力
// [{id: 1, name: 'Product A', inStock: true}, {id: 3, name: 'Product C', inStock: true}] を出力

まとめ

Discussion