Array.prototype.flat()

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

構文

var newArray = arr.flat([depth]);

引数

depth Optional
ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。既定値は 1 です。

返値

サブ配列の要素を結合した新しい配列。

代替手段

reduce と concat

const arr = [1, 2, [3, 4]];

// 単一レベルの配列にする
arr.flat();
// 次のものと同様
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// または、分割代入の構文を使用して
const flattened = arr => [].concat(...arr);

reduce + concat + isArray + 再帰

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

// reduce と concat の再帰によって深いレベルを平坦化することができる
function flatDeep(arr, d = 1) {
   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                : arr.slice();
};

flatDeep(arr, Infinity);
// [1, 2, 3, 4, 5, 6]

スタックの使用

// 再帰を使わずにスタックを使用して平坦化
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
  const stack = [...input];
  const res = [];
  while(stack.length) {
    // pop value from stack
    const next = stack.pop();
    if(Array.isArray(next)) {
      // push back array items, won't modify the original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // reverse to restore input order
  return res.reverse();
}

const arr = [1, 2, [3, 4, [5, 6]]];
flatten(arr);
// [1, 2, 3, 4, 5, 6]

Generator 関数の使用

function* flatten(array, depth) {
    if(depth === undefined) {
      depth = 1;
    }
    for(const item of array) {
        if(Array.isArray(item) && depth > 0) {
          yield* flatten(item, depth - 1);
        } else {
          yield item;
        }
    }
}

const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = [...flatten(arr, Infinity)];
// [1, 2, 3, 4, 5, 6]

ネストされた配列の平坦化

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

平坦化と配列の穴

flat メソッドは配列内の空要素を削除します。

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

仕様書

仕様書
ECMAScript (ECMA-262)
Array.prototype.flat の定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
flatChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 62IE 未対応 なしOpera 完全対応 56Safari 完全対応 12WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 62Opera Android 完全対応 48Safari iOS 完全対応 12Samsung Internet Android 完全対応 10.0nodejs 完全対応 11.0.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報