JavaScript-Tauchgänge – zwei Array-Methoden

Als Entwickler, der sich mit JavaScript beschäftigt, haben wir jeden Tag Kontakt mit Arrays, es spielt keine Rolle, ob wir es wollen oder nicht, schließlich müssen wir mit Arrays arbeiten, weil sie die Daten speichern und bearbeiten können.

Was ist eigentlich ein Array? Wenn es durch Einfachheit definiert wird, ist es ein Warehouse, das es Ihnen ermöglicht, eine Sammlung beliebiger Datentypen zu speichern, was bedeutet, dass Sie eine Reihe von Objekten, booleschen Werten, Zahlen und Zeichenfolgen haben können. Warum habe ich es Lagerhaus genannt?!

Clutter_in_basement.jpg

Ich wollte den Datensatz in Ihrem Array nicht angreifen – verstehen Sie mich bitte nicht falsch. Indem ich Ihnen das obige Bild zeige, wollte ich ausdrücken, was für ein Durcheinander wir in unserer Sammlung haben können, wenn wir uns nicht darum kümmern, und das ist im Grunde unser Array – Keller.

1. Zulassung

In diesem Blogbeitrag möchte ich über zwei interessante Methoden schreiben, die mir in meiner alltäglichen Entwicklung sehr helfen. Wir werden über Array.from- und Array.of-Methoden sprechen. Lassen Sie uns darauf eingehen – ich kann es kaum erwarten, Ihnen diese Möglichkeiten zum Transformieren von Sammlungs-Arrays zu zeigen.

2. Array.von()

Wenn Sie noch nichts von der folgenden Methode gehört haben, wurde sie in der ES2015-Spezifikation der JavaScript-Standards ausgeliefert. Die Methode bietet Ihnen die Möglichkeit, eine neue, flache Kopie eines Arrays aus einem Datensatz zu erstellen, der Array-ähnlich oder iterierbar ist.

Beispiel 1:

Array.from(“JavaScript”);
// Result: [“J”, “a”, “v”, “a”, “S”, “c”, “r”, “i”, “p”, “t”];

Eine vorgestellte Syntax am obigen Beispiel zeigt Ihnen eine grundlegende Verwendung der Methode. Sie haben Recht, wenn Sie denken, dass diese grundlegende Syntax das Wort „JavaScript“ in ein Array umwandelt, wie es die split-Methode tun würde, aber split gibt Ihnen keine Möglichkeit, es zu mappen.

Erinnern Sie sich, als wir versuchten, NodeLists in Array zu konvertieren? Ja, wir mussten spezielle Hacks verwenden, um das zu erreichen, vergessen Sie Hacks, Sie haben Array.from(), das Ihnen hilft, ohne bestimmte Kombinationen über ein Array zu iterieren, bitte sehen Sie sich das Beispiel unten an.

Beispiel 2:

 const nodeList = document.querySelectorAll(‘.elemets-list’);
 Array.from(nodeList, elem => elem.textContent);

Im obigen Beispiel erhalte ich eine NodeList, indem ich querySelectorAll verwende, die wir iterierbar machen müssen, um sie zuzuordnen und den gewünschten Wert zu erhalten. In diesem Fall verwende ich die Pfeilfunktion und gebe textContent eines der Elemente aus einer NodeList zurück.

Die Methode enthält ein weiteres Argument, das Sie als dieses verwenden können.

Beispiel 3:

const fn = (data) => data; // 405;
   Array.from([1,2,3], x => {
      this.a = x * 5;
      this.b = x * 9;
      this.result = a * b;

      return this.a * this.b; // [45, 180, 405]
   }, fn(this.result));

Ich habe noch ein Beispiel für Sie. Wussten Sie, dass Sie ein Array mit Array.from generieren können? Ja, du kannst! Schauen Sie sich auf wirklich einfache Weise das folgende Code-Snippet an:

Beispiel 4:

// Generate an array with 5 slots without any values
Array.from({ length: 5 }); // Result: [undefined x 5];

// Generate an array with 5 slots filled by index
Array.from({ length: 5 }, (v, i) => i); // Result: [0,1,2,3,4];

// Perform many different operations on generated array
Array.from({ length: 5 }, (v, i) => i * 2); // Result: [0,2,4,6,8];

Sie können verwenden Array.from() an:

  • Array-ähnliche Objekte, dh Objekte mit Länge und indizierten Elementen
  • iterierbare Objekte wie Map und Set

3. Array.of()

Die zweite Methode, die ich Ihnen vorstellen möchte, ist Array.of(). Diese Methode erstellt basierend auf den an die Methode übergebenen Parametern ein neues Array für Sie.

Beispiel 1:

Array.of(7); // [7]
Array.of(1,2,3,4,5,6); // [1,2,3,4,5,6]
Array.of(...items);

Wie Sie im obigen Codebeispiel sehen können, habe ich Ihnen eine Funktionalität der Array.of-Methode gezeigt. Wichtig ist, dass es keine leeren Slots erstellt, wie es ein normaler Array-Konstruktor tun würde, sehen Sie sich das Beispiel unten an.

Beispiel 2:

new Array(7); // [empty x 7]

Die obige Deklaration des Konstruktors wird für uns sieben leere Slots erstellen, was völlig unnötig ist, es sei denn, Sie möchten etwas Speicher reservieren. Das wäre eine gute Lösung, gilt aber meiner Meinung nach nur für ein riesiges Array mit Millionen oder Hunderttausend Datensätzen.

Und das wäre es in diesem Blogbeitrag, ich ermutige Sie, die Links unten zu sehen. Diese Links leiten Sie zur offiziellen ECMAScript-Spezifikation weiter, wo Sie detailliert sehen können, wie diese beiden Methoden im Inneren funktionieren.

Array.from: https://tc39.github.io/ecma262/#sec-array.from
Anordnung von:

Similar Posts

Leave a Reply

Your email address will not be published.