Метод Array Filter в JavaScript

В этом руководстве вы узнаете, как использовать метод JavaScript Array filter() для фильтрации элементов в массиве.

Одной из наиболее распространенных задач при работе с массивом является создание нового массива, содержащего подмножество элементов исходного массива.

Предположим, у вас есть массив объектов города, где каждый объект содержит два свойства: name и population.

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];

Чтобы найти город с населением более 3 миллионов человек, вы обычно перебираете элементы массива с помощью цикла for и проверяете, удовлетворяет ли значение свойства population условию, например так:

let bigCities = [];
for(let i = 0; i < cities.length; i++) {
    if(cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);

Выход:

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]

Массив JavaScript предоставляет метод filter(), который позволяет вам выполнить эту задачу более коротким и четким способом.

В следующем примере возвращается тот же результат, что и в приведенном выше примере:

let bigCities = cities.filter(function(e) {
    return e.population > 3000000;
});
console.log(bigCities);

В этом примере мы вызываем метод filter() объекта массива cities и передаем функцию, которая проверяет каждый элемент.

Внутри функции мы проверяем, превышает ли population каждого города в массиве 3 миллиона человек. Если это так, функция возвращает true или false в противном случае.

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

Начиная с ES6, вы можете использовать функцию стрелки, чтобы сделать ее более лаконичной:

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);

Метод в деталях

Синтаксис:

arrayObject.filter(callback, contextObject);

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

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

Метод filter() принимает два именованных аргумента: функцию callback и необязательный объект.

Как и другие итерационные методы объекта Array, такие как every(), some(), map() и forEach(), функция callback имеет следующую форму:

function callback(currentElement, index, array){
   // ...
}

Функция callback принимает три аргумента:

• Аргумент currentElement — это текущий элемент массива, который обрабатывается функцией callback.
• index currentElement, который обрабатывается функцией callback.
• Проходимый объект array.

Аргументы index и array необязательны.

Аргумент contexObject метода filter() является необязательным. Если вы передадите this значение, вы можете сослаться на него, используя ключевое слово this  внутри функции callback.

Важно отметить, что метод не изменяет исходный массив.

Другие примеры

Поскольку метод filter() возвращает новый массив, вы можете связать результат с другими методами массива, такими как sort() и map().

Например, ниже показано, как объединить три метода: filter(),sort(), и map():

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));

Выход:

Philadelphia:1526006
Houston:2099451
Chicago:2695598

Как это работает.

• Во-первых, отфильтруйте города с населением менее 3 миллионов человек, используя метод filter().
• Во-вторых, отсортируйте полученные города по населению в порядке убывания, используя метод sort().
• В-третьих, выведите элемент массива на консоль с помощью метода map().

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

function isInRange(value) {
    if(typeof value !== 'number') {
        return false;
    }
    return value >= this.lower && value <= this.upper;
}

let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];

let range = {
    lower: 1,
    upper: 10
};

let numberInRange = data.filter(isInRange, range);

console.log(numberInRange); // [10, 1, 5]

Выход:

[ 10, 1, 5 ]

Как это работает.

• Во-первых, определите isInRange(), которая проверяет, является ли ее аргумент числом и находится ли он в диапазоне, заданном lower и upper свойствами объекта.
• Затем определите массив смешанных данных, который содержит числа, строки и неопределенные значения.
• Затем определите объект range с двумя свойствами: lower и upper.
• После этого вызовите методы filter() массива data и передайте isInRange() и объект range. Поскольку мы передаем объект range, внутри функции isInRange() ключевое слово this ссылается на объект range.
• Наконец, покажите массив результатов в консоли.