filter() — метод фильтрации массивов JavaScript

Это один из многих методов массива доступный в JS. Кратко о нем упоминалось в посте про поиск элементов в массиве. Теперь рассмотрим его подробней.

В качестве аргументов он принимает:
— callback — функция, которая будет выполняться для каждого элемента массива. Она, в свою очередь, принимает три аргумента:

• currentElement — текущий итерируемый элемент
• index — индекс текущего элемента в исходном массиве
• array — сам массив, по которому мы проходимся

— thisArg — значение, которое будет использоваться в качестве this. Данный аргумент является не обязательным.

Метод filter() вернет новый массив, удовлетворяющий условиям из callback

Примеры

Первый пример. Допустим нам нужно получить новый массив данных, при этом не изменяя исходный массив (иначе мы могли бы воспользоваться методами для удаления элемента из массива).

const arr = ['BMW', 'Renault', 'Ferrari', 'Porsche'];

const filteredArr = arr.filter((item) => {
  if (item !== 'Renault') return item;
});

console.log(filteredArr); // ['BMW', 'Ferrari', 'Porsche'];

// Исходный массив не изменяется
console.log(arr); // ['BMW', 'Renault', 'Ferrari', 'Porsche'];

Как видно из примера выше, исходный массив не изменился. Также можно записать более короткий вариант:

const filteredArr = arr.filter((item) => item !== 'Renault');

Тут мы сразу делаем return элемента в новый массив, если текущий элемент (item) удовлетворяет заданному условию.

Также вы можете использовать второй параметр для callback — индекс элемента:

const arr = ['BMW', 'Renault', 'Ferrari', 'Porsche'];

const filteredArr = arr.filter((item, index) => {
  console.log(`${index} - ${item}`);
});

// 0 - BMW
// 1 - Renault
// 2 - Ferrari
// 3 - Porsche

console.log(filteredArr); // [];

Из примера выше в консоли вы увидите индекс элемента и сам элемент. Если вы проверите, что у нас храниться в filterArr, то увидите пустой массив, т.к. мы не делали return

Теперь рассмотрим пример с числами. Допустим вам нужно в новом массиве получить только числа, которые больше 5:

const arr = [1,2,3,4,5,6,7,8,9];

const filteredArr = arr.filter((item) => {
  if (item > 5) return item;
});

// Короткая запись
const filteredArr2 = arr.filter((item) => item > 5);

console.log(filteredArr); // [6,7,8,9];

Также можно его использовать для получения чисел из массива, которые кратные какому-то другому числу (более подробно про деление без остатка можете ознакомиться по ссылке):

const arr = [1,2,3,4,5,6,7,8,9];

const filteredArr = arr.filter((item) => {
  if (item % 2 === 0) return item;
});

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

Теперь рассмотрим пример с массивом объектов. Такие примеры чаще всего встречаются в работе разработчика (всевозможные фильтры в приложении или на сайте). Допустим, вы получаете данные с сервера. Это массив объектов. Каждый объект это данные о пользователе, вам нужно отсеять пользователей по возрасту:

const arr = [
  { name: 'Ben', age: 21 },
  { name: 'Clif', age: 17 },
  { name: 'Eric', age: 18 },
  { name: 'Anna', age: 15 },
];

const filteredByAge = arr.filter((item) => {
  // Каждый элемент массива это объект.
  // Значит мы можем обращаться к свойствам этого объекта
  if (item.age >= 18) return item;
});

Новый массив будет содержать только пользователя Ben и Eric, т.к. остальные младше 18 лет.

По такому же принципу можно сортировать массивы объектов с машинами/техникой и т.д.

В моей практике использование второго аргумента (thisArg) было не так часто, но справедливости ради, давайте разберем для чего он может быть нужен:

const arr = [1, 20, 67, 30, 55, 41];

const range = [30, 60];

function isInRange(item) {
  if (item >= this[0] && item <= this[1])
    return item;
}

const filteredArr = arr.filter(isInRange, range);

console.log(filteredArr)

В данном примере у нас есть массив чисел, нам нужно отобрать только те элементы, которые попадают в заданный диапазон (30-60). Это можно было бы сделать и без this…

Ваши вопросы и комментарии: