Як працює метод 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()
і як його використовувати в операціях із наборами елементів:
- інструмент застосовується до масиву та слугує для фільтрації його контенту;
- не вносить змін у вихідний об’єкт — натомість генерується інший масив.
Бажаємо вдалої та приємної практики!
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: