🤔

flatMap() について

2023/08/01に公開

はじめに

業務にてpagination機能を実装時に、 flatMap() という関数をはじめて使用したのでメモ

flatMap()について

flatMap()を使用する目的として多次元配列をflat(平坦)にし、そのうえmap()のように配列の要素に対して何かをして新たな配列を返すということができるようだ。

const numbers = [1, 2, 3, [4]];

const doubledAndFlattened = numbers.flatMap(num => num * 2);
// [2, 4, 6, 8]

下記のような感じで空の配列も削除してくれるようだ。 (map()とflatMap()の比較)

const numbers = [1, 2, 3];

const mapResult = numbers.map((n) => (n === 1 ? v : []));
// [1, [], []]

const flatMapResult = numbers.flatMap((n) => (n === 1 ? v : []));
// [1]

まとめ

  • flatMap()flat()map()を合わせたメソッド。
  • 空の配列を削除する性質があるので配列やオブジェクトから値を抽出するときに使用できそう。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

https://zenn.dev/tsucchiiinoko/articles/9448ea5f50c3b3

Discussion