Warum keine Array.prototype.flatMap in Javascript?

flatMapist unglaublich nützlich für Sammlungen, aber Javascript bietet keine, während Sie haben Array.prototype.map. Warum?

Gibt es eine Möglichkeit, flatMapJavascript auf einfache und effiziente Weise zu emulieren , ohne es flatMapmanuell zu definieren ?

Update: Array.prototype.flatMap ist auf dem Weg zu nativem ECMAScript. Es ist derzeit in Phase 4 .

Es wird in vielen Umgebungen weitgehend unterstützt. Überprüfen Sie anhand dieses Snippets, ob es in Ihrem Browser funktioniert.

const data =
  [ 1, 2, 3, 4 ]
  
console.log(data.flatMap(x => Array(x).fill(x)))
// [ 1, 2, 2, 3, 3, 3, 4, 4, 4, 4 ]

Warum keine Array.prototype.flatMap in Javascript?

Weil Programmieren keine Magie ist und nicht jede Sprache Funktionen / Grundelemente hat, die jede andere Sprache hat

Was zählt, ist

Mit JavaScript können Sie es selbst definieren

const concat = (x,y) =>
  x.concat(y)

const flatMap = (f,xs) =>
  xs.map(f).reduce(concat, [])

const xs = [1,2,3]

console.log(flatMap(x => [x-1, x, x+1], xs))

Oder ein Umschreiben, bei dem die beiden Schleifen zu einer zusammengefasst werden

const flatMap = (f,xs) =>
  xs.reduce((acc,x) =>
    acc.concat(f(x)), [])

const xs = [1,2,3]

console.log(flatMap(x => [x-1, x, x+1], xs))

Wenn Sie es auf der wollen Array.prototype, hält Sie nichts auf

const concat = (x, y) => x.concat(y)

const flatMap = (f, xs) => xs.map(f).reduce(concat, [])

if (Array.prototype.flatMap === undefined) {
  Array.prototype.flatMap = function(f) {
    return flatMap(f, this)
  }
}

const xs = [1, 2, 3]

console.log(xs.flatMap(x => [x-1, x, x+1]))

.as-console-wrapper { top: 0; max-height: 100% !important; }

flatMapwurde vom TC39 als Teil von ES2019 (ES10) genehmigt. Sie können es so verwenden:

[1, 3].flatMap(x => [x, x + 1]) // > [1, 2, 3, 4]

Hier ist meine eigene Implementierung der Methode:

const flatMap = (f, arr) => arr.reduce((x, y) => [...x, ...f(y)], [])

MDN Artikel auf flatMap

Ich weiß, dass Sie gesagt haben, Sie wollten es nicht selbst definieren, aber diese Implementierung ist eine ziemlich triviale Definition.

Es gibt auch das von derselben Github-Seite:

Hier ist ein etwas kürzerer Weg mit es6-Spread, ähnlich wie bei renaudtertrais - aber mit es6 und ohne Hinzufügen zum Prototyp.

var flatMap = (a, cb) => [].concat(...a.map(cb))

const s = (v) => v.split(',')
const arr = ['cat,dog', 'fish,bird']

flatMap(arr, s)

Würde einer dieser beiden helfen?

Es sollte beachtet werden (dank @ftor), dass diese letztere "Lösung" unter "Maximale Größe des Aufrufstapels überschritten" leidet, wenn sie auf einem wirklich großen Array (z. B. 300.000 Elementen) aufgerufen wird a.

Lodash bietet eine Flatmap-Funktion, die für mich praktisch gleichbedeutend ist mit Javascript, das sie nativ bereitstellt. Wenn Sie kein Lodash-Benutzer sind, Array.reduce()kann die Methode von ES6 das gleiche Ergebnis liefern, Sie müssen jedoch in diskreten Schritten abbilden und dann reduzieren.

Unten finden Sie ein Beispiel für jede Methode, bei der eine Liste von Ganzzahlen zugeordnet und nur die Gewinnchancen zurückgegeben werden.

Lodash:

_.flatMap([1,2,3,4,5], i => i%2 !== 0 ? [i] : [])

ES6 Reduzieren:

[1,2,3,4,5].map(i => i%2 !== 0 ? [i] : []).reduce( (a,b) => a.concat(b), [] )

Ein ziemlich prägnanter Ansatz besteht darin, Folgendes zu verwenden Array#concat.apply:

const flatMap = (arr, f) => [].concat.apply([], arr.map(f))

console.log(flatMap([1, 2, 3], el => [el, el * el]));

Ich habe so etwas gemacht:

Array.prototype.flatMap = function(selector){ 
  return this.reduce((prev, next) => 
    (/*first*/ selector(prev) || /*all after first*/ prev).concat(selector(next))) 
}

[[1,2,3],[4,5,6],[7,8,9]].flatMap(i => i); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

[{subarr:[1,2,3]},{subarr:[4,5,6]},{subarr:[7,8,9]}].flatMap(i => i.subarr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

Wir haben jetzt eine flatMap()in Javascript! Und es wird ziemlich gut unterstützt

Die flatMap () -Methode ordnet zuerst jedes Element mithilfe einer Zuordnungsfunktion zu und glättet dann das Ergebnis in ein neues Array. Es ist identisch mit einer Karte (), gefolgt von einer Ebene () mit der Tiefe 1

const dublicate = x => [x, x];

console.log([1, 2, 3].flatMap(dublicate))

Array.prototype.flatMap()ist jetzt in JS angekommen. Möglicherweise unterstützen jedoch nicht alle Browser die Überprüfung der aktuellen Browserkompatibilität der Mozilla-Webdokumente .

Was zum flatMap() Methode ordnet zunächst jedes Element mithilfe einer Rückruffunktion als Argument zu und glättet dann das Ergebnis in ein neues Array (das 2d-Array ist jetzt 1d, da die Elemente abgeflacht sind).

Hier ist auch ein Beispiel für die Verwendung der Funktion:

let arr = [[2], [4], [6], [8]]

let newArr = arr.flatMap(x => [x * 2]);

console.log(newArr);