Array.prototype.flatMap() — Methode · JavaScript-Referenz

Signatur

flatMap(callbackFn) / flatMap(callbackFn, thisArg)

Beschreibung

Die flatMap()-Methode von Array-Instanzen gibt ein neues Array zurück, das durch Anwenden einer gegebenen callback-Funktion auf jedes Element des Arrays und anschließendes Verflachen des Ergebnisses um eine Ebene entsteht. Sie ist identisch zu einem map() gefolgt von einem flat() der Tiefe 1 (arr.map(...args).flat()), jedoch etwas effizienter als der separate Aufruf dieser beiden Methoden.

Die flatMap()-Methode ist eine iterative Methode. Siehe Array.prototype.map() für eine ausführliche Beschreibung der callback-Funktion. Die flatMap()-Methode ist identisch zu map(callbackFn, thisArg) gefolgt von flat(1) — für jedes Element erzeugt sie ein Array neuer Elemente und verkettet die resultierenden Arrays zu einem neuen Array. Lies den Abschnitt „iterative methods" für weitere Informationen darüber, wie diese Methoden allgemein funktionieren.

Die flatMap()-Methode ist generisch. Sie erwartet vom this-Wert lediglich, dass er eine length-Eigenschaft und ganzzahlig-indizierte Eigenschaften besitzt. Der von callbackFn zurückgegebene Wert muss jedoch ein Array sein, damit er verflacht wird.

Alternative

Vorab-Allokation und explizite Iteration

Beachte, dass in diesem speziellen Fall der flatMap-Ansatz langsamer ist als der for-Schleifen-Ansatz — aufgrund der Erzeugung temporärer Arrays, die per Garbage Collection entfernt werden müssen, sowie weil das Rückgabe-Array nicht häufig neu dimensioniert werden muss. Dennoch kann flatMap die richtige Lösung sein, wenn Flexibilität und Lesbarkeit gewünscht sind.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	Function	—	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 wird. Die Funktion wird mit folgenden Argumenten aufgerufen: `element` (das aktuell verarbeitete Element), `index` (der Index des aktuell verarbeiteten Elements) und `array` (das Array, auf dem `flatMap()` aufgerufen wurde).
$thisArg	any	—	Ein Wert, der bei der Ausführung von `callbackFn` als `this` verwendet wird. Siehe iterative methods.

Rückgabewert

Typ

Array

Beschreibung

Ein neues Array, bei dem jedes Element das Ergebnis der callback-Funktion ist, verflacht um eine Tiefe von 1.

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

Wörter aus Sätzen extrahieren

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

Elemente während eines map() hinzufügen und 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

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

flatMap() bei sparse Arrays

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]

flatMap() auf Nicht-Array-Objekten aufrufen

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

Siehe auch

Array Array.prototype.concat() Array.prototype.flat() Array.prototype.map() Array.prototype.reduce()