DieflatMap()-Methode vonArray Instanzen gibt ein neues Array zurück, das durch Anwenden einer angegebenen Callback-Funktion auf jedes Element des Arrays gebildet wird und dann das Ergebnis eine Ebene tief plättet. Es ist identisch mit einemmap() gefolgt von einemflat() mit einer Tiefe von 1 (arr.map(...args).flat()), jedoch geringfügig effizienter als das separate Aufrufen dieser beiden Methoden.

Probieren Sie es aus

const arr = [1, 2, 1];const result = arr.flatMap((num) => (num === 2 ? [2, 2] : 1));console.log(result);// Expected output: Array [1, 2, 2, 1]

Syntax

flatMap(callbackFn)flatMap(callbackFn, thisArg)

Parameter

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Sie sollte ein Array zurückgeben, das neue Elemente des neuen Arrays enthält, oder einen einzelnen Nicht-Array-Wert, der dem neuen Array hinzugefügt werden soll. Die Funktion wird mit folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

array

Das Array, auf demflatMap() aufgerufen wurde.

thisArgOptional

Ein Wert, der alsthis verwendet wird, wenncallbackFn ausgeführt wird. Sieheiterative Methoden.

Rückgabewert

Ein neues Array, bei dem jedes Element das Ergebnis der Callback-Funktion ist und auf eine Tiefe von 1 platt gemacht wurde.

Beschreibung

DieflatMap()-Methode ist eineiterative Methode. SieheArray.prototype.map() für eine detaillierte Beschreibung der Callback-Funktion. DieflatMap()-Methode ist identisch mitmap(callbackFn, thisArg) gefolgt vonflat(1) — für jedes Element erzeugt sie ein Array neuer Elemente und kombiniert die resultierenden Arrays zu einem neuen Array. Lesen Sie den Abschnittiterative Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

DieflatMap()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integer-indizierte Eigenschaften hat. Der voncallbackFn zurückgegebene Wert muss jedoch ein Array sein, wenn es platt gemacht werden soll.

Alternative

Vorabbelegung und explizites Iterieren

const arr = [1, 2, 3, 4];arr.flatMap((x) => [x, x * 2]);// is equivalent toconst n = arr.length;const acc = new Array(n * 2);for (let i = 0; i < n; i++) {  const x = arr[i];  acc[i * 2] = x;  acc[i * 2 + 1] = x * 2;}// [1, 2, 2, 4, 3, 6, 4, 8]

Beachten Sie, dass in diesem speziellen Fall derflatMap-Ansatz langsamer als derfor-Schleifen-Ansatz ist — aufgrund der Erstellung temporärer Arrays, dieabgefangen werden müssen, sowie des Rückgabearrays, das nicht häufiggrößenverändert werden muss. Dennoch kannflatMap die richtige Lösung in Fällen sein, in denenFlexibilität und Lesbarkeit gewünscht sind.

Beispiele

map() und flatMap()

const arr = [1, 2, 3, 4];arr.map((x) => [x * 2]);// [[2], [4], [6], [8]]arr.flatMap((x) => [x * 2]);// [2, 4, 6, 8]// only one level is flattenedarr.flatMap((x) => [[x * 2]]);// [[2], [4], [6], [8]]

Während das obige Beispiel durch die Verwendung von map selbst erreicht werden könnte, hier ein Beispiel, dasdie Verwendung vonflatMap() besser veranschaulicht.

Lassen Sie uns eine Liste von Wörtern aus einer Liste von Sätzen generieren.

const arr = ["it's Sunny in", "", "California"];arr.map((x) => x.split(" "));// [["it's","Sunny","in"],[""],["California"]]arr.flatMap((x) => x.split(" "));// ["it's","Sunny","in", "", "California"]

Beachten Sie, dass die Ausgabeliste eine andere Länge als die Eingabeliste haben kann.

Zum Hinzufügen und Entfernen von Elementen während eines map()

flatMap kann verwendet werden, um Elemente hinzuzufügen und zu entfernen (die Anzahl derElemente zu ändern) während einesmap. Mit anderen Worten, es ermöglicht Ihnen,viele Elemente zuvielen Elementen zuzuordnen (indem jedes Eingabeelement separat behandelt wird), anstatt immereins-zu-eins. In diesem Sinne funktioniert es wie das Gegenteil vonfilter.Geben Sie ein 1-Element-Array zurück, um das Element zu behalten, ein Mehrfach-Element-Array, um Elemente hinzuzufügen, oder ein0-Element-Array, um das Element zu entfernen.

// Let's say we want to remove all the negative numbers// and split the odd numbers into an even number and a 1const a = [5, 4, -3, 20, 17, -33, -4, 18];//         |\  \  x   |  | \   x   x   |//        [4,1, 4,   20, 16, 1,       18]const result = a.flatMap((n) => {  if (n < 0) {    return [];  }  return n % 2 === 0 ? [n] : [n - 1, 1];});console.log(result); // [4, 1, 4, 20, 16, 1, 18]

Verwendung des dritten Arguments von callbackFn

Dasarray-Argument ist nützlich, wenn Sie auf ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerstfilter(), um betriebsbereite Stationen zu extrahieren, und verwendet dannflatMap(), um ein neues Array zu erstellen, bei dem jedes Element eine Station und ihre nächste Station enthält. Bei der letzten Station wird ein leeres Array zurückgegeben, um es aus dem endgültigen Array auszuschließen.

const stations = ["New Haven", "West Haven", "Milford (closed)", "Stratford"];const line = stations  .filter((name) => !name.endsWith("(closed)"))  .flatMap((name, idx, arr) => {    // Without the arr argument, there's no way to easily access the    // intermediate array without saving it to a variable.    if (idx === arr.length - 1) return []; // last station has no next station    return [`${name} - ${arr[idx + 1]}`];  });console.log(line); // ['New Haven - West Haven', 'West Haven - Stratford']

Dasarray-Argument istnicht das Array, das erstellt wird — es gibt keine Möglichkeit, von der Callback-Funktion auf das erstellte Array zuzugreifen.

Verwendung von flatMap() auf dünn besetzten Arrays

DascallbackFn wird nicht für leere Slots im Quellarray aufgerufen, damap() dies nicht tut, währendflat() leere Slots in den zurückgegebenen Arrays ignoriert.

console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 4, 8, 5, 10]console.log([1, 2, 3, 4].flatMap((x) => [, x * 2])); // [2, 4, 6, 8]

Aufruf von flatMap() auf Nicht-Array-Objekten

DieflatMap()-Methode liest dielength-Eigenschaft vonthis und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nicht-negative ganze Zahl kleiner alslength ist. Wenn der Rückgabewert der Callback-Funktion kein Array ist, wird er immer direkt an das Ergebnis-Array angehängt.

const arrayLike = {  length: 3,  0: 1,  1: 2,  2: 3,  3: 4, // ignored by flatMap() since length is 3};console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2]));// [1, 2, 2, 4, 3, 6]// Array-like objects returned from the callback won't be flattenedconsole.log(  Array.prototype.flatMap.call(arrayLike, (x) => ({    length: 1,    0: x,  })),);// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ]

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill vonArray.prototype.flatMap incore-js
• es-shims Polyfill vonArray.prototype.flatMap
• Indizierte Sammlungen Leitfaden
• Array
• Array.prototype.concat()
• Array.prototype.flat()
• Array.prototype.map()
• Array.prototype.reduce()