javascriptにArray.prototype.flatMapがないのはなぜですか？

flatMapコレクションで非常に便利ですが、javascriptはArray.prototype.map。を持っている間はそれを提供しません。どうして？

手動でflatMap定義せずに、簡単かつ効率的な方法でJavaScriptでエミュレートする方法はありますflatMapか？

更新： Array.prototype.flatMap ES2019になりました

多くの環境で広くサポートされています。以下のスニペットを使用して、ブラウザで機能するかどうかを確認してください-

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 ]

「JavaScriptにArray.prototype.flatMapがないのはなぜですか？」

プログラミングは魔法ではなく、すべての言語が他のすべての言語が持っている機能/プリミティブを持っているわけではないからです。重要なのは、JavaScriptがあなた自身でそれを定義する能力を与えることです-

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

または、2つのループを1つに折りたたむ書き直し-

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

あなたがそれを拡張したいのならArray.prototype、何もあなたを止めていません-

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','♧']
// ]

flatMapES2019（ES10）の一部としてTC39によって承認されています。次のように使用できます。

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

これが私自身のメソッドの実装です：

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

flatMapのMDN記事

自分で定義したくないとおっしゃっていたのは知っていますが、この実装は非常に簡単な定義です。

同じgithubページからもこれがあります：

これは、es6 Spreadを使用する少し短い方法で、renaudtertraisと同様ですが、es6を使用し、プロトタイプに追加しません。

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

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

flatMap(arr, s)

これらのどちらかが役に立ちますか？

この後者の「ソリューション」は、非常に大きな（たとえば、300k要素）配列で呼び出された場合、「最大呼び出しスタックサイズを超えた」という問題が発生することに注意してください（@ftorのおかげです）a。

Lodashはフラットマップ関数を提供します。これは私にとってはJavascriptがネイティブに提供するのと実質的に同等です。Lodashユーザーでない場合は、ES6のArray.reduce()方法で同じ結果が得られますが、マップしてから個別のステップでフラット化する必要があります。

以下は、各メソッドの例であり、整数のリストをマッピングし、オッズのみを返します。

Lodash：

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

ES6リデュース：

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

かなり簡潔なアプローチの1つは、Array#concat.apply：を利用することです。

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

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

私はこのようなことをしました：

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]

これflatMap()でJavascriptができました！そしてそれはかなりよくサポートされています

flatMap（）メソッドは、最初にマッピング関数を使用して各要素をマップし、次に結果を新しい配列にフラット化します。これは、map（）の後に深さ1のflat（）が続くのと同じです。

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

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

Array.prototype.flatMap()JSに到着しました。ただし、すべてのブラウザがそれらをサポートしているわけではなく、MozillaWebドキュメントで現在のブラウザの互換性を確認してください。

何 flatMap()メソッドは、最初にコールバック関数を引数として使用して各要素をマップし、次に結果を新しい配列にフラット化します（要素がフラット化されるため、2d配列は1dになります）。

関数の使用方法の例もあります。

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

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

console.log(newArr);