Array.prototype.flatMap()

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 fr jedes Element im Array ausgefhrt wird. Sie sollte ein Array zurckgeben, das neue Elemente des neuen Arrays enthlt, oder einen einzelnen Nicht-Array-Wert, der dem neuen Array hinzugefgt 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 dem flatMap() aufgerufen wurde.

thisArg Optional

Ein Wert, der als this verwendet wird, wenn callbackFn ausgefhrt wird. Siehe iterative Methoden.

Rckgabewert

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

Beschreibung

Die flatMap()-Methode ist eine iterative Methode. Siehe Array.prototype.map() fr eine detaillierte Beschreibung der Callback-Funktion. Die flatMap()-Methode ist identisch mit map(callbackFn, thisArg) gefolgt von flat(1) fr jedes Element erzeugt sie ein Array neuer Elemente und kombiniert die resultierenden Arrays zu einem neuen Array. Lesen Sie den Abschnitt iterative Methoden fr weitere Informationen darber, wie diese Methoden im Allgemeinen funktionieren.

Die flatMap()-Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length-Eigenschaft und integer-indizierte Eigenschaften hat. Der von callbackFn zurckgegebene 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 to
const 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 der flatMap-Ansatz langsamer als der for-Schleifen-Ansatz ist aufgrund der Erstellung temporrer Arrays, die abgefangen werden mssen, sowie des Rckgabearrays, das nicht hufig grenverndert werden muss. Dennoch kann flatMap die richtige Lsung in Fllen sein, in denen Flexibilitt und Lesbarkeit gewnscht 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 flattened
arr.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

Whrend das obige Beispiel durch die Verwendung von map selbst erreicht werden knnte, hier ein Beispiel, das die Verwendung von flatMap() besser veranschaulicht.

Lassen Sie uns eine Liste von Wrtern aus einer Liste von Stzen 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 Lnge als die Eingabeliste haben kann.

Zum Hinzufgen und Entfernen von Elementen whrend eines map()

flatMap kann verwendet werden, um Elemente hinzuzufgen und zu entfernen (die Anzahl der Elemente zu ndern) whrend eines map. Mit anderen Worten, es ermglicht Ihnen, viele Elemente zu vielen Elementen zuzuordnen (indem jedes Eingabeelement separat behandelt wird), anstatt immer eins-zu-eins. In diesem Sinne funktioniert es wie das Gegenteil von filter. Geben Sie ein 1-Element-Array zurck, um das Element zu behalten, ein Mehrfach-Element-Array, um Elemente hinzuzufgen, 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 1
const 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

Das array-Argument ist ntzlich, wenn Sie auf ein anderes Element im Array zugreifen mchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerst filter(), um betriebsbereite Stationen zu extrahieren, und verwendet dann flatMap(), um ein neues Array zu erstellen, bei dem jedes Element eine Station und ihre nchste Station enthlt. Bei der letzten Station wird ein leeres Array zurckgegeben, um es aus dem endgltigen Array auszuschlieen.

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

Das array-Argument ist nicht das Array, das erstellt wird es gibt keine Mglichkeit, von der Callback-Funktion auf das erstellte Array zuzugreifen.

Verwendung von flatMap() auf dnn besetzten Arrays

Das callbackFn wird nicht fr leere Slots im Quellarray aufgerufen, da map() dies nicht tut, whrend flat() leere Slots in den zurckgegebenen 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

Die flatMap()-Methode liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlssel eine nicht-negative ganze Zahl kleiner als length ist. Wenn der Rckgabewert der Callback-Funktion kein Array ist, wird er immer direkt an das Ergebnis-Array angehngt.

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 flattened
console.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-Kompatibilitt

Siehe auch

• Polyfill von Array.prototype.flatMap in core-js
• es-shims Polyfill von Array.prototype.flatMap
• Indizierte Sammlungen Leitfaden
• Array
• Array.prototype.concat()
• Array.prototype.flat()
• Array.prototype.map()
• Array.prototype.reduce()