LearnJS

filter() в JavaScript

filter() - это метод массива, который создает новый массив только из тех элементов, которые прошли проверку.

Например, можно оставить только числа больше 10.

let numbers = [5, 12, 8, 20];

let result = numbers.filter((number) => number > 10);

console.log(result); // [12, 20]

Синтаксис

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

let newArray = array.filter((element) => {
  return condition;
});

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

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

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

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

Как работает условие

Условие внутри filter() должно отвечать на вопрос: оставляем элемент или нет.

let names = ['Анна', 'Олег', 'Мария', 'Иван'];

let shortNames = names.filter((name) => name.length <= 4);

console.log(shortNames); // ['Анна', 'Олег', 'Иван']

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

let shortNames = names.filter((name) => {
  return name.length <= 4;
});

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

На практике filter() часто используют с массивами объектов. Например, чтобы оставить только товары в наличии.

let products = [
  { title: 'Книга', inStock: true },
  { title: 'Курс', inStock: false },
  { title: 'Подписка', inStock: true },
];

let availableProducts = products.filter((product) => product.inStock);

console.log(availableProducts);

Здесь product.inStock уже содержит булево значение, поэтому дополнительное сравнение с true не обязательно.

Параметры callback-функции

Callback-функция в filter() может принимать три параметра.

element - текущий элемент массива.

index - индекс текущего элемента.

array - исходный массив.

let numbers = [10, 20, 30, 40];

let result = numbers.filter((number, index) => {
  return index > 1;
});

console.log(result); // [30, 40]

Чаще всего достаточно первого параметра. Индекс и сам массив используют только когда они действительно нужны для условия.

Что возвращает 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]

Исходный массив при этом не меняется.

Если ни один элемент не подошел, результатом будет пустой массив.

let numbers = [1, 2, 3];

let result = numbers.filter((number) => number > 10);

console.log(result); // []

Отличие filter() от map() и find()

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

map() нужен, когда нужно преобразовать каждый элемент.

find() нужен, когда нужно найти один первый подходящий элемент.

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

let activeUsers = users.filter((user) => user.active);
let names = users.map((user) => user.name);
let user = users.find((user) => user.id === 2);

Если коротко: filter() отбирает, map() преобразует, find() ищет один элемент.