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

構文

var newArray = arr.flat(depth)

引数

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

戻り値

サブ配列要素が結合された新しい配列。

ネストされた配列のフラット化

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

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

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

フラット化と配列の穴

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

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

代替

reduceconcat

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

//to flat single level array
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

//or
const flatSingle = arr => [].concat(...arr);
//to enable deep level flatten use recursion with reduce and concat
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
//non recursive flatten deep using a stack
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
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();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
//recursive flatten deep
function flatten(array) {
  var flattend = [];
  !(function flat(array) {
    array.forEach(function(el) {
      if (Array.isArray(el)) flat(el);
      else flattend.push(el);
    });
  })(array);
  return flattend;
}

Polyfill

if (!Array.prototype.flat) {
  Array.prototype.flat = function(depth) {
    var flattend = [];
    (function flat(array, depth) {
      for (let el of array) {
        if (Array.isArray(el) && depth > 0) {
          flat(el, depth - 1); 
        } else {
          flattend.push(el);
        }
      }
    })(this, Math.floor(depth) || 1);
    return flattend;
  };
}

仕様

仕様 ステータス コメント
Array.prototype.flat proposal Finished (4)  

ブラウザー実装状況

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

凡例

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

関連項目

ドキュメントのタグと貢献者

このページの貢献者: segayuu, mdnwebdocs-bot, dlwe, fscholz, YuichiNukiyama
最終更新者: segayuu,