Wie kann man prüfen, ob ein Array leer ist oder existiert?

Question

Wenn die Seite zum ersten Mal geladen wird, muss ich prüfen, ob sich ein Bild in image_array und laden Sie das letzte Bild.

Andernfalls deaktiviere ich die Vorschau-Schaltflächen, weise den Benutzer darauf hin, dass er auf die Schaltfläche "Neues Bild" klicken soll, und erstelle ein leeres Feld, in das die Bilder eingefügt werden;

Das Problem ist, dass image_array im else brennt alle Zeit. Wenn ein Array vorhanden ist - es überschreibt es einfach, aber Alarm funktioniert nicht.

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('Please get new image');
    var image_array = [];
}

UPDATE Bevor ich html lade, habe ich etwas wie dieses:

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

Answer 1

if (typeof image_array !== 'undefined' && image_array.length > 0) {
    // the array is defined and has at least one element
}

Ihr Problem kann auf eine Mischung aus impliziten globalen Variablen und Variablen-Hoisting zurückzuführen sein. Stellen Sie sicher, dass Sie var wenn Sie eine Variable deklarieren:

<?php echo "var image_array = ".json_encode($images);?>
// add var  ^^^ here

Und stellen Sie dann sicher, dass Sie diese Variable später nicht versehentlich neu deklarieren:

else {
    ...
    image_array = []; // no var here
}

Answer 2

So prüfen Sie, ob ein Array entweder leer ist oder nicht

Ein moderner Weg, ES5+:

if (Array.isArray(array) && array.length) {
    // array exists and is not empty
}

Ein Weg der alten Schule:

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

Ein kompakter Weg:

if (typeof array != "undefined" && array != null && array.length != null && array.length > 0) {
    // array exists and is not empty
}

Ein CoffeeScript Weg:

if array?.length > 0

---

Warum?

Fall undefiniert
Eine nicht definierte Variable ist eine Variable, der Sie noch nichts zugewiesen haben.

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

Fall Null
Im Allgemeinen ist null der Zustand des Fehlens eines Wertes. Zum Beispiel ist eine Variable null, wenn Sie einige Daten nicht abrufen konnten.

array = searchData();  // can't find anything
array == null;         // => true

Fall Nicht ein Array
Javascript hat ein dynamisches Typensystem. Das bedeutet, dass wir nicht garantieren können, welchen Typ von Objekt eine Variable enthält. Es besteht die Möglichkeit, dass wir uns nicht mit einer Instanz von Array .

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

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

Fall Leeres Array
Da wir nun alle anderen Möglichkeiten getestet haben, sprechen wir mit einer Instanz von Array . Um sicherzustellen, dass er nicht leer ist, fragen wir nach der Anzahl der Elemente, die er enthält, und stellen sicher, dass er mehr als null Elemente enthält.

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

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

Answer 3

Wie wäre es mit (ECMA 5.1):

if(Array.isArray(image_array) && image_array.length){
  // array exists and is not empty
}

Answer 4

Das verwende ich. Die erste Bedingung umfasst truthy, die sowohl null als auch undefiniert hat. Die zweite Bedingung prüft auf ein leeres Array.

if(arrayName && arrayName.length > 0){
    //do something.
}

oder dank des Kommentars von tsemer habe ich eine zweite Version hinzugefügt

if(arrayName && arrayName.length)

Dann habe ich einen Test für die zweite Bedingung durchgeführt, indem ich Scratchpad in Firefox verwendet habe:

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! has a value!");
}

if (array2 && array2.length) {
  console.log("array2! has a value!");
}

if (array3 && array3.length) {
  console.log("array3! has a value!");
}

if (array4 && array4.length) {
  console.log("array4! has a value!");
}

was auch beweist, dass if(array2 && array2.length) y if(array2 && array2.length > 0) tun genau das Gleiche

Answer 5

optionale Verkettung

Da der Vorschlag zur optionalen Verkettung die Stufe 4 erreicht hat und immer mehr Unterstützung findet, gibt es eine sehr elegante Möglichkeit, dies zu tun

if(image_array?.length){

  // image_array is defined and has at least one element

}