Array -Erweiterungsmethode in ES6

Form wird in ein echtes Array umgewandelt

Sprechen wir zuerst über das Nutzungsszenario. In JS müssen wir das DOM häufig bedienen, z. B. das Erhalten der Eingabe -Tags aller Seiten und das Finden eines Elements der Typ -Typ -Schaltfläche und dann ein Klickereignis für diese Schaltfläche. Wir können das tun;

 var inputObjs = document.GetElementsByTagName ('input'); für (var i = 0; i <inputObjslänge; i ++) {if (inputObjs [i] .type === 'Taste') {inputObjs [i] .onclick = function () {return;

Auf diese Weise gibt es definitiv kein Problem, auf diese Weise zu schreiben, aber wir wissen, dass viele Methoden des Betriebs von Arrays viel besser sind als für Schleifen, wie die foreach -Methode von ES5 sehr nützlich. Aber kann es direkt verwendet werden? nicht! Da die DOM -Objektsammlung kein wirklich Array -Array -Typ ist, wird ein Fehler verursacht, wenn Sie ihn direkt verwenden.

 var inputObjs = document.getElementsByTagName ('input'); inputObjs.foreach (); //inputobjs.foreach ist keine Funktion

Trotzdem können wir es immer noch verwenden. Wir können es nicht direkt oder indirekt verwenden. Verwenden Sie einfach die leistungsstarke JS -Objekt -Imitationsfunktion;

 var inputObjs = document.getElementsByTagName ('input'); console.info (inputObjs); // [] Länge: 0__Proto__: htmlcollectionConsole.info ([]. Slice.call (inputObjs)); // [] Länge: 0__Proto__: Array [0]

Auf diese Weise können Sie nach dem Umwandlung in ein echtes Array die Array -Methode nach Belieben aufrufen. Diese Methode ist sicherlich machbar, aber sie ist nicht leicht zu verstehen und ist zu "dründlich". ES6 bietet uns eine einfachere und direktere Methode, die sehr einfach zu verwenden ist:

 var inputObjs = document.getElementsByTagName ('input'); console.info (inputObjs); // [] Länge: 0__Proto__: htmlcollectionConsole.info (array.from (inputObjs)); // [] Länge: 0__Proto__: Array [0]

Das Ergebnis ist das gleiche, aber es ist semantischer und einfacher zu verstehen. Ist es nicht einfach zu bedienen? Natürlich reichen diese nicht aus. Mit dieser Methode kann nicht nur ein Datentyp des Klassenarrays in ein Array konvertiert werden, sondern die Auswirkungen verschiedener Typen sind unterschiedlich. Der Test lautet wie folgt:

 Sei str = 'google'; console.log (array.from (str)); // ["g", "o", "o", "o", "g", "l", "e"] lass num = 234; console.log (array.from (num)); // [] let bol = false; console.log (array.from (bol)); lass obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] lass SuperObj = {0: 'foo', 1: 'bar', Länge: 2}; console.log (array.from (Superobj)); // ["Foo", "Bar"]

Hier sind die Ergebnisse des Aufrufens dieser Methode durch verschiedene Datentypen. Es ist erwähnenswert, dass Saiten und einige spezielle Objekte mit Inhalten in Arrays umgewandelt werden können. Spezielle Objekte beziehen sich auf Objekte, deren Inhalt gemäß numerischen Schlüsselwertpaaren angeordnet ist und Längenattribute aufweisen. Diese Art von Objekt kann für Schleifen verwendet werden, und Zeichenfolgen können auch für Schleifen verwendet werden, um jeden Charakter zu erhalten, sodass sie auf einen Satz hinausgeht. Die Verwendung der From -Methode, mit der die für die Schleife zum Ausgabe von Inhalten verwendet werden kann, ist kein leeres Array. Hier möchte ich Sie daran erinnern, dass Freunde, die JQuery verwendet haben, darauf achten können, welche Struktur das JQuery -Objekt zurückgegeben wird, wenn Sie den Selektor verwenden, um Elemente auszuwählen? Tatsächlich ist es die letzte Struktur in unserem Beispiel. Weitere Informationen finden Sie in meinen Artikeln für die Serie von JQuery Source Code Analysis.

von Konvertiten in Arrays

Es gibt zwei Möglichkeiten, ein Array zu erstellen, eines ist der Konstruktor:

 Sei arr = Array (1,2,3);

Ein anderer ist die am häufigsten verwendete buchstäbliche Kreation:

 Sei arr = [1,2,3];

Die Array.of -Methode ist tatsächlich eine Ergänzung zur ersten Methode, und die Verwendung ist wie folgt:

 console.log (array.of (1,2,3)); // [1,2,3]

Es scheint den gleichen Effekt wie die Konstruktionsmethode zu haben. Warum ist diese Methode also noch erforderlich? Schauen Sie sich die folgenden Beispiele an, um zu verstehen:

 console.log (array ()); //; console.log(Array(1)); ///®undefined wapyconsole.log(Array(1,2)); // [1,2]

In diesem Beispiel unterscheidet sich die Anzahl der Parameter in ihren Bedeutungen. Wenn es nur einen Parameter gibt, repräsentiert der Parameter das durch die Länge dargestellte Element. Wenn es größer als 1 Parameter ist, wird es Verwirrung verursachen. Hat dieses Problem jedoch nicht mit der Array.of -Methode, da die durch seine Parameter dargestellten Elemente immer dargestellt werden:

 console.log (array.of ()); //; console.log(Array.of(1)); //; 1 console.log(Array.of(1,2)); // [1,2]

Kopiewithin -Array Interner Datenkopie Ersatz

Die Hauptfunktion der CopyWithin -Methode besteht darin, die internen Werte des Arrays zu ersetzen. Diese Methode akzeptiert drei Parameter, die die Startkopierposition, die Endkopieposition und die Einfügungsposition angeben. Das Beispiel lautet wie folgt:

 [1, 2, 3, 4, 5]. 5] .Copywithin (0, -2, -1) // [4, 2, 3, 4, 5] // Bit 3 in Bit 0 []. 3, 4, 5]; 3, 4, 5]

Das obige ist die Array -Erweiterungsmethode in ES6, die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!