Aller au contenu principal

filter()

filter<T>(collection, predicate): T[]

filter<T>(collection, predicate): Partial<T>

Iterates over elements of collection, returning an array of all elements predicate returns truthy for.

DEPRECATED

Use array.filter() or Object.entries().filter() directly instead.

Type Parameters​

T: T​

The type of elements in the array, or the object type.

Parameters​

Overload 1:

collection: T[]​

The collection to iterate over.

predicate: (value, index, array) => boolean​

The function invoked per iteration.

Overload 2:

collection: T​

The collection to iterate over.

predicate: (value, key, object) => boolean​

The function invoked per iteration.

Returns: T[]​

The new filtered array or object.

See Also​

Since​

2.0.0

Also known as​

filter (Lodash, es-toolkit, Remeda, Ramda, Effect) · ❌ (Radashi, Modern Dash, Antfu)

Example​

const numbers = [1, 2, 3, 4, 5];

// ❌ Deprecated approach
const evenNumbers = filter(numbers, n => n % 2 === 0);
console.log(evenNumbers); // [2, 4]

// ✅ Recommended approach (for arrays)
const evenNumbersNative = numbers.filter(n => n % 2 === 0);
console.log(evenNumbersNative); // [2, 4]

// ✅ Recommended approach (for objects)
const obj = { a: 1, b: 2, c: 3 };
const evenEntries = Object.fromEntries(
  Object.entries(obj).filter(([, value]) => value % 2 === 0)
);
console.log(evenEntries); // { b: 2 }

How it works?​

Creates an array with elements that pass the predicate. Deprecated: Use array.filter() directly.

Native Equivalent​

// ❌ filter(arr, fn)
// ✅ arr.filter(fn)

Use Cases​

Extract matching items 📌​

Filter elements that match specific criteria.

const products = [{ category: "electronics" }, { category: "clothing" }];
products.filter(p => p.category === "electronics");

Filter active flags from object​

Extract enabled flags from a configuration object.

const flags = { darkMode: true, beta: false, analytics: true };
Object.fromEntries(
  Object.entries(flags).filter(([, enabled]) => enabled)
);
// => { darkMode: true, analytics: true }

Select high-priority items​

Filter items by priority level.

const notifications = [{ priority: "high" }, { priority: "low" }];
notifications.filter(n => n.priority === "high");

Filter events by date range for analytics​

Select events within a specific time window for reporting. Essential for analytics dashboards, audit logs, and time-series data.

const startDate = new Date("2025-01-01");
const endDate = new Date("2025-01-31");

const events = [
  { type: "purchase", date: new Date("2025-01-15"), amount: 99 },
  { type: "purchase", date: new Date("2025-02-10"), amount: 49 },
  { type: "refund", date: new Date("2025-01-20"), amount: 30 },
];

const januaryEvents = filter(events, (e) => e.date >= startDate && e.date <= endDate);
// => [{ type: "purchase", date: Jan 15, ... }, { type: "refund", date: Jan 20, ... }]

Filter search results with multiple criteria​

Apply combined filters on a product catalog or search results. Critical for e-commerce search, job boards, and any faceted filtering UI.

const products = [
  { name: "Laptop", price: 1200, category: "electronics", inStock: true },
  { name: "T-Shirt", price: 25, category: "clothing", inStock: true },
  { name: "Monitor", price: 400, category: "electronics", inStock: false },
  { name: "Keyboard", price: 80, category: "electronics", inStock: true },
];

const activeFilters = { category: "electronics", maxPrice: 500, inStock: true };

const results = filter(products, (p) =>
  p.category === activeFilters.category &&
  p.price <= activeFilters.maxPrice &&
  p.inStock === activeFilters.inStock
);
// => [{ name: "Keyboard", price: 80, ... }]