flatMapメソッド

メソッド flatMap は、 元の配列の各要素にメソッドのパラメータで指定された コールバックが 適用された後に作成される新しい配列を返します。 一見すると flatMap メソッドは map メソッドに似ていますが、主な違いは 常に一次元配列を返す点です。

構文

javascriptlet newArray = 配列.flatMap(関数);

例

メソッド flatMap を使って 新しい配列を取得してみましょう：

javascriptlet arr = ['a', 'b', 'c'];

let res = arr.flatMap(function(elem) {
  return elem + '!';
});

console.log(res);

コード実行結果：

javascript['a!', 'b!', 'c!']

例

数値で構成された元の配列から 新しい配列を取得してみましょう：

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.flatMap(function(elem) {
  return elem + 2;
});

console.log(res);

コード実行結果：

javascript[3, 4, 5, 6, 7]

例

最初のネストレベルを持つ配列に メソッド flatMap を適用してみましょう：

javascriptlet arr = [1, 2, 3, [4, 5]];

let res = arr.flatMap(function getElem(elem){
  return elem + 2;
});

console.log(res);

コードを実行すると、 関数の条件がサブ配列に適用され、 それを一つの要素として扱ったことがわかります。 したがって、このメソッドをネストされた配列で呼び出すことは 意味がありません：

javascript[3, 4, 5, '4,52']

例

ネストレベルを気にせず、 配列全体を平坦化したい場合は、 パラメータ Infinity を使用します：

javascriptlet arr = ['a', 'b', ['c', 'd', ['e', 'f', ['g', 'h', ['i']]]]];

let res = arr.flatMap(Infinity);

console.log(res);

コード実行結果：

javascript[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'i'
]

例

配列に2つのメソッド、 flatMap と map を適用してみましょう。 両メソッドのパラメータには、 配列を二次元にする関数を指定します：

javascriptlet arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.map(elem => [elem * 3]);
let res2 = arr.flatMap(elem => [elem * 3]);

console.log('mapメソッド', res1);
console.log('flatMapメソッド', res2);

コード実行結果：

javascript'mapメソッド' [[3], [6], [9], [12], [15], [18]]
'flatMapメソッド' [3, 6, 9, 12, 15, 18]

関連項目