JavaScript 配列 flat()

概要: このチュートリアルでは、JavaScript 配列の flat() メソッドを使用して配列を平坦化する方法を学びます。

JavaScript 配列 flat() メソッドの紹介

ES2019 で導入された Array.prototype.flat() メソッドは、指定された深さまでサブ配列のすべての要素を再帰的に連結した新しい 配列 を作成します。

flat() メソッドの構文は以下のとおりです。

let newArray = arrayObject.flat([depth])Code language: JavaScript (javascript)

depth パラメータは、メソッドが配列構造をどの程度深く平坦化するのかを指定します。デフォルト値は 1 です。

次の例は、数値の配列を平坦化する方法を示しています。

const numbers = [1, 2, [3, 4, 5]];
const flatNumbers = numbers.flat();

console.log(flatNumbers);Code language: JavaScript (javascript)

出力

[1, 2, 3, 4, 5]Code language: JSON / JSON with Comments (json)

この例では、flat() メソッドに depth 引数を渡していないため、深さはデフォルトで 1 になります。 flat() メソッドは、ネストされた配列 [3,4,5] のすべての要素を新しい配列の要素に連結しました。

flat() メソッドは新しい配列を作成し、元の配列は変更しないことに注意してください。

console.log(numbers);Code language: JavaScript (javascript)

出力

[ 1, 2, [ 3, 4, 5 ] ]Code language: JavaScript (javascript)

次の例は、2 レベルの深さを持つ配列を平坦化します。

const numbers = [1, 2, [3, 4, 5, [6, 7]]];
const flatNumbers = numbers.flat(2);

console.log(flatNumbers);Code language: JavaScript (javascript)

出力

[1, 2, 3, 4, 5, 6, 7]Code language: JavaScript (javascript)

深さのレベルがわからない場合は、flat() メソッドに Infinity を渡すことで、すべてのサブ配列の要素を再帰的に新しい配列に連結することができます。

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

console.log(flatNumbers);Code language: JavaScript (javascript)

配列に空のスロットがある場合、flat() メソッドを使用して、次のように穴を削除できます。

const numbers = [1, 2, , 4, , 5];
const sequence = numbers.flat();

console.log(sequence);Code language: JavaScript (javascript)

出力

[ 1, 2, 4, 5 ]Code language: JavaScript (javascript)

まとめ

• ネストされた配列を持つ配列を平坦化するには、Array.prototype.flat() メソッドを使用します。
• ネストされた配列をどの程度深く平坦化する必要があるかを指定するには、depth 引数を使用します。デフォルトの深さは 1 です。
• flat() は、空のスロットを持つ配列の穴も削除します。