Что делает метод filter в JavaScript?

Что такое метод filter() в JavaScript?

Метод filter() — это встроенный метод массивов в JavaScript, который создаёт новый массив, содержащий все элементы исходного массива, прошедшие проверку (фильтрацию) заданной функцией-предикатом. Исходный массив при этом не изменяется.

Ключевые характеристики

• Не мутирует исходный массив — работает по принципу иммутабельности
• Возвращает новый массив — даже если ни один элемент не прошёл фильтрацию (вернёт пустой массив [])
• Принимает функцию-колбэк — которая выполняется для каждого элемента
• Фильтрует по условию — колбэк должен возвращать true (элемент попадает в новый массив) или false (элемент пропускается)

Синтаксис

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

Параметры:

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

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

Базовый пример: фильтрация чисел

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

// Получить только чётные числа
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

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

Работа с объектами

const users = [
  { id: 1, name: 'Анна', age: 25, isActive: true },
  { id: 2, name: 'Иван', age: 30, isActive: false },
  { id: 3, name: 'Мария', age: 22, isActive: true },
  { id: 4, name: 'Пётр', age: 35, isActive: true }
];

// Активные пользователи старше 25 лет
const activeAdults = users.filter(user => user.isActive && user.age > 25);
console.log(activeAdults);
// [{ id: 4, name: 'Пётр', age: 35, isActive: true }]

// Пользователи с именами длиннее 4 букв
const longNames = users.filter(user => user.name.length > 4);
console.log(longNames);
// [{ id: 1, name: 'Анна', age: 25, isActive: true },
//  { id: 3, name: 'Мария', age: 22, isActive: true }]

Использование индекса в колбэке

const fruits = ['яблоко', 'банан', 'груша', 'апельсин', 'киви'];

// Элементы с чётными индексами
const evenIndexFruits = fruits.filter((fruit, index) => index % 2 === 0);
console.log(evenIndexFruits); // ['яблоко', 'груша', 'киви']

Особенности и нюансы

1. Ложные значения

Метод filter() удаляет все "ложные" значения, если передать булеву функцию:

const mixedArray = [0, 1, false, 2, '', 3, null, 4, undefined, 5, NaN];
const truthyValues = mixedArray.filter(Boolean);
console.log(truthyValues); // [1, 2, 3, 4, 5]

2. Поиск по условию с частичным совпадением

const products = [
  'ноутбук Dell',
  'мышь Logitech',
  'клавиатура Razer',
  'монитор Dell',
  'наушники Sony'
];

// Все продукты Dell
const dellProducts = products.filter(product => product.includes('Dell'));
console.log(dellProducts); // ['ноутбук Dell', 'монитор Dell']

3. Цепочка методов массива

filter() часто комбинируется с другими методами массивов:

const numbers = [10, 15, 20, 25, 30, 35];

// Отфильтровать числа больше 15, затем умножить каждое на 2
const result = numbers
  .filter(num => num > 15)
  .map(num => num * 2);

console.log(result); // [40, 50, 60, 70]

Сравнение с аналогичными методами

Полифил для старых браузеров

Если нужно поддерживать очень старые среды, можно реализовать полифил:

if (!Array.prototype.filter) {
  Array.prototype.filter = function(callback, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.filter called on null or undefined');
    }
    
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    
    const result = [];
    const array = Object(this);
    const length = array.length >>> 0;
    
    for (let i = 0; i < length; i++) {
      if (i in array) {
        const element = array[i];
        if (callback.call(thisArg, element, i, array)) {
          result.push(element);
        }
      }
    }
    
    return result;
  };
}

Производительность и лучшие практики

1. Используйте стрелочные функции для краткости, когда не нужен отдельный контекст this
2. Избегайте сложных вычислений в колбэке — выносите их в отдельные функции
3. Помните о порядке вызовов при цепочке методов — иногда фильтрацию стоит делать первой для уменьшения количества обрабатываемых элементов
4. Для очень больших массивов рассмотрите возможность использования for цикла с предварительным выделением памяти

Заключение

Метод filter() — мощный и часто используемый инструмент в арсенале JavaScript-разработчика. Его сила в простоте, читаемости и неизменяемости данных. Понимание его работы важно для написания чистого, декларативного кода, особенно в связке с другими методами функционального программирования, такими как map(), reduce() и sort().