Эффективное исключение элементов из массива методом .map()

Быстрый ответ

Чтобы пропустить элементы при работе с методом .map(), вы можете вернуть null или undefined, а затем применить метод .filter(Boolean). Это элегантный способ решения задачи:

const nums = [1, 2, 3, 4];
const evens = nums.map(n => n % 2 === 0 ? n : null).filter(Boolean);
console.log(evens); // [2, 4]

Продвинутые методы исключения элементов

Помимо возврата null или undefined, стоит обсудить и альтернативные подходы, которые выходят за рамки этого упрощённого варианта.

Использование метода .flatMap() для комбинирования map и filter

В ES2019 был добавлен метод .flatMap(), объединяющий функциональность .map() и .flat(). Он позволяет эффективно отфильтровывать элементы в процессе изменения массива.

const files = ['file1.js', 'file2.json', 'file3.js'];
// Извини, Json, но ты здесь лишний!
const scriptFiles = files.flatMap(f => f.endsWith('.json') ? [] : f);
console.log(scriptFiles); // ['file1.js', 'file3.js']

Подробнее об этом расскажет наш спикер на видео

Цепочка вызовов .filter() и .map()

Ясность и последовательность достигаются путём сочетания .filter() и .map(). Такой подход делает ваш код более читаемым и понятным.

const numbers = [1, 2, 3, 4, 5];
const squaredEvens = numbers.filter(n => n % 2 === 0).map(n => n * n);
console.log(squaredEvens); // [4, 16]

Использование метода reduce

.reduce() является хорошей альтернативой .map(), так как позволяет избежать создания промежуточных массивов.

const items = [-1, 0, 1, 2];
const positiveSquares = items.reduce((acc, item) => {
    // Мы рады видеть здесь только положительные числа, которые повышают настроение!
    if (item > 0) acc.push(item * item);
    return acc;
}, []);
console.log(positiveSquares); // [1, 4]

Визуализация

Визуализируем пропуск элемента в методе .map(), используя пример игры в классики:

Посмотрим на поле с указанными индексами:
0️⃣1️⃣2️⃣⏭️4️⃣5️⃣

Здесь мы пропускаем индекс 3.

Создание массива с пропущенным элементом выглядит так:

[🍏, 🍊, 🍇, 🍉, 🥝, 🍍].map((fruit, index) => {
    if (index === 3) return; // С арбузом что-то не так
    return fruit;
});

Итоговый массив без арбуза:

Было: [🍏, 🍊, 🍇, 🍉, 🥝, 🍍]
Стало: [🍏, 🍊, 🍇, undefined, 🥝, 🍍]

Анализ производительности

При выборе подхода важно учесть влияние на производительность. Например, .filter() влечёт за собой дополнительную итерацию данных, что может быть более затратно.

Тестирование производительности

Для сравнения различных подходов можно использовать инструменты профилирования или тесты производительности.

| Метод             | Описание                            | Производительность |
|-------------------|-------------------------------------|--------------------|
| .map().filter     | Два последовательных прохода массива | Медленнее          |
| .flatMap()        | Интегрированный однопроходный метод | Быстрее            |
| .reduce()         | Гибкий аккумулятор                  | Быстрее            |

Оптимизация решений

• Стрелочные функции могут быть не только короче по синтаксису, но и более производительны!
• Если возможно, уменьшайте количество операций и старайтесь минимизировать создание промежуточных массивов.
• Опытные разработчики могут использовать трансдьюсеры Рича Хикки для оптимизации и избегания лишних структур данных.
• Если вас интересуют "fmap" и "монадическое связывание", обратите внимание на библиотеки функционального программирования. Они предоставляют мощные и элегантные решения.

Поддержка актуальности и чистоты кода

Глубокое знание современного JavaScript поможет вам сделать ваш код более элегантным и изящным. Вот несколько советов по поддержанию чистоты и эффективности вашего кода:

Использование актуальных возможностей JavaScript

Повышайте качество вашего кода с помощью ES6, включающего стрелочные функции, деструктуризацию и шаблонные литералы, улучшающие его читаемость.

Расширение набора инструментов

Расширьте свой инструментарий утилитами, такими как Lodash или Ramda, которые содержат заранее написанные надежные методы для работы с массивами.

Постоянное обучение

Не переставайте изучать новые возможности JavaScript, такие как цепочечный вызов (?.) и оператор объединения с null (??). Это поможет вам пересмотреть подход к работе с массивами и достичь более грациозной реализации.

Полезные материалы

1. Array.prototype.map() – JavaScript | MDN — подробная документация о методе Array's map() от MDN Web Docs.
2. Методы массивов — учебный материал по JavaScript, объясняющий методы работы с массивами, включая filter(), который необходим для исключения элементов с помощью map().
3. Документация Lodash — справочник по библиотеке Lodash и её методам, например _.compact(), помогающим очистить массив от "ложных" значений.
4. Map – Part 2 of Functional Programming in JavaScript — видеолекция о функциональном программировании с акцентом на map() в JavaScript.
5. The JavaScript Reduce Method Explained — статья о методе Array.prototype.reduce(), который может быть использован вместо map().
6. Функции высшего порядка :: "Говорящий JavaScript" — глава из книги "Говорящий JavaScript", посвященная функциям высшего порядка.