Как проверить, пустой ли массив или существует?
Описание проблемы
Когда страница загружается в первый раз, мне нужно проверить, есть ли изображение в массиве 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 ответ(ов)
Ваша проблема может быть связана с использованием неявных глобальных переменных и поднятием переменных (hoisting). Убедитесь, что вы используете var
при объявлении переменной:
<?php echo "var image_array = ".json_encode($images); ?>
// добавьте var ^^^ здесь
Затем убедитесь, что вы никогда не переопределяете эту переменную случайно позже:
else {
...
image_array = []; // без var здесь
}
Таким образом, используя var
для объявления переменной, вы избежите создания неявной глобальной переменной и сможете корректно работать с image_array
.
Чтобы проверить, является ли массив пустым или нет, можно использовать несколько подходов. Вот некоторые из них:
Современный подход (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
Этот подход позволяет надежно определить, существует ли массив и содержит ли он элементы.
В соответствии с стандартом 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
.
В этом примере я использую проверку массива. Первое условие проверяет, что массив не равен 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)
выполняют одно и то же.
Вы можете использовать следующий код:
if (image_array !== undefined && image_array.length > 0)
Этот код проверяет, что переменная image_array
не равна undefined
и имеет длину больше 0, что означает, что массив существует и не пустой.
Как узнать, содержится ли определенная строка в массиве на JavaScript/jQuery?
Получить индекс объекта в массиве, соответствующего условию
Как сделать массив плоским в jQuery?
Как перенаправить на другую веб-страницу?
Как проверить, содержит ли массив строку в TypeScript?