Метод filter()

Метод filter() використовується для створення нового масиву, який містить лише ті елементи вихідного масиву, які задовольняють заданій умові, вказаній у колбек функції.

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

const newArray = outputArray.filter((element, index, array) => {
    // Повернути true/false для умови фільтрації
});

Що виконує метод:

• Не змінює вихідний масив.

• Поелементо перебирає вихідний масив.

• Повертає новий масив.

• Додає у новий масив тільки ті елементи, які задовольняють умови колбек-функції.

• Якщо колбек функція повернула true, то елемент додається у новий масив.

• Якщо колбек функція повернула false, то елемент не додається у новий масив.

• Якщо жоден елемент не задовольнив умову, повертається порожній масив.

Приклад

Наприклад у нас є масив чисел. Відфільтруємо додатні і відʼємні числа і переконаємося, що вихідний масив не змінився.

const numbers = [-100, 50, 1000, 324, -43, 5, 865];
console.log(numbers); // [-100, 50, 1000, 324, -43, 5, 865];

// фільтруємо додатні числа
const positiveNumbers = numbers.filter((el) => el >= 0);
console.log(positiveNumbers); // [50, 1000, 324, 5, 865]

// фільтруємо відʼємні числа
const negativeNumbers = numbers.filter((el) => el < 0);
console.log(negativeNumbers); // [-100, -43]

// вихідний масив не змінився
console.log(numbers); // [-100, 50, 1000, 324, -43, 5, 865];

Тобто колбек функція повертає true або false. І елемент масива додається у новий масив тільки якщо повертається true.

Фільтрування унікальних елементів

Методом flatMap() можна розкласти одномірний масив елементів, які утім можуть повторюватися. За допомогою методу filter() можна відфільтрувати унікальні елементи, тобто, щоб не було повторів. Цей прийом працює тільки з масивом примітивних значень - не об'єктів.

Приклад

Згадаємо, як за допомогою flatMap() розклали одномірний масив мов користувачів:

const users = [
  { name: "Alex", languages: ["ua", "en", "es"] },
  { name: "Mathew", languages: ["ua", "fr", "jp"] },
  { name: "Angelina", languages: ["fr", "en", "de", "it"] },
];

const usersLanguages = users.flatMap((el) => el.languages);

console.log(usersLanguages);
// ['ua', 'en', 'es', 'ua', 'fr', 'jp', 'fr', 'en', 'de', 'it']

У змінній usersLanguages зберігається масив усіх елементів. Тепер відфільтруємо новий масив так, щоб лишився тільки масив унікальних елементів.

Логіка вибору унікальних елементів:

• На кожній ітерації витягаємо індекс поточного елемента (другий параметр колбек-функції).

• За допомогою методу indexOf() шукаємо індекс першого такого елемента.

• Якщо обидва індекси збігаються, то це унікальний елемент і ми його відфільтровуємо.

• Якщо індекси не збігаються, то це повтор і ми його ігноруємо.

const filteredUsersLanguages = usersLanguages.filter(
  (element, index, array) => array.indexOf(element) === index
);

console.log(filteredUsersLanguages); 
//['ua', 'en', 'es', 'fr', 'jp', 'de', 'it']

Фільтрування масиву об'єктів

Класичною задачею в розробці є фільтрація масиву обʼєктів за якоюсь властивістю.

Наприклад, є масив користувачів. І необхідно відфільтрувати їх за віком: молодше 18 років, середнього віку (18-59 років) і старшого віку (від 60 рків і старше).

const people = [
  { name: "Alex", age: 18 },
  { name: "Max", age: 67 },
  { name: "Helga", age: 14 },
  { name: "Mathew", age: 36 },
  { name: "Angelina", age: 59 },
  { name: "Pablo", age: 7 },
  { name: "Paolina", age: 61 },
];

const underage = people.filter((person) => person.age < 18);
console.log(underage);
// [{ name: "Helga", age: 14 }, { name: "Pablo", age: 7 }]

const middleage = people.filter(
  (person) => person.age >= 18 && person.age < 60
);
console.log(middleage);
// [{ name: "Alex", age: 18 }, { name: "Mathew", age: 36 }, { name: "Angelina", age: 59 }]

const pensioner = people.filter((person) => person.age >= 60);
console.log(pensioner);
// [{ name: "Max", age: 67 }, { name: "Paolina", age: 61 }]