Array.prototype.filter()

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

Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію https://github.com/mdn/interactive-examples.

Синтаксис

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:

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

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); 
// filtered дорівнює [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;

        var kValue;
        if (thisArg === undefined){
          while (++i !== len){
            // перевіряє, чи заданий ключ
            if (i in this){
              kValue = t[i]; // у цьому випадку t змінюється у функції callback
              if (func(t[i], i, t)){
                res[c++] = kValue;
              }
            }
          }
        }
        else {
          while (++i !== len) {
            // перевіряє, чи заданий ключ
            if (i in this){
              kValue = t[i];
              if (func.call(thisArg, t[i], i, t)){
                res[c++] = kValue;
              }
            }
          }
        } 

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

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

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

Див. також

• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()