Проверка на пустоту или отсутствие массива в 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; // Максимум эффективности! 🚀
}

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

1. Array.isArray() – JavaScript | MDN – Официальная документация по Array.isArray().
2. Как проверить, пустой ли массив или его не существует? – Stack Overflow – Дискуссия на форуме разработчиков о правильных методах проверки массива.
3. Свойство JavaScript Array length – Всё, что нужно знать о свойстве length массивов.
4. Спецификация языка ECMAScript – ECMA-262, 5.1-е издание – Детальное описание свойств массивов в спецификации.
5. Правдивый – Глоссарий MDN: Определения терминов, связанных с вебом | MDN – Объяснение понятия "правдивости" в контексте JavaScript.
6. Ложный – Глоссарий MDN: Определения терминов, связанных с вебом | MDN – Объяснение понятия "ложности" в контексте JavaScript.
7. Массивы – JavaScript.Info – Информация о массивах и их роли в программировании.