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

概要

Array.prototype.flat() はネストされた配列を指定した深さまで平坦化します。flatMap() は map() と flat(1) を組み合わせた操作を一回で行います。

対応ブラウザ

機能	デスクトップ				モバイル
機能	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() の活用

ネストされた配列を指定した深さまで平坦化するメソッド。flatMap でマッピングと平坦化を同時に行える。

注意点

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

参考リンク

Powered by web-features

概要