ECMAScript 6 wird uns bald eine Vorschau auf neue Array-Operationsmethoden_Javascript-Fähigkeiten bringen

In diesem Artikel werden die neuen Array-Operationsmethoden vorgestellt, die uns ECMAScript 6 bietet, und wie diese neuen Array-Funktionen in vorhandenen Browsern angewendet werden.

Hinweis: Ich werde die Begriffe Konstruktor und Klasse synonym verwenden.

Klassenmethode
Methoden, die Array selbst gehören.

Array.from(arrayLike, mapFunc?, thisArg?)

Die Grundfunktion von Array.from() besteht darin, zwei Arten von Objekten in Arrays umzuwandeln.

Array-ähnliche Objekte

Dieser Objekttyp verfügt über Längen- und Indexeigenschaften. Das Ergebnis des DOM-Operators gehört zu dieser Klasse, beispielsweise document.getElementsByClassName().

Iterierbare Objekte

Wenn dieser Objekttyp einen Wert annimmt, kann er jeweils nur ein Element annehmen. Arrays sind iterierbar, genau wie die neuen Array-Strukturen in ECMAScript, Map und Set.

Der folgende Code ist ein Beispiel für die Konvertierung eines Array-ähnlichen Objekts in ein Array:

Code kopieren Der Code lautet wie folgt:

let lis = document.querySelectorAll('ul.fancy li');
Array.from(lis).forEach(function (li) {
console.log(node);
});

Das Ergebnis von querySelectorAll() ist kein Array und es gibt keine forEach()-Methode. Aus diesem Grund müssen wir es in ein Array konvertieren, bevor wir diese Methode verwenden.

Mapping über Array.from() verwenden
Array.from() ist auch eine Alternative zur Verwendung von map() mit Generika.

Code kopieren Der Code lautet wie folgt:

let spans = document.querySelectorAll('span.name');
// map(), generisch:
let name1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from():
let name2 = Array.from(spans, s => s.textContent);

Der zweite Parameter in beiden Methoden ist eine Pfeilfunktion.
In diesem Beispiel ist das Ergebnis von document.querySelectorAll() ein Array-ähnliches Objekt, kein Array. Aus diesem Grund können wir map() nicht direkt aufrufen. Im ersten Beispiel konvertieren wir zur Verwendung von forEach() das Array-ähnliche Objekt in ein Array. Hier verwenden wir die generische Methode und die Zwei-Parameter-Version von Array.from(), wodurch der Zwischenschritt entfällt.

Löcher
Array.from() ignoriert fehlende Elemente – Lücken – im Array und behandelt sie als undefinierte Elemente.

Code kopieren Der Code lautet wie folgt:

> Array.from([0,,2])
[ 0, undefiniert, 2 ]

Das bedeutet, dass Sie Array.from() verwenden können, um ein Array zu erstellen oder zu füllen:

Code kopieren Der Code lautet wie folgt:

> Array.from(new Array(5), () => 'a')
[ 'a', 'a', 'a', 'a', 'a' ]
> Array.from(new Array(5), (x,i) => i)
[ 0, 1, 2, 3, 4 ]

Wenn Sie ein Array mit einem festen Wert füllen möchten, ist Array.prototype.fill() (siehe unten) die bessere Wahl. Das erste sind die beiden Möglichkeiten des obigen Beispiels.

from()
in der Array-Unterklasse Ein weiterer Anwendungsfall für Array.from() besteht darin, ein Array-ähnliches Objekt oder iterierbares Objekt in eine Instanz einer Array-Unterklasse (Array) zu konvertieren. Wenn Sie eine Array-Unterklasse MyArray erstellen und ein solches Objekt in eine Instanz von MyArray konvertieren möchten, können Sie einfach MyArray.from() verwenden. Der Grund dafür ist, dass in ECMAScript 6 Konstruktoren vererbt werden (der übergeordnete Klassenkonstruktor ist der Prototyp seines Unterklassenkonstruktors).

Code kopieren Der Code lautet wie folgt:

Klasse MyArray erweitert Array {
...
}
let exampleOfMyArray = MyArray.from(anIterable);

Sie können diese Funktionalität mit der Zuordnung kombinieren und den Zuordnungsvorgang an einem Ort abschließen, an dem Sie den Ergebniskonstruktor steuern:

Code kopieren Der Code lautet wie folgt:

// from() – Bestimmen Sie den Konstruktor des Ergebnisses über den Empfänger
// (in diesem Fall MyArray)
let exampleOfMyArray = MyArray.from([1, 2, 3], x => x * x);
// map(): Das Ergebnis ist immer eine Instanz von Array
let exampleOfArray = [1, 2, 3].map(x => x * x);
Array.of(...items)

Wenn Sie eine Reihe von Werten in ein Array konvertieren möchten, sollten Sie ein Array-Literal verwenden. Insbesondere wenn es nur einen Wert gibt und dieser eine Zahl ist, schlägt der Array-Konstruktor fehl. Weitere Informationen finden Sie auf dieser Seite.

Code kopieren Der Code lautet wie folgt:

> neues Array(3, 11, 8)
[ 3, 11, 8 ]
> neues Array(3)
[ , , ,]
> neues Array(3.1)
RangeError: Ungültige Array-Länge

Was sollen wir tun, wenn wir eine Reihe von Werten in eine Instanz eines numerischen Unterkonstruktors umwandeln möchten? Dies ist der Wert von Array.of() (denken Sie daran, dass der Array-Unterkonstruktor alle Array-Methoden erbt, natürlich auch of()).

Code kopieren Der Code lautet wie folgt:

Klasse MyArray erweitert Array {
...
}
console.log(MyArray.of(3, 11, 8) Instanz von MyArray); // true
console.log(MyArray.of(3).length === 1); // true

Array.of() ist sehr praktisch, um den Wert in einem Array zu verpacken und zu verschachteln, ohne die seltsame Verarbeitungsmethode wie Array(). Aber achten Sie auch auf Array.prototype.map(), hier gibt es Fallstricke:

Code kopieren Der Code 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 an seinen Rückruf. Die letzten beiden werden oft übersehen (Details).

Prototypmethoden
Für Array-Instanzen werden viele neue Methoden verfügbar sein.

Iterieren über Arrays

Die folgenden Methoden helfen dabei, die Iteration im Array abzuschließen:

Code kopieren Der Code lautet wie folgt:

Array.prototype.entries()
Array.prototype.keys()
Array.prototype.values()

Jede der oben genannten Methoden gibt eine Zeichenfolge mit Werten zurück, jedoch nicht als Array. Sie werden nacheinander durch den Iterator angezeigt. Schauen wir uns ein Beispiel an (ich verwende Array.from(), um den Inhalt des Iterators in ein Array einzufügen):

Code kopieren Der Code lautet wie folgt:

> Array.from([ 'a', 'b' ].keys())
[ 0, 1 ]
> Array.from([ 'a', 'b' ].values())
[ 'a', 'b' ]
> Array.from([ 'a', 'b' ].entries())
[ [ 0, 'a' ],
[ 1, 'b' ] ]

Sie können entries() mit der for-of-Schleife in ECMAScript 6 kombinieren, um das iterierte Objekt einfach in Schlüssel-Wert-Paare zu zerlegen:

Code kopieren Der Code lautet wie folgt:

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}

Hinweis: Dieser Code kann bereits im neuesten Firefox-Browser ausgeführt werden. t Firefox.

Array-Elemente finden

Array.prototype.find(predicate, thisArg?) gibt das erste Element zurück, das die Rückruffunktion erfüllt. Wenn kein Element die Bedingung erfüllt, wird undefiniert zurückgegeben. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

> [6, -5, 8].find(x => x < 0)
-5
> [6, 5, 8].find(x => x < 0)
undefiniert
Array.prototype.findIndex(predicate, thisArg?)

gibt den Index des ersten Elements zurück, das die Rückruffunktion erfüllt. Wenn keine zufriedenstellenden Elemente gefunden werden, wird -1 zurückgegeben. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

> [6, -5, 8].findIndex(x => x < 0)
1
> [6, 5, 8].findIndex(x => x < 0)
-1

Beide find*-Methoden ignorieren Lücken, das heißt, sie achten nicht auf undefinierte Elemente. Die Abschlussfunktionssignatur des Rückrufs lautet:

Prädikat(Element, Index, Array)
Finden Sie NaN

über findIndex()

Array.prototype.indexOf() hat eine bekannte Einschränkung, das heißt, es kann NaN nicht finden. Weil es Identität (===) verwendet, um passende Elemente zu finden:

Code kopieren Der Code lautet wie folgt:

> [NaN].indexOf(NaN)
-1

Mit findIndex() können Sie Object.is() verwenden, was solche Probleme nicht verursacht:

Code kopieren Der Code lautet wie folgt:

> [NaN].findIndex(y => Object.is(NaN, y))
0

Sie können auch einen allgemeineren Ansatz wählen und eine Hilfsfunktion elemIs() erstellen:

Code kopieren Der Code lautet wie folgt:

> function elemIs(x) { return Object.is.bind(Object, x) }
> [NaN].findIndex(elemIs(NaN))
0
Array.prototype.fill(value, start?, end?)

Füllen Sie ein Array mit dem angegebenen Wert:

Code kopieren Der Code lautet wie folgt:

> ['a', 'b', 'c'].fill(7)
[ 7, 7, 7 ]

Löcher erhalten keine Sonderbehandlung:

Code kopieren Der Code lautet wie folgt:

> neues Array(3).fill(7)
[ 7, 7, 7 ]

Sie können auch den Beginn und das Ende Ihrer Füllung begrenzen:

Code kopieren Der Code lautet wie folgt:

> ['a', 'b', 'c'].fill(7, 1, 2)
[ 'a', 7, 'c' ]

Wann kann ich die neuen Array-Methoden verwenden?
Einige Methoden sind bereits im Browser verfügbar.