Frontend | Вопросы собесов

Как работают map, reduce и filter ?

Спросят с вероятностью 7%



map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом.



Метод map



Создает новый массив, в котором каждый элемент является результатом вызова предоставленной функции на каждом элементе исходного массива.



Как он работает



✅Итерирует по каждому элементу массива.

✅Применяет к каждому элементу функцию.

✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled.



Метод reduce



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



Как он работает



✅Итерирует по каждому элементу массива.

✅Применяет к каждому элементу функцию, которая обновляет аккумулятор.

✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0.



Метод filter



Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true.



Как он работает



✅Итерирует по каждому элементу массива.

✅Применяет к каждому элементу функцию-условие.

✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];

const even = numbers.filter(num => num % 2 === 0);

console.log(even); // [2, 4]

В этом примере filter создает новый массив, содержащий только четные числа из массива numbers.



✅map: создает новый массив, преобразуя каждый элемент по заданной функции.

✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу.

✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию.



Все три метода делают код более читаемым и декларативным, облегчая работу с массивами.



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент



🔐 База собесов | 🔐 База тестовых