Array flat() and flatMap() | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`javascript.builtins.Array.flat`	69	79	62	12	69	12
ビルトインオブジェクト
`Array.flatMap` flatMap() は Array インスタンスのメソッドで、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内に平坦化します。これは、 Array/map の後に深さ 1 の Array/flat を行うのと同じですが (arr.map(...args).flat())、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。	69	79	62	12	69	12

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const nested = [1, [2, 3], [4, [5, 6]]];

nested.flat();    // [1, 2, 3, 4, [5, 6]]
nested.flat(2);   // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // Flattens everything

// flatMap: One-to-many transformation
const sentences = ['Hello World', 'Good Morning'];
sentences.flatMap(s => s.split(' '));
// ['Hello', 'World', 'Good', 'Morning']

ライブデモ

Flatten nested arrays

Compare flat(), flat(2), and flat(Infinity) on the same nested input.

JavaScript

出力

「実行」ボタンを押してください

Split sentences with flatMap

Map each sentence to multiple words and flatten the combined result in one step.

JavaScript

出力

「実行」ボタンを押してください

実務での使いどころ

Array flat() and flatMap() の活用

flat() は Array インスタンスのメソッドで、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。

注意点

特になし。すべての主要ブラウザで安定して動作する。