MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Array.prototype.filter()

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

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

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// відфільтрований масив [12, 130, 44]

Синтакс

var new_array = arr.filter(callback[, thisArg])

Параметри

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

Значення, яке повертається

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

Опис

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

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

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

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

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

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

Приклади

Фільтрація всіх малих значень

Наступний приклад використовує метод filter(), щоб відфільтрувати всі елементи масиву, які нижче 10.

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

var filtered = [12, 5, 8, 130, 44].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)) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

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

console.log('Number of Invalid Entries = ', invalidEntries); 
// Кількість невалідних елементів = 4

Поліфіл

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

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) {
        var val = t[i];

        // Примітка: Технічно, тут повинен бути Object.defineProperty на
        //           наступний індекс, оскільки push може залежати від
        //           полів на Object.prototype і Array.prototype. Але цей
        //           метод новий, і колізії можуть бути рідкісним явищем,
        //           тому використовуємо більш сумісну альтернативу.
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    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 2017 Draft (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Draft  

Сумісність з браузерами

Особливість Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базова підтримка (Yes) 1.5 (1.8) 9 (Yes) (Yes)
Особливість Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базова підтримка (Yes) (Yes) 1.0 (1.8) (Yes) (Yes) (Yes)

Дивитися також

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

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