JS метод Array.filter()

Приклад використовує метод filter(), щоб створити відфільтрований масив, з якого видалені всі елементи зі значеннями меншими за 10.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered містить [12, 130, 44]

Приклад повертає всі прості числа у масиві.

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

Приклад використовує функцію filter(), щоб створити фільтрований JSON з усіх елементів з ненульовим числовим ідентифікатором.

const arr = [
  { id: 15 },               // елемент з id: 15
  { id: -1 },               // елемент з id: -1
  { id: 0 },                // елемент з id: 0
  { id: 3 },                // елемент з id: 3
  { id: 12.2 },             // елемент з id: 12.2
  {},                       // порожній об'єкт
  { id: null },             // елемент з id: null
  { id: NaN },              // елемент з id: NaN
  { id: "undefined" },      // елемент з id: "undefined"
];

let invalidEntries = 0;      // лічильник неприпустимих записів

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

const arrByID = arr.filter(filterByID);

console.log("Фільтрований Масив\n", arrByID);
// Фільтрований Масив
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("Кількість неприпустимих записів =", invalidEntries);
// Кількість неприпустимих записів = 5

Приклад використовує функцію filter() для фільтрації вмісту масиву на основі критеріїв пошуку.

const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/**
 * Фільтрувати елементи масиву на основі критеріїв пошуку (query)
 */
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']

У цьому прикладі ми використовуємо функцію filter() для розріджених масивів. У першому випадку ми фільтруємо масив і шукаємо елементи, які дорівнюють undefined. Результатом буде масив, що містить лише undefined.

У другому випадку ми фільтруємо масив і виключаємо елементи, які дорівнюють 2. Результатом буде масив, що містить значення 1 та undefined.

console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]
console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]

У цьому прикладі ми використовуємо метод filter() на об'єкті, що не є масивом. Об'єкт arrayLike має властивість length, що вказує на його довжину, та декілька властивостей з ключами-індексами. Метод filter() використовується шляхом виклику Array.prototype.filter.call(), де перший аргумент - сам об'єкт arrayLike, а другий аргумент - функція-умова, яка перевіряє, чи значення менше або дорівнює "b". Результатом буде новий масив, що містить значення "a" та "b", оскільки вони задовольняють умову фільтрації.

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: "a", // ігнорується методом filter(), оскільки length дорівнює 3
};
console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));
// [ 'a', 'b' ]

Приклад демонструє поведінку методу filter() підчас модифікації масиву.

// Зміна кожного слова
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += " extra";
  return word.length < 6;
});

console.log(modifiedWords);
// Зверніть увагу, що є три слова довжиною менше 6, але оскільки вони були змінені, повертається лише одне
// ["spray"]

// Додавання нових слів
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
  arr.push("new");
  return word.length < 6;
});

console.log(appendedWords);
// Виконується умова лише для трьох слів, навіть якщо сам масив `words` тепер містить набагато більше слів довжиною менше 6
// ["spray", "limit", "elite"]

// Видалення слів
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
  arr.pop();
  return word.length < 6;
});

console.log(deleteWords);
// Зверніть увагу, що 'elite' навіть не було отримано, оскільки воно було видалено з масиву 'words' до того, як filter міг досягти його
// ["spray", "limit"]