言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.flat() / flatMap()

配列.flat() / flatMap()

ネストされた配列を平坦化するメソッドです。『flat()』は指定した深さまで平坦化し、『flatMap()』はマッピングと平坦化を同時に行います。

構文

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

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

メソッド一覧

メソッド概要
flat(深さ)指定した深さまでネストされた配列を平坦化した新しい配列を返します。深さを省略すると『1』が使用されます。『Infinity』を指定するとすべてのネストが解除されます。
flatMap(関数)各要素に対してマッピング関数を実行し、結果を1階層だけ平坦化した新しい配列を返します。『配列.map()』と『配列.flat(1)』を組み合わせた処理と同じ結果になります。

サンプルコード

// 1階層のネストを平坦化します。
var arr1 = [1, [2, 3], [4, 5]];
console.log(arr1.flat()); // 『1,2,3,4,5』と出力されます。

// 2階層のネストを平坦化します。
var arr2 = [1, [2, [3, [4]]]];
console.log(arr2.flat(2)); // 『1,2,3,[4]』と出力されます。深さ2までが対象です。

// Infinityですべてのネストを解除します。
console.log(arr2.flat(Infinity)); // 『1,2,3,4』と出力されます。

// 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); // 『4,8』と出力されます。偶数だけを2倍にした結果です。

概要

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

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

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

対応ブラウザ

Chrome Chrome
74 以降
68 以前 ×
Firefox Firefox
67 以降
61 以前 ×
Safari Safari
18 以降
11 以前 ×
Edge Edge
84 以降
78 以前 ×
IE IE
11 ×
全バージョンで非対応
Opera Opera
61 以降
55 以前 ×
iOS Safari iOS Safari
18 以降
11 以前 ×
Android Browser Android Browser
74 以降
68 以前 ×
Chrome Android Chrome Android
74 以降
68 以前 ×
Firefox Android Firefox Android
79 以降
61 以前 ×

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。