Як працює метод filter() в JavaScript

Що таке метод filter() у JavaScript

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

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

Синтаксиc для методу filter()

Загальний вид запису методу виглядає так:

myArray.filter(умова фільтрації);

myArray.filter(callbackName, conObject);

myArray.filter(callbackfunctionName(element, index, array) {...}, conObject);

Де:

conObject — об’єкт для вказівки додаткового контексту фільтрації, такого, як дані або набір даних;

myArray — масив, що перебирається;

index — індекс елемента масиву myArray; 

element — компонент масиву, що обробляється filter().

Якщо записати за допомогою стрілочної функції, вигляд стане компактнішим:

myArray.filter(element  =>  умова фільтрації);

Параметри методу

Нагадаємо, колбек — це будь-яка функція, яка передається як аргумент іншої функції. Колбек filter() підтримує такі аргументи:

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

Варіанти застосування filter()

Відбір за значеннями

Розглянемо завдання. Є товар, який має такі властивості: вага (weight) та назва (vendor). На підставі цієї інформації ми маємо справу з масивом products:

const products = [     
{vendor: 'Vendor1', weight: 2},
{vendor: 'Vendor2', weight: 5},
{vendor: 'Vendor3', weight: 14},
{vendor: 'Vendor4', weight: 11},
{vendor: 'Vendor5', weight: 12},
{vendor: 'Vendor6', weight: 8} 
];

Припустимо, ми хочемо відсортувати товар, який важить не більше 11 та вивести його в новий масив newProductsList. В принципі ми можемо обійтися без методу фільтрації. Для цього можна просто створити цикл:

const newProductsList = []; 
for (let i = 0; i < products.length; i++) {   
  if (products[i].weight < 12) {
   newProductsList.push(products[i]);
  } 
} 
console.log(newProductsList);

Але використання аналізованого методу суттєво спрощує завдання:

const newProductsList2 = products.filter(function(item) {
  return item.weight < 12;
});
console.log(newProductsList2);

Колбек-функція перевіряє елементи. Якщо вона повертає true після виявлення відповідності, то такий елемент поміщається в новий масив newProductsList2 . Якщо ж повертається false — нічого не відбувається.

За допомогою альтернативного запису можна зробити код ще коротшим:

newProductsList3 = products.filter(e => e.weight < 12);
console.log(newProductsList3);

Знаходження всіх простих чисел у масиві

Іноді потрібно застосувати декілька умов одночасно. Щоб новий масив відповідав відразу декільком умовам, можна писати так:

 return  x>=0 && x<=4 &&  index%2==0;  

При цьому до нової групи потраплять лише парні індекси, значення яких від 0 до 4 включно.

Щоб визначити, які числа в групі прості, ми повинні проітерувати елементами, застосувавши до кожного з них перевірку — чи це число ділиться тільки на одиницю і саме на себе.

Це реалізується так:

const randomarray = [-311, -32, -1, 0, 1, 22, 23, 24, 75, 86, 47, 85, 96, 170, 1431, 1571, 1723];
function searchingPrime(element) {
for (let j = 2; element > j; j++) {
if (element % j == 0) {
return false;
}
}
return element > 1;
}
console.log(randomarray.filter(searchingPrime)); //[ 23, 47, 1571, 1723 ]

Відсіювання небажаних полів у JSON

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

Нижче наведено сценарій такої обробки масиву, де залишаються лише коректні значення id:

let fields = [
  { id: 17 },
  { id: -6 },
  { id: null },
  { },
  { id: 0 },
  { id: 8 },
  { id: 13.4 },
  { id: 'err'},
  { id: 'undefined' }
  ]
    let uncorrectEntries = 0
    function filterID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
  return true
  }
  uncorrectEntries++
  return false;
  }
    let fieldsByID = fields.filter(filterID)
    console.log('Коректна структура полів\n', fieldsByID)
  // Коректна структура полів
  // [ { id: 17 }, { id: -6 }, { id: 8 }, { id: 13.4 } ]
    console.log('\nЧисло помилкових елементів = ', uncorrectEntries)
  // Число помилкових елементів = 5

Пошук елементів масиву

Найбільш очевидне застосування інструменту фільтрації — пошук. Коли потрібно знайти слова в масиві за ключовим запитом, ми можемо застосувати filter() із зазначенням критерію пошуку:

let words = ['Highload', 'today', 'oddity', 'HIMARS', 'Caesar','Caesar','army'];
/**
 *Сортування згідно правил пошукового запиту(myquery)
*/function filterItems(myquery) {
  return words.filter(function(el) {
      return el.toLowerCase().indexOf(myquery.toLowerCase()) > -1;
  })
}
console.log(filterItems('hi')); // [ 'Highload', 'HIMARS' ]
console.log(filterItems('ar')); // [ 'HIMARS', 'Caesar', 'Caesar', 'army' ]

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

Розрідженими називають ті масиви, в яких є позиції, не зайняті елементами. Коли компоненти такого масиву опущені, ми маємо проблему — пам’ять для елементів виділена і відбувається її витік. З проблемою доводиться боротися різними способами і один із варіантів її усунення — застосування методу filter(). 

Цей інструмент фільтрації відсіює порожні елементи в розріджених масивах і повертає все ущільнену структуру. Для просіювання розрідженого масиву необхідно виконати код:

var dense = sparse.filter(function() { return true; });

Для ущільнення структури та усунення позицій з undefined і null можна також застосовувати інструмент filter():

somearray = somearray.filter(function(x) { return х !== undefined && х != null; });

Редагування масиву (корекція значень, додавання та видалення елементів)

Розглянемо кілька сценаріїв редагування набору елементів з використанням методу filter(). 

Внесення змін до елементів масиву:

let originalwords = ['today', 'unlimit', 'awesome', 'definitely', 'Oh', 'yesterday']
const newmodifiedWords = originalwords.filter( (word, index, arr) => {
  arr[index+1] +=' high'
  return word.length < 8
})

console.log(newmodifiedWords)

Зазначимо, що в нашій групі слів є чотири слова з довжиною менше 8. Але оскільки вони були відредаговані, на виході ми отримуємо лише два елементи: today і Oh high.

Тепер подивимося, як виглядає приклад додавання нових значень до існуючих:

mywords = ['ray', 'cat', 'bass', 'awesome','wednesday', 'futurama']
const addedWords = mywords.filter( (word, index, arr) => {
    arr.push('work')
    return word.length< 5
})
console.log(addedWords)

У цьому випадку лише три елементи відповідають умові, хоча масив, після внесення змін включає набагато більше елементів, що складаються з менше ніж п’яти символів: [ 'ray', 'cat', 'bass' ].

Приклад видалення елементів:

listwords = ['Highload', 'today', 'news', 'editor', 'futurama', 'none']
console.log(listwords, 'оригінальний зміст')
const excludeWords = listwords.filter( (slovo, index, lst) => {
  lst.pop()
  return slovo.length < 6
})
console.log(listwords, 'зміст після обробки')
//[ 'Highload', 'today', 'news' ]
console.log(excludeWords, 'слова із числом символів менше шести')
//[ 'today', 'news' ]

Зауважте, що слово `none` не враховується, оскільки видалено з `listwords` до того, як фільтр міг бути до нього застосований.

Висновок

Тепер ви знаєте, для чого потрібен метод filter() і як його використовувати в операціях із наборами елементів: 

• інструмент застосовується до масиву та слугує для фільтрації його контенту;
• не вносить змін у вихідний об’єкт — натомість генерується інший масив.

Бажаємо вдалої та приємної практики!