JavaScript метод .filter()

Определение и применение

JavaScript метод .filter() позволяет создать новый массив, элементы которого соответствуют условию заданному в пререданной функции (для которых функция возвращает true). Элементы массива, которые не соответствуют условию в переданной функции (для которых функция возвращает false) пропускаются и не включаются в новый массив отфильтрованных элементов.

Обращаю Ваше внимание, что функция обратного вызова, переданная в качестве параметра метода .filter() не будет вызвана для удалённых, или пропущенных элементов массива. Метод .filter() не изменяет массив для которого он был вызван .

Диапазон элементов, обрабатываемых с помощью метода .filter() устанавливается перед первым вызовом функции обратного вызова. Если элементы были добавлены к массиву после её вызова, то на таких элементах функция вызвана не будет.

Если значения существующих элементов массива изменяются в момент выполнения, то в качестве передаваемого значения функции будет значение в тот момент времени, когда метод .filter() посещает их. Если элементы удаляются до их посещения, то такие элементы посещены не будут.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`.filter()`	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

// только с callback функцией
var filteredArray = array.filter( function( currentValue, index, arr ) ); 

// с использованием объекта, на который может ссылаться ключевое слово this
var filteredArray = array.filter( function( currentValue, index, arr ), thisValue );

Версия JavaScript

ECMAScript 5.1 (Реализовано в JavaScript 1.6)

Значения параметров

Параметр	Описание
function	Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве. Функция принимает следующие параметры: *currentValue* - значение текущего элемента *index* - индекс массива текущего элемента. *arr* - массив, к которому принадлежит текущий элемент (по которому происходит проход). Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Обязательный параметр.
thisValue	Объект, на который может ссылаться ключевое слово this внутри функции обратного вызова. Если параметр thisValue не используется, то в качестве значения this будет использоваться undefined (в конечном счете this будет зависеть от обычных правил контекста выполнения функции). Необязательный параметр.

Параметр

Описание

function

Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве. Функция принимает следующие параметры:

currentValue - значение текущего элемента
index - индекс массива текущего элемента.
arr - массив, к которому принадлежит текущий элемент (по которому происходит проход).

Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Обязательный параметр.

thisValue

Объект, на который может ссылаться ключевое слово this внутри функции обратного вызова. Если параметр thisValue не используется, то в качестве значения this будет использоваться undefined (в конечном счете this будет зависеть от обычных правил контекста выполнения функции). Необязательный параметр.

Пример использования

В следующем примере с использованием JavaScript метода .filter() мы рассмотрим как получить новый массив, который содержит элементы больше 50:

var array = [10, 20, 130, 70, 80, 12]; // инициализируем переменную, содержащую массив числовых значений 

var filtered = array.filter( // вызываем переданную функцию один раз для каждого элемента массива, формируя новый массив
  function checkNumber( currentValue ) {
    return currentValue > 50;
  }
);
// аналогично с использованием стрелочной функции
let filtered = array.filter( currentValue => currentValue > 50 );

console.log( filtered ); // выводим значение переменной filtered равное [130, 70, 80]

В следующем примере мы рассмотрим использование второго аргумента метода .filter(), который указывает на объект, на который мы можем ссылаться с использованием ключевого слова this внутри функции обратного вызова:

var array = [10, 20, 130, 70, 80, 12]; // инициализируем переменную, содержащую массив числовых значений 
var myObject = { // инициализируем переменную, содержащую объект 
  test: function( currentValue ) { // метод объекта, который принимает значение  
    return currentValue < 50; //  возвращаем логическое значение, определяющее результат проверки 
  }
};

var filtered = array.filter( // вызываем переданную функцию один раз для каждого элемента массива, формируя новый массив
  function( currentValue ) {
    return this.test( currentValue ); //  возвращаемое значение метода test объекта myObject
  }, myObject // объект, на который мы ссылаемся с использованием ключевого слова this 
);

console.log( filtered ); // выводим значение переменной squared равное [10, 20, 12]

JavaScript Array