flat（）およびflatMap（）を使用してVanillaJavaScriptの配列をフラット化する

投稿日: 2022-04-20 2022-10-06
タグ: javascript

LodashやUnderscore.jsのようなライブラリは、しばらくの間、配列のフラット化に役立つユーティリティを提供してくれました。 ECMAScript標準の継続的な進化のおかげで、外部のユーティリティ関数を必要とせずに、バニラJavaScriptで直接それを行うメソッドを取得できるようになります。

最近インターウェブをフォローしている場合にお気づきかもしれませんが、配列をフラット化するこれらの新しい方法は、かなりの騒ぎを引き起こしました。現在#Smooshgateで知られていますが、その要点は、Array.prototype.flatten（）がMooToolsによってモンキーパッチされていることです。これは、一部のWebサイトでまだ使用されているため、ある時点で提案が表示されます-冗談としてflattenの代わりにsmooshという名前を付けて、MooToolsに依存している一部のWebサイトを壊さないようにします。多くの人がスムースな提案を真剣に受け止め、これでかなりのキーストロークが失われました。

この小さな論争からほこりが落ち着いたので、最終的な決定は、JavaScriptで配列をフラット化するのに役立つ2つのメソッド名としてflatとflatMapを使用することでした。

今それらを調べてみましょう。

Array.prototype.flat（）

その名前が示すように、Arrayプロトタイプで使用可能な flat（）メソッドは、呼び出された配列のフラット化されたバージョンである新しい配列を返します。引数が渡されない場合、深さ1が想定されます。それ以外の場合、最初の引数として数値が渡されると、配列をフラット化するための最大の深さとして使用されます。

簡単な例を次に示します。

const animals = [['🐕', '🐶'], ['😺', '🐈']];

const flatAnimals = animals.flat();
// same as: const flatAnimals = animals.flat(1);

console.log(flatAnimals);

// ['🐕', '🐶', '😺', '🐈']

そして、配列の合計の深さがフラットメソッドの最大の深さよりも大きい場合に何が起こるかに注意してください。

const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];

const flatAnimals = animals.flat(2);

console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿',['🦁'], '😻']

任意の深さの配列をフラット化する場合は、Infinityを使用できます。

const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];

const flatAnimals = animals.flat(Infinity);

console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿', '🦁', '😻']

Array.prototype.flatMap（）

配列プロトタイプで使用可能なflatMap（）メソッドは、 map（）メソッドに続いて flat（）メソッドをデフォルトの深さで使用するのと同じ効果があります1の。つまり、 flatMap（）は各値を新しい値にマップし、結果の配列は最大深度1までフラット化されます。

次に例を示します。

const animals = ['🐕', '🐈', '🐑', '🐮'];
const noises = ['woof', 'meow', 'baa', 'mooo'];

const mappedOnly = animals.map((animal, index) => [animal, noises[index]]);
const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]);

console.log(mappedOnly);
// [['🐕', 'woof'], ['🐈', 'meow'], ['🐑', 'baa'], ['🐮', 'mooo']

console.log(mappedAndFlatten);
// ['🐕', 'woof', '🐈', 'meow', '🐑', 'baa', '🐮', 'mooo']

flatMap（）に渡されるコールバック関数は、従来の map（）メソッドに渡される引数と同じ引数を想定しています。最初の引数は現在の値であり、 2番目は配列内の現在の値のインデックスであり、3番目はマップされている完全な配列です。

ブラウザのサポート

最新バージョンの最新ブラウザは両方の方法をサポートしており、サポートはすでにかなり良好です。たとえば、これらのメソッドはChrome 69以降、Firefox 62以降、Safari12以降でサポートされています。この記事の執筆時点では、現在、InternetExplorerまたはEdgeのどのバージョンもサポートされていません。

今すぐ使用を開始してすべてのブラウザをサポートする場合は、flatおよびflatMapの公式polyfill/shimをいつでも使用できます。

getdocs

13036