логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool

Как работает метод filter() - JavaScript

Автор

Виталий Котов

Метод filter() возвращает новый массив со всеми элементами, которые прошли проверку, определенную заданной функцией.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// функция проверки чётных чисел
function checkEven(number) {
  if (number % 2 == 0) return true;
  else return false;
}

// создание нового массива с элементами, прошедшими проверку на чётность
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);

// Output: [ 2, 4, 6, 8, 10 ]

Синтаксис filter()

Синтаксис метода filter() следующий:

arr.filter(callback(element), thisArg);

Где arr - это массив.

Параметры filter()

Метод filter() принимает:

  • callback
    • функцию с проверкой, для вызова на каждом элементе массива; возвращает true, если элемент прошёл проверку, иначе возвращает false. Принимает:
      • element
        • текущий обрабатываемый элемент в массиве.
  • thisArg (необязательно) - значение, используемое в качестве this, при вызове функции callback. По умолчанию определен как undefined.

Возвращаемое значение filter()

Возвращает новый массив, содержащий только те элементы, которые прошли проверку.

Примечания:

  • filter() не изменяет исходный массив.
  • filter() не вызывает функцию callback для элементов массива без значений.

Примеры

Пример 1: Фильтрация элементов массива

const prices = [1800, 2000, null, 3000, 5000, "Thousand", 500, 8000];

function checkPrice(element) {
  return element > 2000 && !Number.isNaN(element);
}

let filteredPrices = prices.filter(checkPrice);
console.log(filteredPrices); // [ 3000, 5000, 8000 ]

// используем стрелочную функцию
let newPrices = prices.filter((price) => price > 2000 && !Number.isNaN(price));
console.log(newPrices); // [ 3000, 5000, 8000 ]

Вывод в консоль:

[ 3000, 5000, 8000 ]
[ 3000, 5000, 8000 ]

Здесь отфильтровываются все числа, меньшие или равные 2000, а также все нечисловые значения.

Пример 2: Поиск в массиве

const languages = [
  "JavaScript",
  "Python",
  "Ruby",
  "C",
  "C++",
  "Swift",
  "PHP",
  "Java",
];

function searchFor(arr, query) {
  function condition(element) {
    return element.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  }
  return arr.filter(condition);
}

let newArr = searchFor(languages, "ja");
console.log(newArr); // [ 'JavaScript', 'Java' ]

// используем стрелочную функцию
const searchArr = (arr, query) =>
  arr.filter(
    (element) => element.toLowerCase().indexOf(query.toLowerCase()) !== -1
  );

let newLanguages = searchArr(languages, "p");
console.log(newLanguages); // [ 'JavaScript', 'Python', 'PHP' ]

Вывод в консоль:

[ 'JavaScript', 'Java' ]
[ 'JavaScript', 'Python', 'PHP' ]

Здесь element и query преобразуются в нижний регистр, а метод indexOf() используется для проверки наличия query внутри element.

Те элементы, которые не проходят эту проверку, отфильтровываются.

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов18 часов лекций
иконка звёздочки рейтинга4.8
Frontend
Backend
Mobile
2 999 ₽
Основы JavaScript