JavaScript flatMap()Methode
JavaScript Array-ObjektBeispiel
Bilden Sie jedes Element mit einer Mapping-Funktion ab und flachen Sie dann das Ergebnis zu einem neuen Array ab:
Ausprobieren »
Definition und Verwendung
Die Methode flatMap() bildet zunächst jedes Element mithilfe einer Mapping-Funktion ab und flacht dann das Ergebnis zu einem neuen Array ab. Sie ist fast identisch mit map, gefolgt von einem flat mit einem Tiefenwert von 1, aber flatMap ist normalerweise etwas effizienter, wenn beides zu einer Methode kombiniert wird.
Die Methode flatMap() gibt ein neues Array zurück, wobei jedes Element das Ergebnis der Callback-Funktion ist und der Struktur-Tiefenwert 1 beträgt.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Methode unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| flatMap() | 45.0 | 12.0 | 32.0 | 9 | 25.0 |
Syntax
// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )
// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)
Parameters
| Parameters | Beschreibung |
| callback | Eine Funktion, die Elemente in einem neuen Array erzeugen kann; sie kann drei Parameter akzeptieren:
|
| thisArg | Optional. Der Wert von this, der beim Ausführen der Callback-Funktion verwendet werden soll. |
Technische Details
| Rückgabewert: | Ein Array. |
| JavaScript-Version: | ECMAScript 6 |
Weitere Beispiele
map() und flatMap()
Beispiel
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// nur eine Ebene wird abgeflacht
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
Obwohl der obige Code sowohl mit map als auch mit flatMap zu funktionieren scheint, zeigt dies nur, wie man flatMap verwendet.
Um die Rolle von flatMap besser zu veranschaulichen, zerlegen wir unten ein Array, das mehrere Sätze enthält, in ein neues Array, das aus einzelnen Wörtern besteht.
Beispiel
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
Beachten Sie, dass die Länge der Ausgabeliste von der Länge der Eingabeliste abweichen kann.
Einige Elemente während eines map() hinzufügen oder entfernen
flatMap kann verwendet werden, um während eines map Elemente hinzuzufügen oder zu entfernen (das heißt, die Anzahl der Elemente zu ändern). Mit anderen Worten: Es ermöglicht Ihnen, viele Elemente zu durchlaufen und sie in andere Elemente umzuwandeln (indem Sie sie einzeln behandeln), statt immer eins zu eins zu sein. In diesem Sinne ähnelt seine Funktion dem Gegenteil von filter. Geben Sie einfach ein Array mit 1 Element zurück, um das Element zu behalten, ein Array mit mehreren Elementen, um Elemente hinzuzufügen, oder ein Array mit 0 Elementen, um das Element zu entfernen.
Beispiel
let a = [5, 4, -3, 20, 17, -33, -4, 18]
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]
a.flatMap( (n) =>
(n < 0) ? [] :
(n % 2 == 0) ? [n] :
[n-1, 1]
)
// erwartete Ausgabe: [4, 1, 4, 20, 16, 1, 18]
Alternativen
reduce() und concat()
Beispiel
arr.flatMap(x => [x, x * 2]);
// ist äquivalent zu
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
Beachten Sie, dass dies ineffizient ist und bei großen Arrays vermieden werden sollte: In jeder Iteration wird ein neues temporäres Array erstellt, das vom Garbage Collector bereinigt werden muss, und es kopiert Elemente aus dem aktuellen Akkumulator-Array in ein neues Array, anstatt neue Elemente zu einem vorhandenen Array hinzuzufügen.
Andere Erweiterungen