Что такое filter?

Что такое filter?

filter() — это встроенный метод массива в JavaScript, который создаёт новый массив со всеми элементами, которые прошли проверку, определённую в функции-обработчике. Это один из самых популярных методов массива наряду с map и reduce.

Синтаксис

const newArray = array.filter(callback(element, index, array), thisArg);

Параметры:

• callback — функция, которая вызывается для каждого элемента
• element — текущий элемент массива
• index (опционально) — индекс текущего элемента
• array (опционально) — сам массив
• thisArg (опционально) — контекст this внутри callback

Основные примеры

Фильтрация чисел:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Четные числа
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4, 6, 8, 10]

// Числа больше 5
const greaterThanFive = numbers.filter(n => n > 5);
console.log(greaterThanFive); // [6, 7, 8, 9, 10]

Фильтрация объектов:

const users = [
  { id: 1, name: "Алиса", age: 25, active: true },
  { id: 2, name: "Боб", age: 30, active: false },
  { id: 3, name: "Виктор", age: 22, active: true },
  { id: 4, name: "Галина", age: 28, active: false }
];

// Только активные пользователи
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{ id: 1, name: "Алиса", ... }, { id: 3, name: "Виктор", ... }]

// Пользователи старше 25
const adults = users.filter(user => user.age > 25);

Практические примеры в React

// Фильтрация списка задач
const activeTodos = todos.filter(todo => !todo.completed);

// Поиск по строке
const searchResults = items.filter(item => 
  item.title.toLowerCase().includes(searchQuery.toLowerCase())
);

// Комбинированные условия
const filteredProducts = products.filter(product => 
  product.price >= minPrice && 
  product.price <= maxPrice && 
  product.category === selectedCategory
);

filter() vs другие методы

filter() vs map():

// map — преобразует каждый элемент
const doubled = [1, 2, 3].map(n => n * 2); // [2, 4, 6]

// filter — выбирает элементы
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]

Комбинирование методов (chaining):

const result = users
  .filter(user => user.age >= 18)          // только взрослые
  .map(user => ({ id: user.id, name: user.name })) // только нужные поля
  .sort((a, b) => a.name.localeCompare(b.name)); // сортировка по имени

Важные особенности

filter() не изменяет исходный массив:

const original = [1, 2, 3, 4, 5];
const filtered = original.filter(n => n > 2);

console.log(original);  // [1, 2, 3, 4, 5] — не изменился
console.log(filtered);  // [3, 4, 5] — новый массив

Работает с пропущенными элементами:

const arr = [1, , 2, , 3]; // массив с пропусками
const result = arr.filter(x => x > 1);
console.log(result); // [2, 3] — пропуски игнорируются

Производительность

// Хорошо: один проход
const result = items.filter(item => item.active).map(item => item.name);

// Плохо: два прохода
const filtered = items.filter(item => item.active);
const names = filtered.map(item => item.name);

TypeScript типизация

interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [...];
const adults: User[] = users.filter(user => user.age >= 18);

filter() — это мощный инструмент функционального программирования, который позволяет писать чистый и читаемый код при работе с массивами.