Условное добавление элементов в массив JavaScript

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

Для условного добавления элементов в массив можно воспользоваться оператором расширения JavaScript (...) в связке с тернарным оператором:

const isActive = true;
const items = [
  'fixed-item',
  ...(isActive ? ['bonus-item'] : [])
];

Элемент 'bonus-item' будет добавлен в массив только в том случае, если isActive возвращает истинное значение. Данный метод позволяет гибко и быстро задать состав массива.

Исключение нежелательных элементов при помощи filter(Boolean)

Для того чтобы избавить массив от так называемых «ложных» значений (false, null, 0, пустые строки и т.д.), можно использовать метод filter(Boolean). Он выступит в роли фильтра:

let noisyArray = ['goodItem', '', false, 'betterItem', null, 0, 'bestItem'];
let cleanedArray = noisyArray.filter(Boolean); // ['goodItem', 'betterItem', 'bestItem']

Таким способом можно «очистить» массив без использования сложных условных конструкций.

Простое условное добавление при помощи оператора &&

Если требуется добавить в массив только один условный элемент, можно использовать логический оператор И (&&):

const hasBonus = true;
let goodies = [
  'base-goodie',
  hasBonus && 'bonus-goodie'
].filter(Boolean);

Если hasBonus возвращает ложное значение, то 'bonus-goodie' в массив не попадёт. Тем не менее, стоит использовать фильтрацию для исключения «ложных» значений.

Комбинация условий с динамическими массивами

JavaScript позволяет добавлять или пропускать группы элементов в массиве в зависимости от выполняемых условий. Это особенно удобно при сложной логике работы приложения:

const hasMembership = true;
const hasCoupon = false;

let cartElements = [
  'ShoppingItem1',
  ...(hasMembership ? ['member-discount'] : []),
  ...(hasCoupon ? ['coupon-discount'] : []),
  'ShoppingItem2',
];

Динамичная структура массива делает его поддержку и изменение более простыми и удобными.

Удаление null и undefined из массива

Часто возникает необходимость удалить из массива элементы со значениями null и undefined. Важно правильно настроить фильтрацию для этого случая:

let arrayWithNulls = ['foo', null, 'bar', undefined, 'baz'];
let pristineArray = arrayWithNulls.filter(item => item != null); // ['foo', 'bar', 'baz']

Описанный подход исключает только null и undefined, не затрагивая прочие «ложные» значения.

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

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

let willSunBake = true;
let willSnowPour = false;

let tripGear = [
  '👕',
  '🩳',
  ...(willSunBake ? ['🕶️', '🧴'] : []),
  ...(willSnowPour ? ['🧣', '🧤'] : []),
];

В зависимости от условий состав вещей в чемодане меняется:

Прогноз: 🌞
Багаж: [👕, 🩳, 🕶️, 🧴]

Прогноз: ❄️
Багаж: [👕, 🩳, 🧣, 🧤]

Главное — брать с собой только необходимое.

Объединение массивов

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

let firstHalf = ['beginning', 'still going'];
let additionalItems = true ? ['keep going'] : [];
let finalSequence = firstHalf.concat(additionalItems);

Это является безопасным способом объединения массивов.

Избегаем ошибок с ложными значениями

Следите за ловушками «ложных» значений, чтобы избежать некорректных результатов. Всегда тщательно проверяйте условия:

let probabilityScores = [0, 0.7, 0.9, '', false];
let realisticScores = probabilityScores.filter((score) => score || score === 0);

Например, значение 0 является корректным, хотя и относится к «ложным» в JavaScript.

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

1. Array – JavaScript | MDN — подробная документация и примеры работы с массивами в JavaScript.
2. Arrays — доступное руководство по работе с массивами, включая условные элементы.
3. Xpath – check all elements have sub elements – Stack Overflow — реальные примеры создания массивов с условными элементами на Stack Overflow.
4. ECMAScript 6: New Features: Overview and Comparison — обзор особенностей оператора распространения в ES6.
5. Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code — объяснение работы с функциями высшего порядка в JavaScript для управления массивами.