In diesem Artikel wird ECMAScript 6 eingeführt, die uns Neuarray -Betriebsmethoden und die Anwendung dieser Neuarray -Funktionen in vorhandenen Browsern bringen.
HINWEIS: Ich werde den Konstruktor und die Klasse der Begriffe abwechselnd verwenden.
Klassenmethoden
Die Methode, die das Array selbst hat.
Array.from (Arrayähnlich, Mappunc ?, ThisArg?)
Die Grundfunktion von Array.from () besteht darin, zwei Arten von Objekten in Arrays umzuwandeln.
Array-ähnliche Objekte
Diese Objektklasse hat Eigenschaften von Länge und Index. Das Ergebnis des DOM -Operators gehört zu dieser Klasse, wie z. B. Dokument.GetElementsByClassName ().
Iterable Objekte
Bei der Einnahme von Werten kann jeweils nur ein Element eingenommen werden. Arrays sind iterbar, wie die Neuarray -Struktur, die Karte (Karte) und die Set (SET) in ECMAScript.
Der folgende Code ist ein Beispiel für das Konvertieren eines Array -Objekts in ein Array:
Die Codekopie lautet wie folgt:
lass = document.querySelectorAll ('ul.fancy li');
Array.From (lis) .foreach (Funktion (li) {
console.log (Knoten);
});
Das Ergebnis von querySelectorAll () ist kein Array, und es wird keine Methode für Each () geben. Aus diesem Grund müssen wir diese Methode vor der Verwendung in ein Array konvertieren.
Verwenden von Mapping über Array.from ()
Array.From () ist auch eine Alternative zu Generika mit MAP ().
Die Codekopie lautet wie folgt:
lass Spans = document.querySelectorAll ('span.name');
// map (), im Allgemeinen:
lass names1 = array.prototype.map.call (Spans, s => S.TextContent);
// array.from ():
lass names2 = array.from (Spans, s => S.TextContent);
Der zweite Parameter in den beiden Methoden ist eine Pfeilfunktion.
In diesem Beispiel ist das Ergebnis von document.querySelectorAll () ein weiteres Klassenarray -Objekt, kein Array. Aus diesem Grund können wir Map () nicht direkt anrufen. Im ersten Beispiel konvertieren wir das Klassenarray -Objekt in ein Array. Hier lassen wir die Zwischenschritte durch generische Methoden und Zwei-Parameter-Versionen von Array.from () weg.
Löcher
Array.From () ignoriert fehlende Elemente - Löcher im Array, die als undefinierte Elemente behandelt werden.
Die Codekopie lautet wie folgt:
> Array.from ([0,, 2])
[0, undefiniert, 2]
Dies bedeutet, dass Sie Array.from () verwenden können, um ein Array zu erstellen oder zu füllen:
Die Codekopie lautet wie folgt:
> Array.From (Neuarray (5), () => 'a')
['a', 'a', 'a', 'a', 'a', 'a']
> Array.From (Neuarray (5), (x, i) => i)
[0, 1, 2, 3, 4]
Wenn Sie ein Array mit einem festen Wert füllen möchten, wäre Array.Prototype.fill () (siehe unten) eine bessere Wahl. Der erste sind die beiden Methoden des obigen Beispiels.
von () in einer Array (Array) -Subklasse
Ein weiteres Verwendungsszenario für Array.from () besteht darin, eine Instanz eines Array -Objekts oder eines iterablen Objekts in eine Array -Unterklasse umzuwandeln. Wenn Sie eine Array -Unterklasse myArray erstellen und diese Art von Objekt in eine Instanz von MyArray umwandeln möchten, können Sie einfach myarray.from () verwenden. Der Grund, warum dies verwendet werden kann, ist, dass in ECMascript 6 Konstruktoren erben werden (der Konstruktor der Elternklassen ist der Prototyp seines Subklass -Konstruktors).
Die Codekopie lautet wie folgt:
Klasse myarray erweitert Array {
...
}
lass InstanceOfMyArray = myarray.from (aneriterable);
Sie können diese Funktion mit der Zuordnung kombinieren, um den Kartenbetrieb abzuschließen, bei dem Sie den Ergebniskonstruktor steuern:
Die Codekopie lautet wie folgt:
// aus () bestimmen Sie den Konstruktor des Ergebniss über den Empfänger
// (in diesem Fall myarray)
lass InstanceOfMyArray = myarray.from ([1, 2, 3], x => x * x);
// map (): Das Ergebnis ist immer eine Instanz von Array
let InstanceOfArray = [1, 2, 3] .Map (x => x * x);
Array.of (... Artikel)
Wenn Sie eine Reihe von Werten in ein Array konvertieren möchten, sollten Sie den Array -Quelltext (Array Literal) verwenden. Besonders wenn es nur einen Wert gibt und es eine Zahl ist, wird der Konstruktor des Arrays in Streik. Weitere Informationen finden Sie unter.
Die Codekopie lautet wie folgt:
> Neuarray (3, 11, 8)
[3, 11, 8]
> Neuarray (3)
[,,,]
> New Array (3.1)
Rangeerror: Ungültige Arraylänge
Wenn wir also eine Reihe von Werten in eine Instanz eines Subkonstruktors umwandeln wollen, was sollen wir dann tun? Dies ist der Wert von Array.of () (denken Sie daran, der Array -Subkonstruktor erbt alle Array -Methoden, einschließlich von () natürlich).
Die Codekopie lautet wie folgt:
Klasse myarray erweitert Array {
...
}
console.log (myarray.of (3, 11, 8) myarray; // WAHR
console.log (myarray.of (3) .Length === 1); // WAHR
Array.Of () ist ziemlich bequem, die Werte in einem Array ohne die seltsame Art der Umstellung von Array () zu wickeln. Achten Sie aber auch auf Array.Prototype.map (), hier gibt es eine Grube:
Die Codekopie lautet wie folgt:
> ['a', 'b']. map (array.of)
['a', 0, ['a', 'b'],
['B', 1, ['A', 'B']]]]]
> ['a', 'b']. map (x => array.of (x)) // besser
[['A'], ['B']]]
> ['a', 'b']. map (x => [x]) // am besten (in diesem Fall)
[['A'], ['B']]]
Wie Sie sehen können, übergibt MAP () drei Parameter in seinen Rückruf. Die letzten beiden werden oft übersehen (Details).
Prototypmethoden
Für Arrays gibt es viele neue Methoden.
Iterieren über Arrays
Die folgende Methode hilft dabei, die Iteration im Array zu vervollständigen:
Die Codekopie lautet wie folgt:
Array.Prototype.entries ()
Array.Prototype.keys ()
Array.Prototype.Values ()
Jede der oben genannten Methoden gibt eine Reihe von Werten zurück, wird jedoch nicht als Array zurückgegeben. Sie werden durch Iteratoren einzeln angezeigt. Schauen wir uns ein Beispiel an (ich werde den Inhalt des Iterators mit Array.from ()) in ein Array stellen:
Die Codekopie lautet wie folgt:
> Array.from (['a', 'b'] .Keys ())
[0, 1]
> Array.from (['a', 'b'] .Values ())
['a', 'b']
> Array.from (['a', 'b'] .ententries ())
[[0, 'a'],
[1, 'b']]
Sie können Einträge () und für Schleifen in ECMascript 6 kombinieren, um das iterative Objekt leicht in ein Schlüsselwertpaar zu zerlegen:
Die Codekopie lautet wie folgt:
für (lass [index, elem] von ['a', 'b']. Einträge ()) {
console.log (Index, Elem);
}
Hinweis: Dieser Code kann bereits im neuesten Firefox -Browser ausgeführt werden. t Firefox.
Suchen Sie Array -Elemente
Array.Prototype.find (Prädikat, ThisArg?) Gibt das erste Element zurück, das die Rückruffunktion erfüllt. Wenn kein Element die Bedingung erfüllt, gibt es undefinierte zurück. Zum Beispiel:
Die Codekopie lautet wie folgt:
> [6, -5, 8] .Find (x => x <0)
-5
> [6, 5, 8] .Find (x => x <0)
undefiniert
Array.Prototype.findIndex (Prädikat, ThisArg?)
Gibt den Index des ersten Elements zurück, der die Rückruffunktion erfüllt. Wenn keine zufriedenstellenden Elemente gefunden werden, wird -1 zurückgegeben. Zum Beispiel:
Die Codekopie lautet wie folgt:
> [6, -5, 8] .FindIndex (x => x <0)
1
> [6, 5, 8] .FindIndex (x => x <0)
-1
Beide finden* Methoden ignorieren Löcher, dh sie achten nicht auf undefinierte Elemente. Die Signatur der Abschlussfunktion des Rückrufs lautet:
Prädikat (Element, Index, Array)
Finden Sie Nan über findIndex ()
Array.Prototype.indexof () hat eine bekannte Einschränkung, dh es kann NANS nicht finden. Weil es Identität (===) verwendet, um passende Elemente zu finden:
Die Codekopie lautet wie folgt:
> [Nan] .Indexof (Nan)
-1
Mit FindIndex () können Sie Object.is () verwenden, was kein solches Problem verursacht:
Die Codekopie lautet wie folgt:
> [Nan] .findindex (y => objekt.is (nan, y))
0
Sie können auch eine allgemeinere Möglichkeit verwenden, um eine Helferfunktion Elemis () zu erstellen:
Die Codekopie lautet wie folgt:
> Funktion Elemis (x) {return object.is.bind (Objekt, x)}
> [Nan] .Findindex (Elemis (Nan))
0
Array.Prototype.Fill (Wert, Start?, Ende?)
Verwenden Sie den angegebenen Wert, um ein Array zu füllen:
Die Codekopie lautet wie folgt:
> ['A', 'B', 'C']. FILL (7)
[7, 7, 7]
Löcher werden nicht mit einer besonderen Behandlung behandelt:
Die Codekopie lautet wie folgt:
> Neuarray (3) .Fill (7)
[7, 7, 7]
Sie können auch den Start und Ende Ihrer Füllung einschränken:
Die Codekopie lautet wie folgt:
> ['A', 'B', 'C']. FILL (7, 1, 2)
['a', 7, 'c']
Wann kann ich die Neuarray -Methode verwenden?
Es gibt einige Methoden, die im Browser verwendet werden können.