配列.flat() / flatMap()

// ネストされた配列を平坦化する
var newArray = 配列.flat(深さ);

// 各要素にマッピングを行い、結果を1階層だけ平坦化する
var newArray = 配列.flatMap(function(要素, インデックス, 配列) {
	return 変換後の値;
});

// 1階層のネストを平坦化する
var arr1 = [1, [2, 3], [4, 5]];
console.log(arr1.flat());

// 2階層のネストを平坦化する
var arr2 = [1, [2, [3, [4]]]];
console.log(arr2.flat(2));

// Infinityですべてのネストを解除する
console.log(arr2.flat(Infinity));

// flatMapで1つの要素から複数の要素を生成する
var sentences = ["今日は 晴れ", "明日は 雨"];
var words = sentences.flatMap(function(s) {
	return s.split(" ");
});
console.log(words);

// flatMapでフィルタリングと変換を同時に行う
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.flatMap(function(n) {
	return n % 2 === 0 ? [n * 2] : [];
});
console.log(doubled);

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, [ 4 ] ]
[ 1, 2, 3, 4 ]
[ '今日は', '晴れ', '明日は', '雨' ]
[ 4, 8 ]

ミス1: flat()はデフォルトで1階層しか平坦化しない

引数を省略した場合の既定値は『1』のため、深いネストはそのまま残ります。すべての階層を一度に解除したい場合は『Infinity』を指定します。

var arr = [1, [2, [3, [4]]]];
// NG: 引数なしでは1階層しか平坦化されない
console.log(arr.flat()); // [ 1, 2, [ 3, [ 4 ] ] ] — 全部解除されない

修正後は次の通りです。

var arr = [1, [2, [3, [4]]]];
// OK: すべてのネストを解除したい場合はInfinityを指定する
console.log(arr.flat(Infinity)); // [ 1, 2, 3, 4 ]

ミス2: flatMapは1段階しか平坦化しない

『flatMap()』はマッピング後に1階層だけ平坦化します。コールバックがネストした配列を返すと1階層分しか展開されないため、コールバックは1階層の配列を返すように書きます。

var arr = [1, 2, 3];
// NG: flatMapは1階層しか平坦化しないため、2重配列が残る
var result = arr.flatMap(function(n) { return [[n, n * 2]]; });
console.log(result); // [ [1, 2], [2, 4], [3, 6] ] — 1階層残る

修正後は次の通りです。

var arr = [1, 2, 3];
// OK: 1階層だけのネストであればflatMapで正しく平坦化できる
var result = arr.flatMap(function(n) { return [n, n * 2]; });
console.log(result); // [ 1, 2, 2, 4, 3, 6 ]

『配列.flat()』はES2019で追加されたメソッドで、ネストされた配列（配列の中に配列が入っている状態）を指定した深さまで展開して平坦な配列にします。元の配列は変更されません。引数を省略した場合の既定値は『1』で、1階層分だけ平坦化されます。

『配列.flatMap()』は『配列.map()』と『配列.flat(1)』を組み合わせたメソッドです。各要素を変換した結果が配列の場合に自動的に1階層だけ展開されるため、1つの要素から複数の要素を生成したり、条件に合わない要素を空の配列で除外したりする処理が簡潔に書けます。

『配列.flat()』は空のスロットも除去します。例えば『[1, , 3].flat()』は『[1, 3]』になり、配列の穴（empty slot）が取り除かれます。深いネストをすべて解除したい場合は『配列.flat(Infinity)』を指定してください。