Arrays in Javascript-Beispielen. Zweidimensionales Array in JavaScript. Eindimensionale Array-Nummern1
Im vorherigen Artikel haben wir darüber gesprochen, was es ist und wie man damit arbeitet. In diesem Artikel werden wir darüber sprechen mehrdimensionales Array.
Es ist ein Array mit einem oder mehreren Elementen, die auch Arrays sind. Insbesondere abhängig von der Tiefe der Anzeige kann sie aufgerufen werden zweidimensionales Array(2 Ebenen) entweder dreidimensionales Array(3 Ebenen) entweder vierdimensional(4 Ebenen) und so weiter.
Am beliebtesten ist nach dem eindimensionalen Array das zweidimensionale Array, das am häufigsten verwendet wird. Wir werden es genauer untersuchen.
Wie Sie sehen können, sind die Elemente eines zweidimensionalen Arrays eindimensionale Arrays. Wenn diese eindimensionalen Arrays mehr Arrays enthalten würden, wäre das arr-Array bereits dreidimensional.
Als Beispiel erstellen wir drei einfache Arrays und füllen sie mit Daten. Wir werden die erste mit geraden Zahlen füllen, die zweite mit ungeraden Zahlen und die dritte mit beliebigen Daten.
// Deklariere drei leere Arrays var evenNumbers \u003d new Array (); // Variable k - für EvenNumbers-Array-Indizes var k \u003d 0; var oddNumbers \u003d new Array (); // Variable n - für Array-Indizes oddNumbers var n \u003d 0; var data \u003d new Array ("Auto", "Flugzeug", wahr, 89, "m"); // Fülle das Array EvenNumbers mit geraden Zahlen für (var i \u003d 1; i
Um zu sehen, was sich im Array befindet, können Sie ein Tool wie z konsole.
Zum Beispiel wollen wir den Inhalt eines Arrays mit ungeraden Zahlen ungeraden Zahlen sehen. Schreiben Sie dazu die folgende Zeile in den folgenden Code:
Console.log (oddNumbers);
Um das Ergebnis zu sehen, müssen Sie öffnen konsole im Browser... In Google Chrome geschieht dies folgendermaßen: Klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie im Kontextmenü die letzte Option "Code anzeigen" aus, dh den Inspektor. In der englischen Version heißt diese Option Inspect.
Und darunter wird die Entwickler-Symbolleiste angezeigt. Darin müssen Sie zur Registerkarte Konsole wechseln.
Nun um erstellen Sie ein zweidimensionales Arraymüssen Sie es deklarieren und die oben erstellten eindimensionalen Arrays hinzufügen.
// Deklariere ein zweidimensionales Array twoDimens und fülle es aus var twoDimens \u003d new Array (geradeNummern, ungeradeNummern, Daten); console.log (twoDimens);
Sehen wir uns den Inhalt dieses Arrays in der Konsole an.
iteration über ein zweidimensionales Array
Lassen Sie uns zuerst lernen wie man auf Elemente eines zweidimensionalen Arrays zugreift.
Wie bei einzelnen Arrays wird auf Elemente über ihre Indizes zugegriffen.
Lassen Sie uns beispielsweise das Element am Index 3 aus einem Array mit ungeraden Zahlen (oddNumbers) anzeigen. Der Index des eindimensionalen Arrays oddNumbers im zweidimensionalen Array twoDimens ist eins (1).
Document.write ("Das Element mit Index 3 aus dem Array oddNumbers lautet:" + twoDimens); // Element: 7
Im TwoDimens-Array beziehen wir uns auf das Element am Index 1. Das Element an diesem Index ist das Array oddNumbers. Und in diesem Array greifen wir bereits mit dem Index 3 auf das Element zu, der die Nummer 7 ist.
Kommen wir nun zur eigentlichen Frage wie man ein zweidimensionales Array durchläuft.
Die Schleife über ein zweidimensionales Array erfolgt mithilfe einer Doppelschleife. Lassen Sie uns zum Beispiel über unser TwoDimens-Array iterieren.
Für (var i \u003d 0; i< twoDimens.length; i++){ for(var j = 0; j < twoDimens[i].length; j++){ document.write("
Element mit Index + i + + j + entspricht: "+ twoDimens [i] [j] +"
"); } }In der ersten Schleife durchlaufen wir das TwoDimens-Array selbst. In der zweiten Schleife iterieren wir bereits über das Element selbst (Array). Erstens ist die Variable i gleich 0. Daher iterieren wir in der zweiten Schleife zuerst über das erste Array evenNumbers, das den Index 0 hat. Und bereits in der zweiten Schleife greifen wir auf die Elemente dieses Arrays zu. Also: zwei Dimensionen [j]. Wobei j von 0 bis zur Länge des EvenNumbers-Arrays reicht.
Nachdem wir die Elemente des ersten Arrays durchlaufen haben, kehren wir zur ersten Schleife zurück, erhöhen die Variable i und iterieren über das zweite Array oddNumbers mit dem Index 1. Daher iterieren wir über jedes Element des zweidimensionalen Arrays twoDimens.
Schauen wir uns nun das Ergebnis dieser Suche an:
Das ist alles, worüber ich in diesem Artikel sprechen wollte. Jetzt wissen Sie, wie Sie ein zweidimensionales Array erstellen, auf die Elemente eines zweidimensionalen Arrays zugreifen und über ein zweidimensionales Array iterieren. Ich hoffe alles war klar. Ich wünsche Ihnen viel Erfolg!
- I. Durchlaufen realer Arrays
- ForEach und verwandte Methoden
- Für Schleife
- Richtige Verwendung von for ... in Schleife
- For ... of loop (implizite Verwendung eines Iterators)
- Explizite Verwendung eines Iterators
- Verwenden von Methoden zum Iterieren über reale Arrays
- Konvertieren in ein reales Array
- Ein Hinweis zu Laufzeitobjekten
I. Durchlaufen realer Arrays
Im Moment gibt es drei Möglichkeiten, um die Elemente eines realen Arrays zu durchlaufen:- array.prototype.forEach-Methode;
- klassiker für Schleife;
- Eine wohlgeformte für ... in Schleife.
- for ... of loop (implizite Verwendung eines Iterators);
- explizite Verwendung eines Iterators.
1. Die forEach-Methode und verwandte Methoden
Wenn Ihr Projekt die Funktionen des ECMAScript 5 (ES5) -Standards unterstützt, können Sie eine seiner Innovationen verwenden - die forEach-Methode.Anwendungsbeispiel:
var a \u003d ["a", "b", "c"]; a.forEach (Funktion (Eintrag) (console.log (Eintrag);));
Für die Verwendung von forEach ist im Allgemeinen die es5-shim-Emulationsbibliothek für Browser erforderlich, die diese Methode nicht nativ unterstützen. Dazu gehören IE 8 und frühere Versionen, die heute noch verwendet werden.
Der Vorteil von forEach besteht darin, dass keine lokalen Variablen deklariert werden müssen, um den Index und den Wert des aktuellen Array-Elements zu speichern, da diese automatisch als Argumente an die Rückruffunktion übergeben werden.
Wenn Sie sich Sorgen über die potenziellen Kosten für das Anrufen eines Rückrufs für jeden Artikel machen, machen Sie sich keine Sorgen und lesen Sie diese.
ForEach ist so konzipiert, dass es über alle Elemente eines Arrays iteriert. Darüber hinaus bietet ES5 einige weitere nützliche Methoden, um alle oder einige Elemente zu iterieren und einige Aktionen mit ihnen auszuführen:
- every - gibt true zurück, wenn der Rückruf für jedes Element des Arrays einen Wert zurückgibt, der in true umgewandelt wird.
- some - gibt true zurück, wenn der Rückruf für mindestens ein Element des Arrays einen Wert zurückgibt, der in true umgewandelt wird.
- filter - Erstellt ein neues Array, das die Elemente des ursprünglichen Arrays enthält, für die der Rückruf true zurückgibt.
- map - Erstellt ein neues Array mit den vom Rückruf zurückgegebenen Werten.
- reduzieren - reduziert ein Array auf einen einzelnen Wert und wendet nacheinander einen Rückruf auf jedes Element des Arrays an, beginnend mit dem ersten (kann nützlich sein, um die Summe der Array-Elemente und anderer endgültiger Funktionen zu berechnen).
- reduRight - Funktioniert ähnlich wie Reduzieren, durchläuft jedoch die Elemente in umgekehrter Reihenfolge.
2. Die for-Schleife
Gut alt für Regeln:Var a \u003d ["a", "b", "c"]; var index; für (Index \u003d 0; Index< a.length; ++index) {
console.log(a);
}
Wenn sich die Länge des Arrays nicht während der gesamten Schleife ändert und die Schleife selbst zu einem leistungskritischen Code gehört (was unwahrscheinlich ist), können Sie die "optimalere" Version von for zum Speichern der Länge des Arrays verwenden:
Var a \u003d ["a", "b", "c"]; var index, len; für (index \u003d 0, len \u003d a.length; index< len; ++index) {
console.log(a);
}
Theoretisch sollte dieser Code etwas schneller als der vorherige ausgeführt werden.
Wenn die Reihenfolge der Aufzählung von Elementen nicht wichtig ist, können Sie hinsichtlich der Optimierung noch weiter gehen und die Variable zum Speichern der Länge des Arrays entfernen, indem Sie die Reihenfolge der Aufzählung in die entgegengesetzte Richtung ändern:
Var a \u003d ["a", "b", "c"]; var index; für (index \u003d a.length - 1; index\u003e \u003d 0; --index) (console.log (a);)
In modernen JavaScript-Engines bedeuten diese optimierten Spiele jedoch normalerweise nichts.
3. Richtige Verwendung der for ... in-Schleife
Wenn Ihnen empfohlen wird, eine for ... in-Schleife zu verwenden, denken Sie daran, dass das Iterieren über Arrays nicht das ist, wofür es vorgesehen ist. Im Gegensatz zu dem weit verbreiteten Missverständnis iteriert die for ... in-Schleife nicht über die Array-Indizes, sondern über die aufgezählten Eigenschaften des Objekts.In einigen Fällen, z. B. beim Iterieren über spärliche Arrays, kann ... in nützlich sein, vorausgesetzt, Sie treffen einige Vorsichtsmaßnahmen, wie im folgenden Beispiel gezeigt:
// a ist ein spärliches Array var a \u003d; a \u003d "a"; a \u003d "b"; a \u003d "c"; für (var key in a) (if (a.hasOwnProperty (key) && /^0$|^\\d*$/.test(key) && key<= 4294967294) {
console.log(a);
}
}
In diesem Beispiel werden bei jeder Iteration der Schleife zwei Überprüfungen durchgeführt:
- dass das Array eine eigene Eigenschaft namens key hat (nicht von seinem Prototyp geerbt).
- dieser Schlüssel ist eine Zeichenfolge, die die Dezimalschreibweise einer Ganzzahl enthält, deren Wert kleiner als 4294967294 ist. Woher kommt die letzte Nummer? Aus der Definition eines Array-Index in ES5 folgt, dass der größte Index, den ein Element in einem Array haben kann, (2 ^ 32 - 2) \u003d 4294967294 ist.
Um nicht jedes Mal, wenn Sie ein Array durchlaufen müssen, einen so umständlichen Prüfcode zu schreiben, können Sie ihn als separate Funktion anordnen:
Funktion arrayHasOwnIndex (Array, Schlüssel) (return array.hasOwnProperty (Schlüssel) && /^0$|^\\d*$/.test(key) && Schlüssel<= 4294967294;
}
Dann wird der Körper der Schleife aus dem Beispiel erheblich reduziert:
Für (a) eingeben (if (arrayHasOwnIndex (a, key)) (console.log (a);))
Der obige Überprüfungscode ist universell und für alle Fälle geeignet. Stattdessen können Sie eine kürzere Version verwenden, die zwar formal nicht ganz korrekt ist, aber dennoch für die meisten Fälle geeignet ist:
Für (a) eingeben (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) \u003d\u003d\u003d key) (console.log (a);))
4. Die for ... of-Schleife (implizite Verwendung eines Iterators)
ES6 sollte, während es sich noch im Entwurfsstatus befindet, Iteratoren in JavaScript einführen.Iterator
ist ein objektimplementiertes Protokoll, das einen Standardweg zum Erhalten einer Folge von Werten (endlich oder unendlich) definiert.
Ein Iterator ist ein Objekt, in dem die next () -Methode definiert ist - eine Funktion ohne Argumente, die ein Objekt mit zwei Eigenschaften zurückgibt:
- done (boolean) - true, wenn der Iterator das Ende der zu iterierenden Sequenz erreicht hat. Ansonsten falsch.
- value - Definiert den vom Iterator zurückgegebenen Wert. Kann undefiniert sein (nicht vorhanden), wenn die Eigenschaft done wahr ist.
Ein Beispiel für die Verwendung von ... von:
Var val; var a \u003d ["a", "b", "c"]; für (Wert von a) (console.log (Wert);)
Im obigen Beispiel ruft die for ... of-Schleife implizit den Iterator des Array-Objekts auf, um jeden Wert im Array abzurufen.
5. Explizite Verwendung eines Iterators
Iteratoren können auch explizit verwendet werden. In diesem Fall wird der Code jedoch im Vergleich zur for ... of-Schleife viel komplizierter. Es sieht aus wie das:Var a \u003d ["a", "b", "c"]; var it \u003d a.entries (); var entry; while (! (entry \u003d it.next ()). done) (console.log (entry.value);)
In diesem Beispiel gibt die Methode Array.prototype.entries einen Iterator zurück, mit dem die Werte des Arrays angezeigt werden. Bei jeder Iteration enthält entry.value ein Array wie [Schlüssel, Wert].
II. Iterieren über Array-ähnliche Objekte
Neben echten Arrays enthält auch JavaScript array-ähnliche Objekte ... Gemeinsam ist ihnen mit realen Arrays, dass sie eine Längeneigenschaft und Eigenschaften mit Namen in Form von Zahlen haben, die den Elementen des Arrays entsprechen. Beispiele sind das DOM der NodeList-Auflistung und die Argumente Pseudo-Array, die in jeder Funktion / Methode verfügbar sind.1. Verwenden von Methoden zum Iterieren über reale Arrays
Zumindest die meisten, wenn nicht alle Methoden zum Iterieren über reale Arrays können verwendet werden, um über Array-ähnliche Objekte zu iterieren.Die Konstrukte for und for ... in können auf Array-ähnliche Objekte genauso angewendet werden wie auf echte Arrays.
ForEach und andere Array.prototype-Methoden gelten auch für Array-ähnliche Objekte. Dazu müssen Sie Function.call oder Function.apply aufrufen.
Wenn Sie beispielsweise forEach auf die childNodes-Eigenschaft eines Node-Objekts anwenden möchten, können Sie dies folgendermaßen tun:
Array.prototype.forEach.call (node.childNodes, function (child) (// mache etwas mit dem untergeordneten Objekt));
Um die Wiederverwendung dieser Technik zu vereinfachen, können Sie einen Verweis auf die Methode Array.prototype.forEach in einer separaten Variablen deklarieren und als Kurzform verwenden:
// (Dies setzt voraus, dass sich der gesamte unten stehende Code im selben Bereich befindet.) Var forEach \u003d Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// mache etwas mit dem untergeordneten Objekt));
Wenn ein Array-ähnliches Objekt einen Iterator hat, kann es explizit oder implizit verwendet werden, um das Objekt auf dieselbe Weise wie bei realen Arrays zu durchlaufen.
2. In ein reales Array konvertieren
Es gibt auch eine andere, sehr einfache Möglichkeit, über ein Array-ähnliches Objekt zu iterieren: Konvertieren Sie es in ein reales Array und verwenden Sie eine der oben genannten Methoden, um über reale Arrays zu iterieren. Für die Konvertierung können Sie die generische Array.prototype.slice-Methode verwenden, die auf jedes Array-ähnliche Objekt angewendet werden kann. Dies geschieht sehr einfach, wie im folgenden Beispiel gezeigt:Var trueArray \u003d Array.prototype.slice.call (arrayLikeObject, 0);
Wenn Sie beispielsweise eine NodeList-Auflistung in ein reales Array konvertieren möchten, benötigen Sie folgenden Code:
Var divs \u003d Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Aktualisieren: Wie in den Kommentaren von rock und torbasow erwähnt, können Sie in ES6 anstelle von Array.prototype.slice die aussagekräftigere Methode Array.from verwenden.
3. Ein Hinweis zu Laufzeitobjekten
Wenn Sie Array.prototype-Methoden auf Laufzeitobjekte (z. B. DOM-Sammlungen) anwenden, sollten Sie berücksichtigen, dass diese Methoden nicht in allen Laufzeitumgebungen (einschließlich Browsern) ordnungsgemäß funktionieren. Dies hängt vom Verhalten eines bestimmten Objekts in einer bestimmten Laufzeit ab, genauer gesagt davon, wie die abstrakte Operation HasProperty in diesem Objekt implementiert ist. Das Problem ist, dass der ES5-Standard selbst die Möglichkeit eines Fehlverhaltens von Objekten in Bezug auf diesen Vorgang zulässt (siehe §8.6.2).Daher ist es wichtig, die Array.prototype-Methoden in jeder Laufzeit (Browser) zu testen, in der Sie Ihre Anwendung verwenden möchten.
Grüße an alle, die sich für mehrdimensionale JavaScript-Arrays und -Sortierung interessieren. In der aktuellen Veröffentlichung werde ich versuchen, dieses Thema in allen Details zu behandeln.
Nach dem Lesen dieses Artikels erfahren Sie daher, warum mehrdimensionale Arrays in Webanwendungen verwendet werden, wie sie erstellt werden und wie sie bearbeitet und sortiert werden können. Lass uns lernen!
Wie entstehen mehrdimensionale Arrays und wofür sind sie gedacht?
Zunächst sollte daran erinnert werden, wie ein reguläres eindimensionales Array erstellt wird.
var array \u003d
Denken Sie jetzt daran, dass ein mehrdimensionales Array ein Array von Arrays ist.Ich stimme zu, es klingt wie eine Tautologie. Lesen Sie die Definition jedoch erneut. In der Tat besteht ein mehrdimensionales Array aus einer bestimmten Anzahl verschachtelter Arrays.
Betrachten Sie die folgende Situation. Zu Beginn eines Spiels gibt der Benutzer seinen Namen ein und nach dem Ende wird eine Bewertungstabelle mit den Namen der Spieler und ihren Aufzeichnungen auf dem Bildschirm angezeigt.
Es ist klar, dass solche Informationen in einer Datenbank gespeichert sind. Wenn wir es jedoch aus der Datenbank ziehen, erhalten wir ein mehrdimensionales Array. Schließlich enthält jedes Subarray das Login des Spielers und die Anzahl der erzielten Punkte.
Es wird alles so aussehen:
var results \u003d [["Markus", 333], ["Natasha", 211], ["Alexey", 124]];
Wie Sie sehen, können die Informationen heterogen gespeichert werden. Es können Zeichenfolgen, Zahlen und sogar sein. Dies ist möglich, weil die Arrays in untypisiert sind.
In diesem Fall erfolgt der Zugriff auf Elemente über einen Doppeloperator.
Analysieren Sie ein kleines Programm, um das Material zu konsolidieren.
Ergebnisse \u003d
Arrays sind eine ziemlich bequeme Möglichkeit, geordnete komplexe Daten während ihrer Verarbeitung zu speichern. Darüber hinaus ist es sehr bequem, mit ihnen zu arbeiten, und gleichzeitig ist die Geschwindigkeit ihrer Verarbeitung ziemlich hoch.
Datensortierungsmethoden
Für Arrays in JavaScript gibt es eine integrierte Methode namens sort ()... Dieses Tool ist sehr flexibel. Und jetzt erkläre ich warum.
Wenn Sie eine Methode ohne Parameter verwenden, werden die Subarrays automatisch nach dem ersten Element in alphabetischer Reihenfolge sortiert. Also, wenn Sie anrufen ergebnisse.sort () Das analysierte Objekt sieht folgendermaßen aus:
Alexey, 124
Markus, 333
Natasha, 211
Und wenn Sie die Elemente in jedem verschachtelten Array austauschen, erhalten Sie:
124, Alexey
211, Natasha
333, Markus
In diesem Fall werden zum Vergleich alle Elemente vorübergehend in Zeichenfolgen konvertiert.
Wenn Sie zur Lösung einer bestimmten Aufgabe eine Funktion benötigen, die Elemente auf nicht standardmäßige Weise sortiert, können Sie sie selbst schreiben und als Parameter an übergeben sort ()... Es ist zu beachten, dass eine benutzerdefinierte Funktion Folgendes zurückgeben muss:
- eine positive Zahl (im Allgemeinen 1), wenn der erste angegebene Punkt dem zweiten im Vergleich folgt;
- eine negative Zahl (normalerweise -1), wenn das zweite ausgewählte Element dem ersten folgen soll;
- null, wenn die beiden getesteten Werte gleich sind.
Nehmen wir als Beispiel das ursprüngliche Array. ergebnisse nach Punkten sortieren. Darüber hinaus werden die Ergebnisse vom höchsten zum niedrigsten sortiert. Dies kann auf zwei Arten erfolgen.
Bei der ersten Option habe ich die Sortierlogik geändert, d. H. In einer Situation, in der Sie eine positive Zahl zurückgeben müssen, gebe ich eine negative zurück und umgekehrt.
Aufnahmetabelle:
Bei der zweiten Methode habe ich die Sortierlogik intakt gelassen, aber zusätzlich eine andere Methode verwendet - umkehren ()... Wie der Name schon sagt, kehrt umgekehrt die Reihenfolge der Elemente um.
Daher sieht die Funktion sort () folgendermaßen aus:
| 1 2 3 4 5 | Funktion RecordSort (a, b) (wenn (a\u003e b) 1 zurückgibt, sonst wenn (a< b) return -1; else return 0; } |
funktion RecordSort (a, b) (wenn (a\u003e b) 1 zurückgibt, sonst wenn (a< b) return -1; else return 0; }
Fügen Sie danach die obige Methode hinzu.
Die Schlussfolgerung wird auf ähnliche Weise gezogen.
Ich möchte Ihre Aufmerksamkeit auf einen wichtigen Punkt lenken. Bei Verwendung dieser Funktionen treten alle Änderungen an dem Array auf, auf das Sie sie anwenden. Wenn Sie also die ursprüngliche Ansicht der Daten beibehalten müssen, erstellen Sie eine Kopie und bearbeiten Sie sie.
Nun, also habe ich über mehrdimensionale Arrays und deren Sortierung gesprochen. Wenn Ihnen der Artikel gefallen hat, abonnieren Sie den Blog und lesen Sie andere ebenso interessante Veröffentlichungen. Ich wäre dankbar für die Reposts. Bis zum nächsten Mal!
Tschüss!
Viele Grüße, Roman Chueshov
Arrays
Array ist eine geordnete Sammlung von Werten. Die Werte in einem Array werden als Elemente bezeichnet, und jedes Element ist durch eine numerische Position im Array gekennzeichnet, die als Index bezeichnet wird. Arrays in JavaScript sind untypisiert: Die Elemente eines Arrays können von einem beliebigen Typ sein, und verschiedene Elemente desselben Arrays können von unterschiedlichem Typ sein. Array-Elemente können sogar Objekte oder andere Arrays sein, mit denen Sie komplexe Datenstrukturen wie Arrays von Objekten und Arrays von Arrays erstellen können.
Array-Indizes in JavaScript basieren auf Nullen und verwenden 32-Bit-Ganzzahlen. Das erste Element eines Arrays hat den Index 0. JavaScript-Arrays sind dynamisch: Sie können nach Bedarf wachsen und schrumpfen. Es ist nicht erforderlich, feste Größen von Arrays zu deklarieren, wenn sie erstellt werden, oder Speicher neu zuzuweisen, wenn ihre Größe geändert wird.
Arrays in JavaScript sind eine spezielle Form von Objekten, und Array-Indizes bedeuten kaum mehr als nur Eigenschaftsnamen, die zufällig Ganzzahlen sind.
Arrays erstellen
Der einfachste Weg, ein Array zu erstellen, ist ein Literal, eine einfache, durch Kommas getrennte Liste von Array-Elementen in eckigen Klammern. Die Werte in einem Array-Literal müssen keine Konstanten sein - sie können beliebige Ausdrücke sein, einschließlich Objektliterale:
Var leer \u003d; // Leeres Array var numbers \u003d; // Array mit fünf numerischen Elementen var misc \u003d [1.1, true, "a",]; // 3 Elemente verschiedener Typen + nachfolgendes Komma var base \u003d 1024; var table \u003d; // Array mit Variablen var arrObj \u003d [,]; // 2 Arrays mit Objekten
Mit der Array-Literal-Syntax können Sie ein optionales nachfolgendes Komma einfügen, d. H. Literal [,] entspricht einem Array mit zwei Elementen, nicht mit drei.
Eine andere Möglichkeit, ein Array zu erstellen, besteht darin, den Konstruktor aufzurufen Array ()... Der Konstruktor kann auf drei verschiedene Arten aufgerufen werden:
Rufen Sie den Konstruktor ohne Argumente auf:
Var arr \u003d neues Array ();
In diesem Fall wird ein leeres Array erstellt, das dem Literal entspricht.
Rufen Sie den Konstruktor mit einem einzelnen numerischen Argument auf, das die Länge des Arrays angibt:
Var arr \u003d neues Array (10);
In diesem Fall wird ein leeres Array der angegebenen Länge erstellt. Diese Form des Aufrufs des Array () -Konstruktors kann verwendet werden, um Speicher für ein Array vorab zuzuweisen, wenn die Anzahl seiner Elemente im Voraus bekannt ist. Beachten Sie, dass hierdurch keine Werte im Array gespeichert werden.
Geben Sie die Werte der ersten zwei oder mehr Array-Elemente oder eines nicht numerischen Elements in einem Konstruktoraufruf explizit an:
Var arr \u003d neues Array (5, 4, 3, 2, 1, "Test");
In diesem Fall werden die Argumente an den Konstruktor zu den Werten der Elemente des neuen Arrays. Die Verwendung von Array-Literalen ist fast immer einfacher als die Verwendung des Array () -Konstruktors auf diese Weise.
Array-Elemente lesen und schreiben
Auf Array-Elemente wird mit dem Operator zugegriffen. Links von den Klammern muss ein Array-Verweis vorhanden sein. Ein beliebiger Ausdruck, der einen nicht negativen ganzzahligen Wert zurückgibt, muss in Klammern stehen. Diese Syntax eignet sich sowohl zum Lesen als auch zum Schreiben des Werts eines Array-Elements. Daher sind alle folgenden JavaScript-Anweisungen gültig:
// Erstelle ein Array mit einem Element var arr \u003d ["world"]; // Element 0 lesen var value \u003d arr; // Schreibe den Wert in Element 1 arr \u003d 3.14; // Schreibe einen Wert in Element 2 i \u003d 2; arr [i] \u003d 3; // Schreibe einen Wert in Element 3 arr \u003d "hello"; // Elemente 0 und 2 lesen, Wert in Element 3 schreiben arr] \u003d arr;
Ich möchte Sie daran erinnern, dass Arrays eine spezielle Art von Objekt sind. Die eckigen Klammern für den Zugriff auf Array-Elemente entsprechen genau den eckigen Klammern für den Zugriff auf Objekteigenschaften. Der JavaScript-Interpreter konvertiert die in Klammern gesetzten numerischen Indizes in Zeichenfolgen - Index 1 wird zur Zeichenfolge "1" - und verwendet die Zeichenfolgen dann als Eigenschaftsnamen.
Das Konvertieren numerischer Indizes in Zeichenfolgen ist nichts Besonderes: Das Gleiche gilt für reguläre Objekte:
Var obj \u003d (); // Erstelle ein einfaches Objekt obj \u003d "one"; // Indiziere es mit ganzen Zahlen
Die Besonderheit von Arrays besteht darin, dass bei Verwendung von Eigenschaftsnamen, die nicht negative Ganzzahlen sind, die Arrays automatisch den Wert der Eigenschaft bestimmen länge... Zum Beispiel wurde das arr-Array oben mit einem einzelnen Element erstellt. Dann wurden seinen Elementen Werte mit den Indizes 1, 2 und 3 zugewiesen. Infolge dieser Operationen änderte sich der Wert der Längeneigenschaft des Arrays und wurde gleich 4.
Sie sollten klar zwischen Indizes in einem Array und Objekteigenschaftsnamen unterscheiden. Alle Indizes sind Eigenschaftsnamen, aber nur Eigenschaften mit Ganzzahlnamen sind Indizes. Alle Arrays sind Objekte, und Sie können ihnen Eigenschaften mit einem beliebigen Namen hinzufügen. Wenn Sie jedoch Eigenschaften beeinflussen, bei denen es sich um Array-Indizes handelt, aktualisieren Arrays den Wert der Eigenschaft length nach Bedarf.
Beachten Sie, dass negative und nicht ganzzahlige Werte als Array-Indizes zulässig sind. In diesem Fall werden Zahlen in Zeichenfolgen konvertiert, die als Eigenschaftsnamen verwendet werden.
Hinzufügen und Entfernen von Array-Elementen
Wir haben bereits gesehen, dass der einfachste Weg, einem Array Elemente hinzuzufügen, darin besteht, neuen Indizes Werte zuzuweisen. Sie können die Methode auch verwenden, um ein oder mehrere Elemente am Ende eines Arrays hinzuzufügen drücken ():
Var arr \u003d; // Erstelle ein leeres Array arr.push ("zero"); // Füge einen Wert zum Ende hinzu arr.push ("one", 2); // Füge zwei weitere Werte hinzu
Sie können dem Ende eines Arrays auch ein Element hinzufügen, indem Sie dem arr-Element einen Wert zuweisen. Um ein Element am Anfang eines Arrays einzufügen, können Sie die Methode verwenden nicht verschieben ()und die vorhandenen Elemente in dem Array werden zu höheren Indizes verschoben.
Sie können Elemente eines Arrays mit dem Löschoperator löschen, wie z. B. gewöhnliche Eigenschaften von Objekten:
Var arr \u003d; arr löschen; 2 in arr; // false, Index 2 im Array ist undefiniert arr.length; // 3: Der Löschoperator ändert die Längeneigenschaft des Arrays nicht
Das Entfernen eines Elements ist ähnlich (aber geringfügig unterschiedlich) und weist diesem Element einen undefinierten Wert zu. Beachten Sie, dass das Anwenden des Löschoperators auf ein Element in einem Array weder den Wert der Eigenschaft length ändert noch die Elemente mit höheren Indizes nach unten verschiebt, um die nach dem Löschen des Elements verbleibende Lücke zu füllen.
Es ist auch möglich, Elemente am Ende eines Arrays zu entfernen, indem der Eigenschaft length einfach ein neuer Wert zugewiesen wird. Arrays haben eine Methode pop () (im Gegensatz zu push ()), wodurch die Länge des Arrays um 1 verringert und der Wert des entfernten Elements zurückgegeben wird. Es gibt auch eine Methode verschiebung () (im Gegensatz zu unshift ()), wodurch das Element am Anfang des Arrays entfernt wird. Im Gegensatz zum Löschoperator verschiebt die Methode shift () alle Elemente um eine Position unter ihren aktuellen Indizes.
Schließlich gibt es eine Mehrzweckmethode spleiß ()Damit können Sie Array-Elemente einfügen, löschen und ersetzen. Es ändert den Wert der Eigenschaft length und verschiebt die Elemente des Arrays nach Bedarf mit niedrigeren oder höheren Indizes. Wir werden all diese Methoden etwas später diskutieren.
Mehrdimensionale Arrays
JavaScript unterstützt keine "echten" mehrdimensionalen Arrays, kann diese jedoch mithilfe von Arrays aus Arrays gut simulieren. Für den Zugriff auf ein Datenelement in einem Array von Arrays ist es ausreichend, den Operator zweimal zu verwenden.
Angenommen, die Variablenmatrix ist ein Array von Zahlenarrays. Jedes Element der Matrix [x] ist ein Array von Zahlen. Sie können die Ausdrucksmatrix [x] [y] verwenden, um auf eine bestimmte Nummer in einem Array zuzugreifen. Im Folgenden finden Sie ein spezielles Beispiel, in dem ein zweidimensionales Array als Multiplikationstabelle verwendet wird:
// Mehrdimensionales Array erstellen var table \u003d new Array (10); // Die Tabelle enthält 10 Zeilen für (var i \u003d 0; i
Array-Klassenmethoden
Der ECMAScript 3-Standard definiert viele praktische Funktionen für die Arbeit mit Arrays als Teil von Array.prototype, die als Methoden für jedes Array verfügbar sind. Diese Methoden werden in den folgenden Unterabschnitten vorgestellt.
Join () -Methode
Die Methode Array.join () konvertiert alle Elemente im Array in Zeichenfolgen, verkettet sie und gibt die resultierende Zeichenfolge zurück. Ein optionales Argument kann mit einer Zeichenfolge an die Methode übergeben werden, mit der Elemente in der Ergebniszeichenfolge getrennt werden. Wenn keine Trennzeichenfolge angegeben ist, wird ein Komma verwendet. Das folgende Snippet führt beispielsweise zu der Zeichenfolge "1,2,3":
Var arr \u003d; arr.join (); // "1,2,3" arr.join ("-"); // 1-2-3
Die reverse () Methode
Die Array.reverse () -Methode kehrt die Reihenfolge der Elemente in einem Array um und gibt ein neu geordnetes Array zurück. Die Permutation erfolgt direkt auf dem ursprünglichen Array, d.h. Diese Methode erstellt kein neues Array mit neu angeordneten Elementen, sondern ordnet sie in einem bereits vorhandenen Array neu an. Das folgende Snippet, das die Methoden reverse () und join () verwendet, führt beispielsweise zur Zeichenfolge "3,2,1":
Var arr \u003d; arr.reverse (). join (); // 3,2,1
Sort () -Methode
Die Array.sort () -Methode sortiert die Elemente im ursprünglichen Array und gibt das sortierte Array zurück. Wenn sort () ohne Argumente aufgerufen wird, erfolgt die Sortierung alphabetisch (zum Vergleich werden Elemente bei Bedarf vorübergehend in Zeichenfolgen konvertiert). Undefinierte Elemente werden an das Ende des Arrays eingeschlossen.
Sie können eine Vergleichsfunktion als Argument an sort () übergeben, um sie in einer anderen nicht alphabetischen Reihenfolge zu sortieren. Diese Funktion legt fest, welches der beiden Argumente in der sortierten Liste an erster Stelle steht. Wenn das erste Argument vor dem zweiten stehen muss, muss die Vergleichsfunktion eine negative Zahl zurückgeben. Wenn das erste Argument dem zweiten im sortierten Array folgen soll, muss die Funktion eine Zahl größer als Null zurückgeben. Und wenn die zwei Werte äquivalent sind (d. H. Die Reihenfolge ist nicht wichtig), sollte die Vergleichsfunktion 0 zurückgeben:
Var arr \u003d; arr.sort (); // Alphabetische Reihenfolge: 1111, 222, 33, 4 arr.sort (Funktion (a, b) (// Numerische Reihenfolge: 4, 33, 222, 1111 return ab; // Gibt den Wert 0 // abhängig von der Sortierreihenfolge zurück A und B)); // Rückwärts sortieren, vom höchsten zum niedrigsten arr.sort (Funktion (a, b) (return b-a));
Beachten Sie, wie bequem es ist, eine unbenannte Funktion in diesem Snippet zu verwenden. Die Vergleichsfunktion wird nur hier verwendet, sodass kein Name angegeben werden muss.
Die concat () -Methode
Die Methode Array.concat () erstellt ein neues Array und gibt es zurück. Es enthält die Elemente des ursprünglichen Arrays, für das die Methode concat () aufgerufen wurde, und die Werte aller Argumente, die an die Methode concat () übergeben wurden. Wenn eines dieser Argumente selbst ein Array ist, werden seine Elemente dem zurückgegebenen Array hinzugefügt. Es ist jedoch zu beachten, dass es keine rekursive Umwandlung eines Arrays von Arrays in ein eindimensionales Array gibt. Die concat () -Methode ändert das ursprüngliche Array nicht. Nachfolgend einige Beispiele:
Var arr \u003d; arr.concat (4, 5); // Gibt arr.concat () zurück; // Gibt arr.concat (,) zurück // Gibt arr.concat (4,] zurück) // Gibt zurück]
Slice () -Methode
Die Array.slice () -Methode gibt ein Slice oder Subarray des angegebenen Arrays zurück. Die beiden Argumente für die Methode definieren den Anfang und das Ende des zurückgegebenen Blocks. Das zurückgegebene Array enthält das im ersten Argument nummerierte Element sowie alle nachfolgenden Elemente bis zum im zweiten Argument nummerierten Element (jedoch ohne dieses).
Wenn nur ein Argument angegeben wird, enthält das zurückgegebene Array alle Elemente von der Startposition bis zum Ende des Arrays. Wenn eines der Argumente negativ ist, gibt es die Elementnummer relativ zum Ende des Arrays an. Somit entspricht Argument -1 dem letzten Element des Arrays und Argument -3 dem dritten Element des Arrays vom Ende. Hier sind einige Beispiele:
Var arr \u003d; arr.slice (0,3); // Gibt arr.slice (3) zurück; // Gibt arr.slice (1, -1) zurück; // Gibt arr.slice zurück (-3, -2); // Wird zurückkehren
Splice () -Methode
Die Array.splice () -Methode ist eine generische Methode, mit der Elemente in ein Array eingefügt oder daraus entfernt werden. Im Gegensatz zu den Methoden Slice () und Concat () ändert die Methode splice () das ursprüngliche Array, auf dem sie aufgerufen wurde. Beachten Sie, dass die Methoden splice () und Slice () sehr ähnliche Namen haben, jedoch völlig unterschiedliche Operationen ausführen.
Die splice () -Methode kann Elemente aus einem Array entfernen, neue Elemente einfügen oder beides gleichzeitig ausführen. Die Elemente des Arrays werden nach Bedarf verschoben, so dass nach dem Einfügen oder Löschen eine zusammenhängende Sequenz gebildet wird.
Das erste Argument für die splice () -Methode gibt die Position im Array an, aus der eingefügt und / oder gelöscht werden soll. Das zweite Argument gibt die Anzahl der Elemente an, die aus dem Array entfernt (ausgeschnitten) werden sollen. Wenn das zweite Argument weggelassen wird, werden alle Array-Elemente vom angegebenen Array bis zum Ende des Arrays entfernt. Die splice () -Methode gibt ein Array der entfernten Elemente oder (falls keines der Elemente entfernt wurde) ein leeres Array zurück.
Die ersten beiden Argumente für die Methode splice () geben die zu entfernenden Array-Elemente an. Auf diese Argumente können beliebig viele zusätzliche Argumente folgen, die die Elemente angeben, die in das Array eingefügt werden sollen, beginnend an der im ersten Argument angegebenen Position.
Var arr \u003d; arr.splice (4); // Gibt arr \u003d arr.splice (1,2) zurück; // Gibt arr \u003d arr.splice (1,1) zurück; // Wird zurückkehren; arr \u003d arr \u003d; arr.splice (2,0, "a", "b"); // Wird zurückkehren; arr \u003d
Die Methoden push () und pop ()
Mit den Methoden push () und pop () können Sie mit Arrays wie Stacks arbeiten. Die push () -Methode fügt am Ende des Arrays ein oder mehrere neue Elemente hinzu und gibt die neue Länge zurück. Die pop () -Methode führt die entgegengesetzte Operation aus: Sie entfernt das letzte Element des Arrays, verringert die Länge des Arrays und gibt den entfernten Wert zurück. Beachten Sie, dass beide Methoden das ursprüngliche Array ändern, anstatt eine geänderte Kopie davon zu erstellen.
Die Methoden unshift () und shift ()
Die Methoden unshift () und shift () verhalten sich ähnlich wie push () und pop (), außer dass sie Elemente am Anfang des Arrays einfügen und entfernen, nicht am Ende. Die Methode unshift () verschiebt vorhandene Elemente in Richtung größerer Indizes, um Platz zu schaffen, fügt das Element oder die Elemente am Anfang des Arrays hinzu und gibt die neue Länge des Arrays zurück. Die Methode shift () entfernt das erste Element des Arrays und gibt es zurück. Dabei werden alle nachfolgenden Elemente um eine Position nach unten verschoben, um den am Anfang des Arrays frei gewordenen Platz zu belegen.
Letzte Aktualisierung: 09.04.2018
Arrays sind für die Arbeit mit Datensätzen vorgesehen. Der Ausdruck new Array () wird verwendet, um ein Array zu erstellen:
Var myArray \u003d neues Array ();
Es gibt auch eine kürzere Möglichkeit, ein Array zu initialisieren:
Var myArray \u003d;
In diesem Fall erstellen wir ein leeres Array. Sie können aber auch Anfangsdaten hinzufügen:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (Personen);
In diesem Fall hat das myArray drei Elemente. Grafisch kann es wie folgt dargestellt werden:
Indizes werden verwendet, um auf einzelne Elemente eines Arrays zu verweisen. Die Zählung beginnt bei Null, dh das erste Element hat den Index 0 und das letzte 2:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (Personen); // Tom var person3 \u003d people; // Sam console.log (person3); // Sam
Wenn wir versuchen, auf ein Element mit einem Index zuzugreifen, der größer als die Größe des Arrays ist, werden wir undefiniert:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (Personen); // nicht definiert
Außerdem werden durch den Index die Werte für die Array-Elemente festgelegt:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (Personen); // Tom people \u003d "Bob"; console.log (Personen); // Bob
Darüber hinaus können Sie im Gegensatz zu anderen Sprachen wie C # oder Java ein Element installieren, das ursprünglich nicht installiert wurde:
Var people \u003d ["Tom", "Alice", "Sam"]; console.log (Personen); // undefiniert - es gibt nur drei Elemente im Array people \u003d "Bob"; console.log (Personen); // Bob
Es ist auch erwähnenswert, dass Arrays im Gegensatz zu einer Reihe von Programmiersprachen in JavaScript nicht stark typisiert sind, sondern dass ein Array Daten verschiedener Typen speichern kann:
Var Objekte \u003d ["Tom", 12, wahr, 3,14, falsch]; console.log (Objekte);
spread-Operator
mit dem Spread-Operator ... können Sie Werte separat aus einem Array entnehmen:
Lassen Sie Zahlen \u003d; console.log (... Nummern); // 1 2 3 4 console.log (Zahlen); // //
der Spread-Operator wird vor dem Array angegeben. Infolgedessen gibt der Ausdruck ... numbers eine Reihe von Zahlen zurück, es handelt sich jedoch nicht um ein Array, sondern um einzelne Werte.
Mehrdimensionale Arrays
Arrays können eindimensional und mehrdimensional sein. Jedes Element in einem mehrdimensionalen Array kann ein separates Array sein. Oben haben wir ein eindimensionales Array betrachtet. Lassen Sie uns nun ein mehrdimensionales Array erstellen:
Var number1 \u003d; // eindimensionales Array var numbers2 \u003d [,]; // zweidimensionales Array
Visuell können beide Arrays wie folgt dargestellt werden:
Eindimensionale Array-Nummern1
Um ein einzelnes Element eines Arrays abzurufen, wird auch ein Index verwendet:
Var tomInfo \u003d Menschen;
Erst jetzt repräsentiert die Variable tomInfo ein Array. Um ein Element in ein verschachteltes Array zu bekommen, müssen wir seine zweite Dimension verwenden:
Console.log ("Name:" + Personen); // Tom console.log ("Alter:" + Personen); // 25
Das heißt, wenn wir ein zweidimensionales Array in Form einer Tabelle visuell darstellen können, bezieht sich das people-Element auf die Tabellenzelle, die sich am Schnittpunkt der ersten Zeile und der zweiten Spalte befindet (die erste Dimension - 0 - Zeile, die zweite Dimension - 1 - Spalte).
Wir können auch die Aufgabe erledigen:
Var people \u003d [["Tom", 25, falsch], ["Bill", 38, wahr], ["Alice", 21, falsch]]; Menschen \u003d 56; // einen separaten Wert zuweisen console.log (people); // 56 people \u003d ["Bob", 29, false]; // ein Array zuweisen console.log (people); // Bob
Beim Erstellen mehrdimensionaler Arrays sind wir nicht nur auf zweidimensionale beschränkt, sondern können auch Arrays mit großen Dimensionen verwenden:
Var Zahlen \u003d; Zahlen \u003d; // jetzt ist numbers ein zweidimensionales Array number \u003d; // jetzt ist numbers ein dreidimensionales Array number \u003d 5; // Das erste Element des 3D-Arrays ist 5 console.log (numbers);