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