JavaScript метод filter()

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

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

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

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

thisValue задаёт this при вызове обычной функции обратного вызова. Стрелочная функция использует this из внешней области и игнорирует этот аргумент. Сравните пример с thisValue.

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

Спецификация: ecma262

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьjavascript.builtins.Array.filter
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`filter`	✓1	✓12	✓1.5	✓9.5	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

array.filter(callback);
array.filter(callback, thisValue);

Спецификация

ECMAScript: Array.prototype.filter.

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

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

Возвращаемое значение

Новый массив подходящих элементов; если совпадений нет — пустой массив. Копирование поверхностное.

Особенности

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

Примеры, попробуйте сами

Как отобрать элементы по условию

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

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

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

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

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

Как использовать thisValue в filter()

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

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

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) // выводим значение переменной filtered равное [10, 20, 12]