JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのArray.prototype.flatMap()メソッドとは？ネストした配列をフラット化する方法

JavaScriptのArray.prototype.flatMap()メソッドは、ネストされた（入れ子構造の）配列を、新しいフラットな（平坦な）配列へと変換するメソッドです。

flatMap()は、各要素に対してmap()のコールバック関数を実行した後、その結果を深さ1でフラット化します。つまり、「map()してからflat()を呼ぶ」処理を、1つのメソッドで簡潔に記述できるのが大きな特徴です。

flatMap()の基本的な動作

flatMap()の構文は以下の通りです。

arr.flatMap(callbackFn)

コールバック関数が配列を返す場合、その返り値の配列が自動的に展開され、結果として1段階浅い配列が生成されます。ネストが2段階以上ある場合は、深さ1のみしかフラット化されない点に注意してください。

サンプルコード

以下は、flatMap()を使ってネストした配列をフラットな配列に変換するコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Array flatMap()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the nested array to flat array</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let arr = ["cow", ["bull", "lion", "tiger"], "sheep"];
    for (x of arr.entries()) {
        fillEle.innerHTML += x + "<br>";
    }
    var entries = arr.entries();
    document.querySelector(".Btn").addEventListener("click", () => {
        arr = arr.flatMap((x) => x);
        fillEle.innerHTML = "";
        for (x of arr.entries()) {
            fillEle.innerHTML += x + "<br>";
        }
    });
</script>
</body>
</html>

コードの解説

  • 元の配列 ["cow", ["bull", "lion", "tiger"], "sheep"] には、文字列要素とネストされた配列が混在しています。
  • arr.flatMap((x) => x) を実行することで、各要素がそのまま返され、ネストされた配列だけが1段階展開されます。
  • ボタンをクリックすると、変換後の配列がインデックス番号付きで画面に表示されます。

実行結果

上記のコードを実行すると、まず次のような出力が表示されます。

JavaScriptのArray.prototype.flatMap()メソッドとは？ネストした配列をフラット化する方法

「CLICK HERE」ボタンをクリックすると、ネストが解除されたフラットな配列が表示されます。

JavaScriptのArray.prototype.flatMap()メソッドとは？ネストした配列をフラット化する方法

まとめ

flatMap()は「マップ＋フラット化」を一度に行える便利なメソッドです。特に、APIから取得したデータの整形や、多次元的なデータ構造の前処理などでコードを大幅に簡潔にできるため、積極的に活用しましょう。

  1. JavaScriptのArray.prototype.sort()メソッドの使い方をサンプルコードで解説

    Array.prototype.sort()は、JavaScriptで配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並び方に加えて、昇順・降順も自由に指定でき、配列操作の中でも特に使用頻度の高いメソッドの一つです。 ただし重要なポイントとして、sort()メソッドはデフォルトではすべての要素を文字列に変換してから比較します。そのため、数値の配列を意図したとおりに並べ替えたい場合は、比較関数を引数として渡す必要があります。 以下は、Array.prototype.sort()メソッドの基本的な使い方を示すサンプルコードです。 サンプルコード <!DOC

  2. JavaScriptのArray.prototype.flat()メソッドとは？配列を指定した深さで平坦化する方法

    Array.prototype.flat()メソッドとはJavaScriptのArray.prototype.flat()メソッドは、ネストされた配列を指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列を変更することはなく、平坦化された新しい配列を作成して返します。引数には平坦化の深さ（depth）を数値で指定します。省略した場合はデフォルトで「1」が適用され、「Infinity」を指定すればすべての階層のネストを完全に展開することも可能です。コード例以下は、Array.prototype.flat()メソッドを使用したサンプルコードです。<!DOCTYPE h