Что такое filter

Вопрос

Что такое filter

Профессия

Frontend Developer

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

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

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

• filter — это метод массива в JavaScript, который создает новый массив, состоящий из элементов, удовлетворяющих определенному условию.
• Он принимает функцию-коллбэк в качестве аргумента, которая выполняется для каждого элемента массива.
• Если коллбэк возвращает true, элемент включается в новый массив; если false — исключается.
• Исходный массив остается неизменным, filter возвращает новый массив.
• Пример использования: фильтрация массива чисел для получения только четных значений.

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

Метод filter — это один из встроенных методов массива в JavaScript, который используется для создания нового массива на основе элементов исходного массива, удовлетворяющих определенному условию. Этот метод принимает функцию-коллбэк в качестве аргумента, которая выполняется для каждого элемента массива. Если коллбэк возвращает true, элемент включается в новый массив; если false — исключается. Важно отметить, что исходный массив остается неизменным, а filter всегда возвращает новый массив. Это делает его полезным инструментом для работы с данными, когда нужно отфильтровать элементы без изменения оригинала. Например, с помощью filter можно легко отобрать только четные числа из массива чисел или только активных пользователей из массива объектов. Метод filter часто используется в сочетании с другими методами массива, такими как map и reduce, для выполнения сложных операций с данными.

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

Пример 1

Пример использования filter для фильтрации четных чисел:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Пример 2

Пример использования filter для фильтрации объектов:

const users = [
  { name: 'Alice', age: 25, active: true },
  { name: 'Bob', age: 30, active: false },
  { name: 'Charlie', age: 22, active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // [{ name: 'Alice', age: 25, active: true }, { name: 'Charlie', age: 22, active: true }]

Пример 3

Пример использования filter для удаления undefined или null значений из массива:

const mixedArray = [1, null, 2, undefined, 3];
const filteredArray = mixedArray.filter(item => item !== null && item !== undefined);
console.log(filteredArray); // [1, 2, 3]

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

• Типичная ошибка — забывать, что filter возвращает новый массив, и пытаться использовать его для изменения исходного массива. Например:

const numbers = [1, 2, 3];
numbers.filter(num => num > 1); // Этот код не изменит массив `numbers`

• Использование filter без понимания того, что коллбэк должен возвращать булево значение. Например:

const numbers = [1, 2, 3];
const filtered = numbers.filter(num => num); // Это работает, но может быть неочевидно, что происходит

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

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

Follow-up вопросы

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

Уровень: basic

Да, например, можно отфильтровать массив пользователей по возрасту: users.filter(user => user.age > 18). Это вернет новый массив пользователей старше 18 лет.

Как filter отличается от map и forEach?

Уровень: intermediate

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

Можно ли использовать filter для удаления undefined или null значений из массива?

Уровень: intermediate

Да, например: arr.filter(item => item !== undefined && item !== null). Это вернет массив без undefined и null значений.

Как работает this внутри коллбэка filter? Можно ли его изменить?

Уровень: advanced

this внутри коллбэка определяется контекстом вызова. Его можно изменить, передав второй аргумент в filter: arr.filter(callback, thisArg). Тогда this внутри callback будет ссылаться на thisArg.

Как filter обрабатывает разреженные массивы (с пропущенными индексами)?

Уровень: advanced

filter пропускает отсутствующие элементы (undefined в разреженных массивах) и не включает их в результирующий массив. Коллбэк не вызывается для таких элементов.