Проверка на пустоту или отсутствие массива в JavaScript
Быстрый ответ
Ниже указан простой способ определения, пуст ли массив, или его не существует:
if (!arr || !arr.length) {
// Видимо, массив решил сделать перерыв 🌴
}
Эта строка кода использует принцип логического ИЛИ. Она проверит, не равен ли arr
undefined
или null
, а также, равна ли длина массива нулю, что в любом случае будет свидетельствовать о том, что массив пуст.
Это массив, и он не пуст?
Перед тем как определить, пуст ли массив, следует убедиться, что перед нами именно массив:
if (!Array.isArray(arr) || !arr.length) {
// Это не массив! Может быть, самолёт? ✈️ Но точно не массив! 😖
}
Метод Array.isArray(arr)
помогает проверить, является ли arr
действительным массивом, а не объектом, которым он маскируется.
Если вы цените простоту и удобство
Существует ещё один сжатый и лаконичный подход, применяющий опциональное цепное выражение (новшество из ECMAScript 2020):
if (!arr?.length) {
// Вероятно, массив как-то скрылся! 🧐
}
Внимание: неопределённость может стать проблемой!
Нижеуказанный код помогает избежать неожиданных ошибок, таких как TypeError:
if (arr !== undefined && !arr.length) {
// Помните о безопасности! Не забывайте проверку на undefined! 😉
}
Предпочитаете строгое сравнение?
Используйте строгие проверки для большей ясности и точности:
if (Array.isArray(arr) && arr.length !== 0) {
// Да, этот массив действительно существует и не пуст! ✨
}
Строгое сравнение (===
, !==
), в отличие от нестрогого (==
, !=
), не приводит типы и поэтому является более надёжным.
Выбор между надёжностью и прагматизмом
Применяйте наиболее надёжный метод для критически важных участков кода. В прочих ситуациях, требующих определения уровня заполнения массива, может быть достаточно более свободного подхода.
Осторожно: объекты, выдающие себя за массивы
Метод Array.isArray()
справляется со своей задачей на отлично, однако имейте в виду, что объекты со свойствами, похожими на свойства массивов, он не распознает:
function isReallyArray(arr) {
return Array.isArray(arr) || (arr && typeof arr === 'object' && typeof arr.length === 'number');
}
Эта функция позволяет отличить настоящий массив от объекта, который претендует на эту роль.
Защита с помощью TypeScript
С TypeScript можно перестать беспокоиться о потенциально неопределённых переменных:
function isEmptyArray(arr?: Array<any>): boolean {
return !arr || arr.length === 0;
}
В этой функции arr?
указывает на то, что arr
— это параметр, который может быть опущен, и в таком случае он будет обрабатываться как массив.
Открывайте для себя нововведения в JavaScript
Познакомьтесь с новыми стандартами ECMAScript, чтобы ваш код стал ещё более чистым и интуитивно понятным:
const isEmptyArray = arr => !arr?.length;
Стрелочная функция с опциональным цепным вызовом делает код современнее и эффективнее.
Визуализация
Сравнивайте код JavaScript с реальной ситуацией. Представьте Array как парковочное место:
Состояние парковки | Состояние массива | JavaScript код |
---------------------------|--------------------|------------------------------------------|
🚗 🚙 🚕 | Полный | `if (arr && arr.length > 0)` |
| | |
[Пустая парковка] | Пустой | `if (!arr || arr.length === 0)` |
Приведем пример:
const array = []; // Вот наше парковочное место (массив)!
// Проверяем, свободно ли парковочное место (массив)
if (!array || array.length === 0) {
console.log("Парковка свободна! Никаких автомобилей!");
} else {
console.log("На парковке нет места: кто-то припарковал здесь свой автомобиль!");
}
Теперь всё должно быть понятно. Переходим к следующей части.
Глубокое погружение: ловушки массивов и пути их обхода
Будьте готовы к неожиданностям, которые могут поджидать вас при работе с массивами!
Разреженные массивы: неполнота
Разреженные массивы — это как швейцарский сыр с дырками. Вот пример:
const sparseArray = [1,,3]; // У второго элемента нет значений — он как призрак. 👻
console.log(sparseArray.length); // Вывод: 3
Для борьбы с разреженными массивами проверяйте наличие элементов:
if (!sparseArray.some(element => element !== undefined)) {
// В массиве, похоже, не все элементы есть, как и в случае с исчезновением носков 😋
}
Ложные значения: истина в ложности
Массивы могут содержать ложные значения (0
, null
, ""
, ...), которые, несмотря на свою "ложность", будут считаться элементами массива:
const falsyValuesArray = [0, '', false, null]; // Обманчиво, не так ли?
Наша проверка на пустоту справедливо считает такой массив непустым. Впрочем, в зависимости от задачи, вам может потребоваться другой, более специфичный подход к обработке ложных значений.
Производительность: Скорость имеет значение
Хотя проверка выполняется быстро, старайтесь избегать ненужных операций. Если ваш код проверяет пустоту массива в цикле, сохраните результат проверки в переменной:
const isEmpty = !arr?.length;
for(/*...*/) {
if(!isEmpty) {
// Пора разрушить мифы: массивы могут быть весьма проворными! 🏎️
}
}
Используйте вспомогательные функции: тактика DRY
Чтобы избежать дублирования, организуйте часто используемые проверки во вспомогательные функции:
function isArrayNotEmpty(arr) {
return Array.isArray(arr) && arr.length > 0; // Максимум эффективности! 🚀
}
Полезные материалы
- Array.isArray() – JavaScript | MDN – Официальная документация по Array.isArray().
- Как проверить, пустой ли массив или его не существует? – Stack Overflow – Дискуссия на форуме разработчиков о правильных методах проверки массива.
- Свойство JavaScript Array length – Всё, что нужно знать о свойстве length массивов.
- Спецификация языка ECMAScript – ECMA-262, 5.1-е издание – Детальное описание свойств массивов в спецификации.
- Правдивый – Глоссарий MDN: Определения терминов, связанных с вебом | MDN – Объяснение понятия "правдивости" в контексте JavaScript.
- Ложный – Глоссарий MDN: Определения терминов, связанных с вебом | MDN – Объяснение понятия "ложности" в контексте JavaScript.
- Массивы – JavaScript.Info – Информация о массивах и их роли в программировании.