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

Вопрос

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

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает принцип работы filter, его иммутабельность и способен привести практический пример. Также важно упомянуть, что filter не изменяет исходный массив, а создаёт новый.

Ключевые тезисы

• Метод filter создаёт новый массив, включая только те элементы исходного массива, которые удовлетворяют условию, заданному в callback-функции.
• Callback-функция должна возвращать true (элемент включается в новый массив) или false (элемент пропускается).
• Исходный массив не изменяется — filter является иммутабельным методом.
• Пример использования: const evenNumbers = [1, 2, 3, 4].filter(num => num % 2 === 0); // [2, 4]

Подробный ответ

Метод filter в JavaScript используется для создания нового массива, который включает только те элементы исходного массива, которые удовлетворяют условию, заданному в callback-функции. Этот метод не изменяет исходный массив, что делает его иммутабельным. Callback-функция должна возвращать true (элемент включается в новый массив) или false (элемент пропускается). Если callback-функция не возвращает true или false, метод filter интерпретирует результат как false, и элемент не включается в новый массив.

Пример использования: const evenNumbers = [1, 2, 3, 4].filter(num => num % 2 === 0); // [2, 4]. В этом примере callback-функция проверяет, является ли число чётным, и включает его в новый массив только если условие выполняется.

Метод filter можно использовать для работы с объектами, но важно помнить, что callback-функция должна корректно обрабатывать свойства объектов. Например, const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]; const adults = users.filter(user => user.age >= 18); // [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}].

Если callback-функция не возвращает явно true или false, метод filter интерпретирует результат как false. Например, const numbers = [1, 2, 3].filter(num => num); // [1, 2, 3], так как числа, отличные от 0, преобразуются в true. Однако, если callback-функция возвращает undefined, элемент не будет включён в новый массив.

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

Пример 1

Фильтрация чётных чисел. const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

Пример 2

Фильтрация объектов по свойству. const products = [{name: 'Laptop', price: 1000}, {name: 'Phone', price: 500}]; const expensiveProducts = products.filter(product => product.price > 600); // [{name: 'Laptop', price: 1000}]

Пример 3

Фильтрация строк по длине. const words = ['apple', 'banana', 'cherry', 'date']; const longWords = words.filter(word => word.length > 5); // ['banana', 'cherry']

Частые ошибки

• Типичная ошибка: Непонимание, что callback-функция должна возвращать true или false. Например, использование console.log внутри callback-функции без возврата значения приведёт к пустому массиву.
• Ошибка: Изменение исходного массива внутри callback-функции. Это может привести к неожиданным результатам, так как filter не предназначен для модификации исходного массива.

Связанные темы

• Метод map в JavaScript, который преобразует каждый элемент массива и возвращает новый массив.
• Метод reduce в JavaScript, который используется для агрегации данных в массиве.
• Иммутабельность в JavaScript и её важность в функциональном программировании.

Follow-up вопросы

Можно ли использовать filter для работы с объектами?

Уровень: intermediate

Метод filter предназначен для работы с массивами, но можно преобразовать объект в массив (например, с помощью Object.entries), применить filter, а затем вернуть результат обратно в объект.

Что произойдёт, если callback-функция в filter не вернёт true или false?

Уровень: basic

Если callback-функция возвращает falsy значение (например, undefined, null, 0), элемент не попадёт в новый массив. В противном случае элемент будет включён.

Как filter работает с пустыми массивами?

Уровень: basic

Если массив пустой, filter вернёт новый пустой массив, так как не будет элементов для проверки callback-функцией.

В чём отличие filter от метода map?

Уровень: intermediate

Метод filter создаёт новый массив, включая только элементы, удовлетворяющие условию. Метод map создаёт новый массив, преобразуя каждый элемент исходного массива.

Можно ли использовать асинхронные функции в callback для filter?

Уровень: advanced

Нет, filter не поддерживает асинхронные callback-функции напрямую. Для этого можно использовать комбинацию map и Promise.all, чтобы обработать асинхронные операции.