JavaScript-Array

JavaScript-Arrays werden verwendet, um mehrere Werte in einer einzigen Variable zu speichern.

Beispiel

var cars = ["Saab", "Volvo", "BMW"];

Probieren Sie es selbst aus

Was ist ein Array?

Ein Array ist ein spezieller Variable, der mehr als einen Wert aufnehmen kann.

Wenn Sie eine Projektliste (z.B. eine Liste von Automobilmarken) haben, sollten Automobilmarken in einer einzigen Variable so gespeichert werden:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Was ist aber, wenn Sie alle Autos durchsuchen und einen bestimmten Wert finden möchten? Was ist, wenn nicht drei Automobilmarken, sondern dreihundert?

Die Lösung ist ein Array!

Ein Array kann viele Werte speichern und diese durch Bezugnahme auf die Indexnummer abrufen.

Array erstellen

Die Verwendung von Array-Text ist die einfachste Methode, um JavaScript-Arrays zu erstellen.

Syntax:

var array-name = [item1, item2, ...];

Beispiel

var cars = ["Saab", "Volvo", "BMW"];

Probieren Sie es selbst aus

Leerzeichen und Zeilenumbrüche sind unwichtig. Die Deklaration kann über mehrere Zeilen hinweg erfolgen:

Beispiel

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

Probieren Sie es selbst aus

Bitte schreiben Sie kein Komma nach dem letzten Element (z.B. "BMW",).

Es können Probleme mit der Cross-Browser-Kompatibilität auftreten.

Verwenden Sie das JavaScript-Schlüsselwort new

Der folgende Beispiel erstellt auch ein Array und weist ihm Werte zu:

Beispiel

var cars = new Array("Saab", "Volvo", "BMW");

Probieren Sie es selbst aus

Diese beiden Beispiele haben gleiche Wirkung. Es ist nicht erforderlich, new Array().

Aus Gründen der Klarheit, Lesbarkeit und Ausführungszeit verwenden Sie bitte die erste Methode (Array-Textmethode).

auf Array-Elemente zugreifen

Wir beziehen uns durchIndexnummer (Unterschrift)um auf ein bestimmtes Array-Element zu verweisen.

Diese Anweisung ruft den Wert des ersten Elements in cars ab:

var name = cars[0];

Diese Anweisung ändert das erste Element in cars:

cars[0] = "Opel";

Beispiel

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Probieren Sie es selbst aus

[0] ist das erste Element im Array. [1] ist das zweite. Die Array-Indizes beginnen bei 0.

Ändern Sie das Array-Element

Diese Anweisung ändert den Wert des ersten Elements in cars:

cars[0] = "Opel";

Beispiel

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Probieren Sie es selbst aus

Vollständiges Array aufrufen

Durch JavaScript kann das vollständige Array über den Namen des Arrays referenziert werden:

Beispiel

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Probieren Sie es selbst aus

Array ist ein Objekt

Ein Array ist ein spezieller Typ von Objekt. In JavaScript wird mit Arrays typeof Der Operator gibt "object" zurück.

Aber die JavaScript-Arrays sind besser als Arrays zu beschreiben.

ArrayverwendungZahlenum auf ihre "Elemente" zuzugreifen. In diesem Beispiel,person[0] Rückgabe von Bill:

Array:

var person = ["Bill", "Gates", 62];

Probieren Sie es selbst aus

Objekte verwendenNameum auf ihre "Mitglieder" zuzugreifen. In diesem Beispiel,person.firstName Rückgabe von Bill:

Objekt:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Probieren Sie es selbst aus

Arrayelemente können Objekte sein

JavaScript-Variable können Objekte sein. Arrays sind ein spezieller Typ von Objekt.

Daher können Sie in einem Array verschiedene Datentypen speichern.

Sie können Objekte in einem Array speichern. Sie können Funktionen in einem Array speichern. Sie können sogar Arrays in einem Array speichern:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array-Attribute und -Methoden

Die wahre Stärke der JavaScript-Arrays liegt in ihren Attributen und Methoden:

Beispiel

var x = cars.length;   // Das length-Attribut gibt die Anzahl der Elemente zurück
var y = cars.sort();   // Die sort()-Methode sortiert das Array

Wir werden im nächsten Kapitel die Arraymethoden lernen.

length-Attribut

length Das Attribut gibt die Länge des Arrays (Anzahl der Arrayelemente) zurück.

Beispiel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // Die Länge von fruits beträgt 4

Probieren Sie es selbst aus

length Das Attribut ist immer größer als der höchste Arrayindex (Index).

Zugriff auf das erste Arrayelement

Beispiel

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Probieren Sie es selbst aus

Zugriff auf das letzte Arrayelement

Beispiel

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Probieren Sie es selbst aus

Durchlaufen Sie die Arrayelemente

Das sicherste Verfahren, ein Array zu durchlaufen, ist die Verwendung von "for"Schleife:",

Beispiel

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Probieren Sie es selbst aus

Man kann auch verwenden Array.foreach() Funktion:

Beispiel

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Probieren Sie es selbst aus

Array-Elemente hinzufügen

Der beste Weg, neue Elemente zu einem Array hinzuzufügen, ist push() Methode:

Beispiel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Ein neues Element (Lemon) wird zu fruits hinzugefügt

Probieren Sie es selbst aus

Man kann auch verwenden length Eigenschaft, um neue Elemente zu einem Array hinzuzufügen:

Beispiel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Ein neuer Element (Lemon) wird zu fruits hinzugefügt

Probieren Sie es selbst aus

Warnung!

Durch das Hinzufügen des Elements mit dem höchsten Index kann im Array ein nicht definiertes "Loch" erstellt werden:

Beispiel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Ein neuer Element (Lemon) wird zu fruits hinzugefügt

Probieren Sie es selbst aus

Assoziative Arrays

Viele Programmierungselemente unterstützen Arrays mit benannten Indizes.

Arrays mit benannten Indizes werden als assoziative Arrays (oder Hashes) bezeichnet.

JavaScript Es wird nicht unterstütztbenannten Indizes verwendet werden.

In JavaScript können Arrays nur mitZahlenindizes.

Beispiel

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length gibt 3 zurück
var y = person[0];              // person[0] gibt "Bill" zurück

Probieren Sie es selbst aus

Warnung!

Wenn Sie benannte Indizes verwenden, definiert JavaScript das Array als Standardobjekt.

Nachdem dies geschehen ist, erzeugen alle Methoden und Eigenschaften der Arrays falsche Ergebnisse.

Beispiel:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length gibt 0 zurück
var y = person[0];              // person[0] gibt undefined zurück

Probieren Sie es selbst aus

Unterschied zwischen Array und Objekt

In JavaScript,ArrayVerwendenZahlenindizes.

In JavaScript,ObjektVerwendenBenannte Indizes.

Arrays sind eine spezielle Art von Objekt, die numerische Indizes haben.

Wann sollte man ein Array und wann ein Objekt verwenden?

  • JavaScript unterstützt keine assoziativen Arrays
  • Wenn Sie den Namen der ElementeZeichenkette (Text)dann sollteObjekt.
  • Wenn Sie den Namen der ElementeZahlendann sollteArray.

Vermeiden Sie new Array()

Es ist nicht notwendig, den eingebauten Array-Konstruktor von JavaScript zu verwenden new Array().

Verwenden Sie [] Stattdessen!

Die folgenden zwei verschiedenen Anweisungen erstellen ein neues leeres Array namens points:

var points = new Array();         // Schlecht
var points = [];                  // Gut

Die folgenden zwei verschiedenen Anweisungen erstellen ein neues Array mit sechs Zahlen:

var points = new Array(40, 100, 1, 5, 25, 10); // Schlecht
var points = [40, 100, 1, 5, 25, 10];          // Gut

Probieren Sie es selbst aus

new Schlüsselwörter komplexieren den Code. Sie erzeugen auch unerwartete Ergebnisse:

var points = new Array(40, 100);  // Erzeugt ein Array mit zwei Elementen (40 und 100)

Was passiert, wenn ich eines der Elemente entferne?

var points = new Array(40);       // Erzeugt ein Array mit 40 nicht definierten Elementen!!!

Probieren Sie es selbst aus

Wie erkennt man ein Array

Eine häufige Frage ist: Wie kann ich wissen, ob eine Variable ein Array ist?

Das Problem liegt bei den JavaScript-Operatoren typeof Wird "object：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Wird "object" zurückgegeben

Probieren Sie es selbst aus

Der Operators Typ "object" wird zurückgegeben, da JavaScript-Arrays zu den Objekten gehören.

Lösung 1:

Um dieses Problem zu lösen, definierte ECMAScript 5 einen neuen Methoden Array.isArray():

Array.isArray(fruits);     // gibt true zurück

Probieren Sie es selbst aus

Das Problem mit diesem Ansatz liegt in ECMAScript 5 Nicht alle alten Browser unterstützen.

Lösung 2:

Erstellen Sie Ihre eigene isArray() Die Funktion löst dieses Problem:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Probieren Sie es selbst aus

Wenn der Parameter ein Array ist, gibt die obige Funktion stets true zurück.

Oder eine genauere Erklärung wäre: Wenn das Objektprotokoll das Wort "Array" enthält, wird true zurückgegeben.

Lösung 3:

Wenn ein Objekt vom angegebenen Konstruktor erstellt wurde, dann instanceof Operator gibt true zurück:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // gibt true zurück

Probieren Sie es selbst aus