Отбор элементов: filter()

В уроках про циклы и объекты вы написали немало циклов, которые перебирают массив: чтобы отобрать часть его элементов, собрать их названия или найти один из них. Программам это нужно постоянно, поэтому у массивов есть методы, которые делают это за вас, каждый в одну строку. Каждый метод в этом уроке заменяет цикл, который вы уже умеете писать.

Вот цикл, который отбирает температуры выше 20 градусов:

const temperatures = [18, 24, 27, 15, 21];

const warm = [];
for (const temperature of temperatures) {
    if (temperature > 20) {
        warm.push(temperature);
    }
}
console.log(warm);

[24, 27, 21]

Метод filter() делает то же самое в одну строку:

const warm = temperatures.filter((temperature) => temperature > 20);
console.log(warm);

[24, 27, 21]

Аргумент filter() — функция, здесь это стрелочная функция (temperature) => temperature > 20. filter() вызывает её по одному разу для каждого элемента массива и передаёт ей элемент как аргумент. Если функция возвращает true, элемент попадает в новый массив. Если возвращает false, элемент пропускается. Так что функция — это условие из if в цикле. Функция, которую вы передаёте другой функции, чтобы та её вызвала, называется колбэком (функцией обратного вызова).

filter() не изменяет исходный массив: в temperatures по-прежнему все пять чисел. Он возвращает новый массив, который вы сохраняете в переменную. Если ни один элемент не подходит под условие, новый массив пустой: [].

В массиве объектов колбэк получает по одному целому объекту за раз, как переменная цикла в for...of:

const animals = [
    { name: "Бим", species: "слон", age: 12 },
    { name: "Лео", species: "лев", age: 6 },
    { name: "Гоша", species: "жираф", age: 4 },
    { name: "Пип", species: "пингвин", age: 2 }
];

const young = animals.filter((animal) => animal.age < 5);
console.log(young);
console.log("Молодых животных:", young.length);

[{ name: "Гоша", species: "жираф", age: 4 }, { name: "Пип", species: "пингвин", age: 2 }]
Молодых животных: 2

Длина нового массива показывает, сколько элементов подошли под условие. Это приём подсчёта из урока про циклы, только в одну строку.

Типичные ошибки:

• Результат не используется. temperatures.filter((temperature) => temperature > 20); на отдельной строке создаёт новый массив и выбрасывает его, а temperatures остаётся прежним. Сохраните результат в переменную или выведите его.
• Фигурные скобки без return, как в уроке про функции. (temperature) => { temperature > 20 } возвращает undefined, а это считается false, поэтому новый массив всегда пустой.