5

Как проверить, пустой ли массив или существует?

45

Описание проблемы

Когда страница загружается в первый раз, мне нужно проверить, есть ли изображение в массиве image_array, и загрузить последнее изображение. В противном случае я отключаю кнопки предварительного просмотра, уведомляю пользователя о необходимости нажать кнопку для получения нового изображения и создаю пустой массив для загрузки изображений.

Однако проблема заключается в том, что код в блоке else выполняется каждый раз. Если массив существует, он просто перезаписывается, но предупреждение не срабатывает.

if(image_array.length > 0)
    $('#images').append('<img src="'+image_array[image_array.length-1]+'" class="images" id="1" />');
else {
    $('#prev_image').attr('disabled', 'true');
    $('#next_image').attr('disabled', 'true');
    alert('Пожалуйста, получите новое изображение');
    var image_array = [];
}

ОБНОВЛЕНИЕ

Перед загрузкой HTML у меня есть следующий код:

<?php if(count($images) != 0): ?>
<script type="text/javascript">
    <?php echo "image_array = ".json_encode($images); ?>
</script>
<?php endif; ?>

На текущий момент у меня возникает проблема с тем, что массив image_array и сообщение alert не работают должным образом. Есть ли какие-либо решения или рекомендации для исправления этой ситуации?

5 ответ(ов)

7

Ваша проблема может быть связана с использованием неявных глобальных переменных и поднятием переменных (hoisting). Убедитесь, что вы используете var при объявлении переменной:

<?php echo "var image_array = ".json_encode($images); ?>
// добавьте var  ^^^ здесь

Затем убедитесь, что вы никогда не переопределяете эту переменную случайно позже:

else {
    ...
    image_array = []; // без var здесь
}

Таким образом, используя var для объявления переменной, вы избежите создания неявной глобальной переменной и сможете корректно работать с image_array.

3

Чтобы проверить, является ли массив пустым или нет, можно использовать несколько подходов. Вот некоторые из них:

Современный подход (ES5+):

if (Array.isArray(array) && array.length) {
    // массив существует и не пустой
}

Старый способ:

typeof array != "undefined"
    && array != null
    && array.length != null
    && array.length > 0

Компактный способ:

if (typeof array != "undefined" && array != null && array.length != null && array.length > 0) {
    // массив существует и не пустой
}

Способ на CoffeeScript:

if array?.length > 0

Почему?

Случай с неопределённым массивом

Неопределённая переменная — это переменная, которой ещё не присвоено значение:

let array = new Array();     // "array" !== "array"
typeof array == "undefined"; // => true

Случай с null

В общем случае, null — это состояние отсутствия значения. Например, переменная становится null, когда вы не смогли извлечь какие-либо данные:

array = searchData();  // не удалось ничего найти
array == null;         // => true

Случай не массива

JavaScript использует динамическую типизацию. Это значит, что мы не можем гарантировать, какого типа объект находится в переменной. Есть вероятность, что мы имеем дело не с экземпляром Array.

supposedToBeArray = new SomeObject();
typeof supposedToBeArray.length;       // => "undefined"

array = new Array();
typeof array.length;                   // => "number"

Случай пустого массива

Теперь, когда мы проверили все остальные возможности, мы имеем дело с экземпляром Array. Чтобы убедиться, что он не пустой, мы проверяем, сколько элементов в нём содержится, и убеждаемся, что их больше нуля.

firstArray = [];
firstArray.length > 0;  // => false

secondArray = [1,2,3];
secondArray.length > 0; // => true

Этот подход позволяет надежно определить, существует ли массив и содержит ли он элементы.

0

В соответствии с стандартом ECMAScript 5.1, для проверки, является ли переменная image_array массивом и не является ли она пустым, можно использовать метод Array.isArray(). Пример кода будет выглядеть следующим образом:

if (Array.isArray(image_array) && image_array.length) {
  // массив существует и не пустой
}

Этот код проверяет две вещи: первая часть условного оператора Array.isArray(image_array) подтверждает, что image_array — это массив, а вторая часть image_array.length проверяет, что массив не пустой. Если обе проверки проходят, выполняется код внутри блока if.

0

В этом примере я использую проверку массива. Первое условие проверяет, что массив не равен null и не равен undefined (это часть, которая отвечает за "truthy"), а второе условие проверяет, что массив не пустой.

if(arrayName && arrayName.length > 0){
    // что-то делаем
}

Также, благодаря комментарию от tsemer, я добавил вторую версию:

if(arrayName && arrayName.length)

После этого я провел тест для второго условия, используя Scratchpad в Firefox:

var array1;
var array2 = [];
var array3 = ["one", "two", "three"];
var array4 = null;

console.log(array1);
console.log(array2);
console.log(array3);
console.log(array4);

if (array1 && array1.length) {
  console.log("array1! имеет значение!");
}

if (array2 && array2.length) {
  console.log("array2! имеет значение!");
}

if (array3 && array3.length) {
  console.log("array3! имеет значение!");
}

if (array4 && array4.length) {
  console.log("array4! имеет значение!");
}

Таким образом, можно доказать, что if(array2 && array2.length) и if(array2 && array2.length > 0) выполняют одно и то же.

0

Вы можете использовать следующий код:

if (image_array !== undefined && image_array.length > 0)

Этот код проверяет, что переменная image_array не равна undefined и имеет длину больше 0, что означает, что массив существует и не пустой.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь