Метод filter в JavaScript: как отфильтровать массив по условию

Чтобы отфильтровать массив в JavaScript, вызовите у него filter() и передайте функцию-условие: arr.filter(item => item > 10). Метод проверит каждый элемент и вернёт новый массив из тех, для которых функция вернула истинное значение. Исходный массив не меняется.

Ниже разберём синтаксис, шесть типовых задач с кодом и пять ошибок, из-за которых filter в JS выдаёт не тот результат. Если вы ещё путаетесь в самих массивах, начните с материала что такое массив и чем он отличается от списка.

Рекомендуем курсы по Javascript

• Skillbox9.8 ★JavaScript63 876 ₽3 месяца
• OTUS9.7 ★Fullstack разработчик JavaScript75 000 ₽6 месяцев
• GeekBrains9.7 ★Факультет fullstack JavaScript134 700 ₽15 месяцев
• Эдюсон9.6 ★Fullstack-разработчик на JavaScript119 070 ₽11 месяцев
• Hexlet9.6 ★Автоматизатор тестирования на JavaScript60 000 ₽6 месяцев
• TeachMeSkills9.5 ★Автоматизированное тестирование на JavaScript80 000 ₽4 месяца

Все 209 курсов→

Как работает filter в JavaScript

Синтаксис короткий:

const result = array.filter((element, index, array) => {
  return условие;
}, thisArg);

Функция-условие получает три аргумента, нужен обычно только первый:

• element: текущий элемент;
• index: его номер в массиве;
• array: сам массив, по которому идёт перебор.

Второй параметр thisArg задаёт this внутри функции. Со стрелочными функциями он не работает, поэтому в коде со стрелками его не передают.

Что возвращает filter: всегда новый массив. Если не подошёл ни один элемент, вернётся пустой [], так сказано в справочнике MDN по Array.prototype.filter(). Проверять результат на null не нужно.

const prices = [450, 1200, 89, 3000, 760];
const cheap = prices.filter(price => price < 1000);
console.log(cheap);
console.log(prices);

// [ 450, 89, 760 ]
// [ 450, 1200, 89, 3000, 760 ]

Как отфильтровать массив: пошаговая инструкция

1. Определите, что оставить. Сформулируйте условие словами: «курсы дешевле 30 000», «активные пользователи», «строки, где есть слово».
2. Запишите условие функцией, которая возвращает true или false: course => course.price < 30000.
3. Вызовите filter у массива и передайте эту функцию.
4. Сохраните результат в новую переменную. Метод не трогает исходный массив, поэтому без присваивания отфильтрованные данные потеряются.
5. Проверьте, не пустой ли результат: if (result.length === 0). Пустой массив в условии if (result) всё равно считается истинным.

Как добавлять элементы в массив, рассказали в соседней инструкции как добавить объект в массив через push и spread.

Примеры: шесть задач, которые решает filter

Массив объектов по значению свойства

Типовая задача: из списка товаров, курсов или пользователей оставить подходящие по одному полю.

const courses = [
  { title: 'JavaScript с нуля', price: 0, level: 'junior' },
  { title: 'React для практиков', price: 42000, level: 'middle' },
  { title: 'Вёрстка за выходные', price: 0, level: 'junior' },
  { title: 'Node.js и базы данных', price: 56000, level: 'middle' },
];
const free = courses.filter(course => course.price === 0);
console.log(free.map(course => course.title));

// [ 'JavaScript с нуля', 'Вёрстка за выходные' ]

Несколько условий сразу

Условия соединяются через && (оба должны выполниться) или || (хватит одного). Отдельный filter на каждое условие писать не нужно.

const freeJunior = courses.filter(c => c.price === 0 && c.level === 'junior');
console.log(freeJunior.length);

// 2

Поиск по подстроке без учёта регистра

Так работает живой поиск по списку на сайте: пользователь вводит букву, список сжимается. Для фронтенда это рядовая задача, с чего начинать путь в профессию, описано в плане как стать фронтенд-разработчиком.

const cities = ['Москва', 'Казань', 'Мурманск', 'Самара'];
const query = 'м';
const found = cities.filter(city => city.toLowerCase().includes(query.toLowerCase()));
console.log(found);

// [ 'Москва', 'Мурманск', 'Самара' ]

Обе части приводим к нижнему регистру, иначе «Москва» не найдётся по строчной «м». В React списки фильтруют точно так же, только результат сразу уходит в разметку, а программы по этой библиотеке собраны в подборке курсов по React.

CheckroiПодборка курсов по React.js68 курсов • 21 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Удалить дубликаты из массива

Здесь пригодится второй аргумент, индекс. Элемент остаётся, если его первое вхождение совпадает с текущей позицией.

const tags = ['js', 'css', 'js', 'html', 'css'];
const unique = tags.filter((tag, index, arr) => arr.indexOf(tag) === index);
console.log(unique);

// [ 'js', 'css', 'html' ]

На массиве из десятков тысяч элементов приём медленный: indexOf каждый раз проходит массив с начала. Для больших объёмов быстрее [...new Set(tags)].

Убрать пустые значения

const values = [0, 5, '', 'текст', null, undefined, NaN, 12];
console.log(values.filter(Boolean));
console.log(values.filter(v => v !== null && v !== undefined && v !== ''));

// [ 5, 'текст', 12 ]
// [ 0, 5, 'текст', NaN, 12 ]

Короткая запись filter(Boolean) выкидывает всё ложноподобное, включая ноль. Если ноль для вас осмысленное значение (цена, остаток на складе), пишите условие явно, как во второй строке.

Как отфильтровать объект

У обычного объекта метода filter нет. Объект сначала превращают в массив пар через Object.entries(), фильтруют и собирают обратно через Object.fromEntries().

const salaries = { anna: 120000, oleg: 85000, ira: 150000 };
const high = Object.fromEntries(
  Object.entries(salaries).filter(([name, sum]) => sum > 100000)
);
console.log(high);

// { anna: 120000, ira: 150000 }

CheckroiПодборка курсов по Javascript209 курсов • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

filter, find, map и reduce: какой метод выбрать

Синтаксис у этих методов почти одинаковый, а отвечают они на разные вопросы. Перепутаете, и придётся дописывать лишние строки.

Методы складываются в цепочку, и в браузере, и на сервере в коде Node.js-разработчика. Например, посчитаем сумму недорогих товаров:

const products = [
  { name: 'Ноутбук', price: 85000 },
  { name: 'Мышь', price: 1500 },
  { name: 'Монитор', price: 23000 },
];
const total = products
  .filter(p => p.price < 30000)
  .map(p => p.price)
  .reduce((sum, price) => sum + price, 0);
console.log(total);

// 24500

Если нужен один элемент, берите find(): он остановится на первом совпадении, а filter пройдёт массив до конца и вернёт массив, из которого элемент ещё придётся достать через [0]. Что ещё из языка нужно знать на старте, собрали в материале о профессии JavaScript-разработчика.

Частые ошибки и что с ними делать

Фигурные скобки без return

Симптом: filter возвращает пустой массив, хотя подходящие элементы точно есть.

const nums = [1, 2, 3, 4];
const wrong = nums.filter(n => { n > 2 });
const right = nums.filter(n => { return n > 2; });
console.log(wrong, right);

// [] [ 3, 4 ]

Причина: стрелочная функция с фигурными скобками без return возвращает undefined, а это ложное значение.

Решение: уберите скобки (n => n > 2) или допишите return.

Изменили отфильтрованный объект, а поменялся исходный

const users = [{ name: 'Аня', active: true }, { name: 'Олег', active: false }];
const active = users.filter(u => u.active);
active[0].name = 'Анна';
console.log(users[0].name);

// Анна

Массив новый, но объекты внутри те же самые: метод копирует только ссылки на них. Если результат будете менять, скопируйте объекты: .map(u => ({ ...u })).

Асинхронная функция внутри filter

const ids = [1, 2, 3, 4];
const isEven = async id => id % 2 === 0;
console.log(ids.filter(isEven));

// [ 1, 2, 3, 4 ]

Async-функция возвращает промис, а промис всегда истинный, поэтому проходят все элементы. Сначала дождитесь проверок через Promise.all, потом фильтруйте по готовым результатам. Код ниже работает внутри async-функции или в модуле:

const checks = await Promise.all(ids.map(isEven));
const good = ids.filter((id, i) => checks[i]);

// [ 2, 4 ]

Ситуация типична для данных с сервера: как получать их запросом, рассказали в инструкции по fetch в JavaScript.

filter is not a function у элементов страницы

document.querySelectorAll() возвращает NodeList, коллекцию, похожую на массив. У неё есть forEach, но нет filter. Превратите коллекцию в массив: Array.from(document.querySelectorAll('li')).filter(...). Откуда берутся такие коллекции, объясняет разбор DOM-дерева в JavaScript.

Тип результата в TypeScript не сузился

Отфильтровали null, а TypeScript всё равно считает, что в массиве может быть null. Простые проверки вроде x => x !== null компилятор распознаёт сам начиная с версии 5.5: в анонсе TypeScript 5.5 это названо inferred type predicates. В старых версиях и при сложном условии подскажите тип явно функцией-предикатом: arr.filter((x): x is string => x !== null). Как работают такие проверки типов, описано в документации TypeScript о сужении типов, а с самим языком знакомит наш материал TypeScript: что это и как начать.

CheckroiПодборка курсов по TypeScript59 курсов • 19 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Где освоить JavaScript системно

filter решает одну задачу. Чтобы писать интерфейсы, нужны ещё асинхронность, DOM и TypeScript, и учить их проще на задачах, которые кто-то проверяет. Ниже пять программ из каталога курсов по JavaScript с ценой и длительностью.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
JavaScript Перейти на сайт курса	Skillbox	63 876 ₽	4086 ₽/мес.	3 месяца	Обзор курса
Fullstack разработчик JavaScript Перейти на сайт курса	OTUS	75 000 ₽	20 000 ₽/мес.	6 месяцев	Обзор курса
Факультет fullstack JavaScript Перейти на сайт курса	GeekBrains	134 700 ₽	3742 ₽/мес.	15 месяцев	Обзор курса
Fullstack-разработчик на JavaScript Перейти на сайт курса	Эдюсон	119 070 ₽	4961 ₽/мес.	11 месяцев	Обзор курса
Фулстек-разработчик на JavaScript Перейти на сайт курса	Skillbox	153 461 ₽	4296 ₽/мес.	11 месяцев	Обзор курса

• 

  JavaScript

  Skillbox63 876 ₽4086 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  Fullstack разработчик JavaScript

  OTUS75 000 ₽20 000 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор
• 

  Факультет fullstack JavaScript

  GeekBrains134 700 ₽3742 ₽/мес15 месяцев
  Перейти на сайт курсаОбзор
• 

  Fullstack-разработчик на JavaScript

  Эдюсон119 070 ₽4961 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Фулстек-разработчик на JavaScript

  Skillbox153 461 ₽4296 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Javascript