Как работает метод 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() и как его использовать в операциях с наборами элементов: 

• инструмент применяется к массиву и служит для фильтрации его контента;
• не вносит изменений в исходный объект — вместо этого генерируется другой массив.
Курс Python developer від Mate academy.
Опануйте Python та отримайте свою першу роботу в IT! Ми навчимо вас усім необхідним навичкам та допоможемо з працевлаштуванням.
Отримати знижку на курс

Для закрепления материала мы рекомендуем вам посмотреть обучающее видео, рассказывающее о методе для фильтрации в JavaScript: