Array.prototype.filter()

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

Спробуйте його в дії

Синтаксис

filter(callbackFn)
filter(callbackFn, thisArg)

Параметри

callbackFn

Функція до виконання над кожним елементом у масиві. Вона повинна повертати істинне значення, щоб зберегти елемент у результівному масиві, а інакше – хибне. Ця функція викликається із наступними аргументами:

element

Поточний елемент масиву, що опрацьовується функцією.

index

Індекс елементу, що опрацьовується.

array

Початковий масив, на якому було викликано filter().

thisArg Необов'язкове

Значення для використання як this при виконанні callbackFn. Більше про це в ітеративних методах.

Повернене значення

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

Опис

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

callbackFn закликається лише на тих індексах масиву, які мають присвоєні значення. Вона не закликається для порожніх комірок в розріджених масивах.

Метод filter() є узагальненим. Він лишень очікує, що значення this має властивість length, а також властивості з цілочисловими ключами.

Приклади

Відфільтровування малих значень

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

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

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// відфільтрований результат має [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]

Відсіювання некоректних елементів із JSON

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

const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { 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 = ["яблуко", "банан", "виноград", "манго", "апельсин"];

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

console.log(filterItems(fruits, "ан")); // ['банан', 'манго']
console.log(filterItems(fruits, "ин")); // ['виноград', 'апельсин']

Використання третього аргументу callbackFn

Аргумент array корисний тоді, коли є потреба звернутися до іншого елемента масиву, особливо тоді, коли немає змінної, яка посилається на цей масив. Наступний приклад спочатку використовує map() для виділення з кожного імені числового ідентифікатора, а потім використовує filter() для вибору тих, що більші за сусідів.

const names = ["JC63", "Bob132", "Ursula89", "Ben96"];
const greatIDs = names
  .map((name) => parseInt(name.match(/[0-9]+/)[0], 10))
  .filter((id, idx, arr) => {
    // Без аргумента arr немає способу легко звернутися до
    // проміжного масиву без збереження його в змінну.
    if (idx > 0 && id <= arr[idx - 1]) return false;
    if (idx < arr.length - 1 && id <= arr[idx + 1]) return false;
    return true;
  });
console.log(greatIDs); // [132, 96]

Аргумент array не є масивом, що створюється – немає способу звернутися до масиву, що створюється, з функції зворотного виклику.

Використання filter() на розріджених масивах

filter() пропустить порожні комірки.

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

Виклик filter() на об'єктах-немасивах

Метод filter() зчитує з this властивість length, а потім звертається до кожної властивості, чий ключ – невід'ємне ціле число, менше за length.

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' ]

Специфікації

Сумісність із браузерами

Дивіться також

• Поліфіл методу Array.prototype.filter у складі core-js
• Посібник Колекції з індексами
• Array
• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.map()
• Array.prototype.some()
• Array.prototype.reduce()
• TypedArray.prototype.filter()