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

Синтаксис

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

Параметри

callback
Функція-присудок, що перевіряє кожен елемент масиву та повертає true, щоб зберегти елемент, або false, щоб видалити. Приймає три аргументи:
element
Значення чергового елемента масиву.
indexOptional
Індекс чергового елемента в масиві.
arrayOptional
Масив, до якого застосовано filter().
thisArgOptional
Значення, що використовується як this, коли викликається callback.

Вертає

Новий масив з елементами, що пройшли пере́вірку. Якщо жоден елемент не пройшов перевірку, повертає порожній масив.

Опис

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

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

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

Якщо для filter() вказано параметр thisArg, його буде використано як this для функції callback. Інакше буде використано значення undefined. Зрештою, значення this для функції callback визначатиметься відповідно до загальних правил.

Метод filter() не змінює масив, на якому його викликано.

Множина індексів елементів, що їх перебиратиме filter(), з'ясовується ще до першого виклику callback. Елементи, додані після здійснення виклику filter(), буде знехтувано. Якщо наявні елементи масиву було змінено або видалено, до функції callback потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом callback. Видалені елементи опрацьовано не буде.

Приклади

Вилучення замалих чисел

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

var array = [12, 5, 8, 130, 44];

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

console.log(array.filter(isBigEnough)); 
// виводить [12, 130, 44]

Фільтрування неправильних записів з JSON

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

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Відфільтрований масив\n', arrByID); 
// Відфільтрований масив
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Кількість неправильних записів = ', invalidEntries); 
// Кількість неправильних записів = 5

Пошук у масиві

Цей приклад використовує filter(), щоб відфільтрувати масив за пошуковим критерієм:

var fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];

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

console.log(filterItems(fruits, 'ко'));  // ['яблуко', 'кокос']
console.log(filterItems(fruits, 'ан'));  // ['банан', 'манго']

Реалізація ES2015

const fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];

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

console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос']
console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']

Запасний варіант (поліфіл)

Метод filter() був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наведений нижче код на початку ваших скриптів, це дозволить використовувати filter() у версіях ECMA-262, які не підтримують його початково. Цей алгоритм є точним еквівалентом впровадженого у 5-й версії ECMA-262, за умови, що fn.call відповідає початковому значенню Function.prototype.bind(), і Array.prototype.push() не було змінено.

if (!Array.prototype.filter) {
    Array.prototype.filter = function(func, thisArg) {
        'use strict';
        if (!((typeof func === 'Function' || typeof func === 'function') && this) )
            throw new TypeError(); 

        var len = this.length >>> 0,
            res = new Array(len),  // попередньо створений масив
            t = this, c = 0, i = -1;
        if (thisArg === undefined){
          while (++i !== len){
            // перевіряє, чи існує ключ
            if (i in this){
              if (func(t[i], i, t)){
                res[c++] = t[i];
              }
            }
          }
        }
        else {
          while (++i !== len) {
            // перевіряє, чи існує ключ
            if (i in this){
              if (func.call(thisArg, t[i], i, t)){
                res[c++] = t[i];
              }
            } 
          } 
        } 

        res.length = c; // зменшити масив до правильного розміру
        return res;
    };
}

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

Специфікація Статус Коментар
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard Початкова виознака. Запроваджено у JavaScript 1.6.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Draft

Підтримка веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
filterChrome Full support YesEdge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

Див. також

Мітки документа й учасники

Зробили внесок у цю сторінку: asmforce, DariaManko, osevastianovych, mdnwebdocs-bot, piton13
Востаннє оновлена: asmforce,