callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Sie sollte ein Array mit neuen Elementen des neuen Arrays zurückgeben oder einen einzelnen Nicht-Array-Wert, der dem neuen Array hinzugefügt werden soll. Die Funktion wird mit den 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 beim Ausführen voncallbackFn verwendet wird. Sieheiterative Methoden.

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

DieflatMap()-Methode ist eineiterative Methode. SieheArray.prototype.map() für eine ausführliche 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 verkettet die daraus resultierenden Arrays zu einem neuen Array. Lesen Sie den Abschnitt überiterative Methoden, um mehr darüber zu erfahren, wie diese Methoden im Allgemeinen funktionieren.

DieflatMap()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integerbasierte Eigenschaften hat. Jedoch muss der voncallbackFn zurückgegebene Wert ein Array sein, wenn er abgeflacht werden soll.

Vorabzuweisung 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 ist als der Schleifenansatz — aufgrund der Erstellung temporärer Arrays, die vom Garbage Collector gesammelt werden müssen, sowie des Rückgabe-Arrays, das nicht häufig resized werden muss. Trotzdem könnteflatMap die richtige Lösung in Fällen sein, in denen Flexibilität und Lesbarkeit gewünscht werden.

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

Obwohl das oben Genannte durch die Verwendung von map selbst erreicht werden könnte, ist hier ein Beispiel, das die Verwendung vonflatMap() besser veranschaulicht.

Erstellen wir eine Liste von Wörtern aus einer Liste von Sätzen.

const arr1 = ["it's Sunny in", "", "California"];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.

flatMap kann als Mittel verwendet werden, um während einesmap Elemente hinzuzufügen und zu entfernen (die Anzahl der Elemente zu ändern). Mit anderen Worten, es ermöglicht Ihnen,viele Elemente zu vielen 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 ein 0-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]

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 betriebsfähige Stationen herauszufiltern, und dannflatMap(), um ein neues Array zu erstellen, bei dem jedes Element eine Station und ihre nächste Station enthält. Bei der letzten Station gibt es ein leeres Array zurück, um sie 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 gerade aufgebaut wird — es gibt keine Möglichkeit, aus der Callback-Funktion auf das aufzubauende Array zuzugreifen.

DiecallbackFn wird nicht für leere Plätze im Quell-Array aufgerufen, damap() dies nicht tut, währendflat() leere Plätze 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]

DieflatMap()-Methode liest dielength-Eigenschaft vonthis und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nichtnegative Ganzzahl ist, die kleiner alslength ist. Wenn der Rückgabewert der Callback-Funktion kein Array ist, wird er immer direkt dem Ergebnis-Array hinzugefügt.

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 } ]

• Polyfill vonArray.prototype.flatMap incore-js
• es-shims polyfill vonArray.prototype.flatMap
• Leitfaden für indizierte Sammlungen
• Array
• Array.prototype.concat()
• Array.prototype.flat()
• Array.prototype.map()
• Array.prototype.reduce()