LearnJS

Фильтрация массива в JavaScript

Фильтрация массива нужна, когда из массива нужно оставить только те элементы, которые подходят под условие.

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

В этом примере в новый массив попали только четные числа.

Что такое фильтрация массива

Фильтрация не изменяет элементы, а отбирает их. Часть элементов остается, часть отбрасывается.

Например, есть список цен, а нужно оставить только цены больше 1000.

let prices = [500, 1200, 800, 3000];

let expensivePrices = prices.filter((price) => price > 1000);

console.log(expensivePrices); // [1200, 3000]

Если нужно не отобрать элементы, а изменить каждый элемент, тогда обычно нужен map(), а не filter().

Метод filter()

filter() перебирает массив и вызывает callback-функцию для каждого элемента.

Если callback-функция возвращает true, элемент попадает в новый массив. Если возвращает false, элемент пропускается.

let ages = [16, 21, 18, 14, 30];

let adults = ages.filter((age) => {
  return age >= 18;
});

console.log(adults); // [21, 18, 30]

Метод возвращает новый массив с подходящими элементами.

Условие в callback-функции

В callback-функции обычно пишут проверку. Она должна вернуть результат проверки.

let words = ['кот', 'машина', 'дом', 'программирование'];

let longWords = words.filter((word) => word.length > 5);

console.log(longWords); // ['машина', 'программирование']

Если используете фигурные скобки, не забывайте return.

let longWords = words.filter((word) => {
  return word.length > 5;
});

Без return функция вернет undefined, и элементы не пройдут фильтр.

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

Часто фильтруют не числа и строки, а массив объектов. Например, нужно оставить только активных пользователей.

let users = [
  { name: 'Анна', active: true },
  { name: 'Олег', active: false },
  { name: 'Мария', active: true },
];

let activeUsers = users.filter((user) => user.active);

console.log(activeUsers);

Здесь user.active уже содержит true или false, поэтому отдельное сравнение можно не писать.

let activeUsers = users.filter((user) => user.active === true);

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

Если ничего не подошло

Если ни один элемент не прошел проверку, filter() вернет пустой массив.

let prices = [100, 200, 300];

let expensivePrices = prices.filter((price) => price > 1000);

console.log(expensivePrices); // []

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

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

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

let numbers = [1, 2, 3, 4];

let evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(numbers); // [1, 2, 3, 4]
console.log(evenNumbers); // [2, 4]

Это удобно, когда нужно сохранить исходные данные и отдельно получить отфильтрованный результат.

filter() или find()

filter() нужен, когда нужно получить все подходящие элементы.

let users = [
  { id: 1, name: 'Анна', role: 'admin' },
  { id: 2, name: 'Олег', role: 'user' },
  { id: 3, name: 'Мария', role: 'admin' },
];

let admins = users.filter((user) => user.role === 'admin');

console.log(admins);

Если нужен только один первый подходящий элемент, лучше использовать find().

let user = users.find((user) => user.id === 2);

console.log(user); // { id: 2, name: 'Олег', role: 'user' }

Проще правило такое: нужен массив результатов - используйте filter(), нужен один элемент - используйте find().

Итого

1. Фильтрация массива оставляет только элементы, которые подходят под условие.

2. Для фильтрации используют метод filter().

3. Callback-функция должна вернуть true или false.

4. filter() возвращает новый массив и не меняет исходный.

5. Если нужен один элемент, чаще подходит find(), а не filter().