JS метод Array.filter()

Опис

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

Метод filter() пропонує ітеративний підхід. Його суть полягає в використанні callback-функції, яка повинна повертати значення true або false для кожного елемента масиву. Ті елементи, які "пройшли" умову (повернули true), зберігаються в результуючому масиві.

Приклад використання:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // Виведе: [2, 4, 6]

У даному прикладі створюється масив numbers, який містить цілі числа від 1 до 6. Потім за допомогою методу filter() з цього масиву вибираються лише парні числа. Результат фільтрації зберігається в новому масиві evenNumbers.

Цікаво, що filter() є методом, який повертає копію. Отже, він не змінює початковий масив, а замість цього формує новий масив. Проте, функція, передана як callbackFn, може модифікувати масив. Зверніть увагу:

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

правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

filter(callbackFn)
filter(callbackFn, thisArg)

Параметри

callbackFn

Функція, яка виконується для кожного елемента масиву. Вона повинна повертати значення істиності (true), щоб зберегти елемент у результуючому масиві, а в протилежному випадку - значення хибності (false).

Функція callbackFn викликається з наступними аргументами:

• element: поточний елемент, який обробляється у масиві;

• index: індекс поточного елемента, який обробляється у масиві;

• array: масив, на якому було викликано метод find().

автор: Bond

правити

thisArg

Значення, яке використовується як this під час виконання callbackFn.

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	3	9.5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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]

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

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

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

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

// Зміна кожного слова
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"]