Array.prototype.flat()

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// 予想される結果: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());
// 予想される結果: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));
// 予想される結果: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));
// 予想される結果: Array [0, 1, 2, 3, 4, 5]

構文

js
flat()
flat(depth)

引数

depth 省略可

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

返値

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

解説

flat() メソッドはコピーメソッドです。これは this を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。

flat() メソッドは、フラット化される配列が疎配列の場合、空のスロットを削除します。例えば、 depth が 1 の場合、ルート配列と最初の入れ子配列の空のスロットは無視されますが、それ以上の入れ子配列の空のスロットは配列自体に保持されます。

flat() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。しかし、その要素を平坦化するには配列でなければなりません。

例

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

js
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() を疎配列で使用

flat() メソッドは配列内の空のスロットを削除します。

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

const array = [1, , 3, ["a", , "c"]];
console.log(array.flat()); // [ 1, 3, "a", "c" ]

const array2 = [1, , 3, undefined, ["a", , ["d", , "e"]], null];
console.log(array2.flat()); // [ 1, 3, undefined, "a", ["d", empty, "e"], null ]
console.log(array2.flat(2)); // [ 1, 3, undefined, "a", "d", "e", null ]

配列でないオブジェクトに対する flat() の呼び出し

flat() メソッドは this の length プロパティを読み込み、キーが length より小さい非負の整数である各プロパティにアクセスします。要素が配列でない場合は、結果に直接追加されます。要素が配列の場合は、引数 depth に従って平坦化されます。

js
const arrayLike = {
  length: 3,
  0: [1, 2],
  // 配列風オブジェクトは平坦化されない
  1: { length: 2, 0: 3, 1: 4 },
  2: 5,
  3: 3, // length が 3 なので flat() から無視される
};
console.log(Array.prototype.flat.call(arrayLike));
// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ]