Warum kein Array.prototype.flatMap in Javascript?

Question 1

flatMap ist unglaublich nützlich für Sammlungen, aber Javascript stellt keine zur Verfügung, während es vorhanden ist Array.prototype.map. Wieso den?

Gibt es eine Möglichkeit zu emulieren flatMap in Javascript auf einfache und effiziente Weise ohne Definition flatMap manuell?

Question 2

Aktualisieren: Array.prototype.flatMap hat es in ES2019 geschafft

Es wird in vielen Umgebungen weitgehend unterstützt. Sehen Sie mit diesem Snippet unten, 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 Zauberei ist und jede Sprache keine Merkmale/Primitiven hat, die jede andere Sprache hat. Was zählt, ist, dass JavaScript Ihnen die Möglichkeit gibt, es selbst zu 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 eine Umschreibung, die die beiden Schleifen zu einer zusammenfasst –

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

const xs = [1,2,3]

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

Wenn Sie es verlängern möchten Array.prototypenichts hält dich auf –

if (!Array.prototype.flatMap) {
  function flatMap (f, ctx) {
    return this.reduce
      ( (r, x, i, a) =>
          r.concat(f.call(ctx, x, i, a))
      , []
      )
  }
  Array.prototype.flatMap = flatMap
}

const ranks =
  [ 'J', 'Q', 'K', 'A' ]
  
const suits =
  [ '♡', '♢', '♤', '♧' ]

const result =
  ranks.flatMap(r =>
    suits.flatMap(s =>
      [[r, s]]
    )
  )

console.log(JSON.stringify(result))
// [ ['J','♡'], ['J','♢'], ['J','♤'], ['J','♧']
// , ['Q','♡'], ['Q','♢'], ['Q','♤'], ['Q','♧']
// , ['K','♡'], ['K','♢'], ['K','♤'], ['K','♧']
// , ['A','♡'], ['A','♢'], ['A','♤'], ['A','♧']
// ]

Question 3

flatMap wurde vom TC39 im Rahmen von ES2019 (ES10) genehmigt. Sie können es wie folgt 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

Question 4

Ich weiß, du hast gesagt, du wolltest es nicht selbst definieren, aber diese Umsetzung ist eine ziemlich triviale Definition.

Es gibt auch dies von derselben Github-Seite:

Hier ist ein etwas kürzerer Weg mit der Verbreitung von es6, ähnlich wie bei Renaudtertrais – aber mit der Verwendung von 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 eines davon helfen?

Es sollte beachtet werden (dank @ftor), dass diese letztere “Lösung” unter “Maximale Aufrufstapelgröße überschritten” leidet, wenn sie für ein wirklich großes Array (z. B. 300.000 Elemente) aufgerufen wird a.

Question 5

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

Nachfolgend finden Sie ein Beispiel für jede Methode, die eine Liste von Ganzzahlen abbildet und nur die Quoten zurückgibt.

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), [] )

Question 6

Ein ziemlich prägnanter Ansatz ist die Verwendung von Array#concat.apply:

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

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

Question 7

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]

Question 8

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

Die Methode flatMap() ordnet zuerst jedes Element mit einer Mapping-Funktion zu und glättet dann das Ergebnis in einem neuen Array. Es ist identisch mit einem map() gefolgt von einem flat() der Tiefe 1

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

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