We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

Синтаксис

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

Параметри

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

Вертає

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

Опис

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

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

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

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

Сам метод filter() не змінює масив, на якому його викликано, втім усередині функції callback це можливо.

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

Приклади

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

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

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

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

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

Фільтрування об'єктів

Розгляньмо складніший приклад, де масив містить не прості величини, а об'єкти, деякі з яких є потреба вилучити з масива. Скористаймося з можливостей метода filter(), щоб з множини об'єктів лишити тільки ті, що мають належне значення деякої властивості id:

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

function isValidId(value) {
  if (typeof(value) === 'number') {
    // То має бути ціле число більше від нуля.
    return value > 0 && Math.floor(value) === value;
  }
  return false;
}

var validatedItems = items.filter(function(item) {
  return isValidId(item.id);
});

// Отриманий масив: [{id: 15}, {id: 3}, {id: 144}]
console.log('Отриманий масив: ', validatedItems);

// Вилучено елементів: 7
console.log('Вилучено елементів: ' + (items.length - validatedItems.length));

Якщо масив змінено під час перебору, деякі елементи може бути пропущено

Наведений приклад виводить у консоль отриманий фільтруванням масив ['перший', 'другий', 'четвертий']. Й хоча присудок callback завжди вертає значення true, отриманий масив все ж втратить один елемент.

Коли перебір сягне другого елемента (що має значення "другий"), виклик words.shift() видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного) і "третій" таким чином буде пропущено:

var words = ['перший', 'другий', 'третій', 'четвертий'];

var filtered = words.filter(function(word) {
  if (word === 'другий') {
    words.shift();
  }
  return true;
});

console.log(filtered);  // виводить ['перший', 'другий', 'четвертий']

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

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

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;
        var res = new Array(len);  // preallocate array
        var t = this;
        var c = 0;
        var i = -1;

        if (thisArg === undefined) {
            while (++i !== len) {
                // checks to see if the key was set
                if ((i in this) && func(t[i], i, t)) {
                    res[c++] = t[i];
                } 
            }
        } else {
            while (++i !== len) {
                // checks to see if the key was set
                if ((i in this) && func.call(thisArg, t[i], i, t)) {
                    res[c++] = t[i]; 
                } 
            }
        }

        res.length = c; // shrink down array to proper size
        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  

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes1.59 Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes

Див. також

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

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