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

JavaScriptで多次元配列をフラット化する方法【flat()メソッドの使い方】

JavaScriptでは、flat()メソッドを使うことで、入れ子になった多次元配列を簡単にフラット化（平坦化）できます。この記事では、実際のコード例とともに、多次元配列のフラット化の手順をわかりやすく解説します。

flat()メソッドとは

flat()は、ES2019（ES10）で導入された配列メソッドで、ネストされた配列を指定した深さまで展開して新しい配列を返します。引数には展開する深さ（depth）を数値で指定します。

  • arr.flat() … 深さ1まで展開
  • arr.flat(2) … 深さ2まで展開
  • arr.flat(Infinity) … すべてのネストを完全に展開

実装例：ボタンクリックで配列をフラット化する

以下は、深さ2のネストを持つ配列をflat(2)でフラット化し、結果を画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptで多次元配列をフラット化</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptで多次元配列をフラット化する</h1>
<div class="sample"><pre>[1,2,3,[4,5],[6,[7,8]]]</pre></div>
<div style="color: green;" class="result">flat後の配列 : <br /></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、配列が深さ2でフラット化されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [1, 2, 3, [4, 5], [6, [7, 8]]];
    document.querySelector(".Btn").addEventListener("click", () => {
        let store = arr.flat(2);
        store.forEach((item, index) => {
            resEle.innerHTML += index + " : " + item + "<br>";
        });
    });
</script>
</body>
</html>

コードのポイント解説

1. 元の配列の定義

let arr = [1, 2, 3, [4, 5], [6, [7, 8]]];

この配列は、数値だけでなく配列の中にさらに配列が含まれる「深さ2」の多次元配列です。

2. flat(2)によるフラット化

let store = arr.flat(2);

flat(2)を実行すると、深さ2までのネストがすべて展開され、次のような一次元配列になります。

[1, 2, 3, 4, 5, 6, 7, 8]

3. 結果の表示

forEach()を使って、フラット化した配列の各要素をインデックス番号付きで画面に出力しています。

出力結果

ページを開いた直後の表示：

JavaScriptで多次元配列をフラット化する方法【flat()メソッドの使い方】

「ここをクリック」ボタンを押した後の表示：

JavaScriptで多次元配列をフラット化する方法【flat()メソッドの使い方】

ボタンをクリックすると、インデックス0から7までの各要素が順番に表示され、ネストが解除された一次元配列になっていることが確認できます。

まとめ

flat()メソッドを使えば、複雑なネスト構造の配列も引数で指定した深さまで簡単に展開できます。深さが不明な場合はflat(Infinity)を使うことで、すべての階層を一括してフラット化できるので便利です。データの正規化や集計処理など、さまざまな場面で活用できるテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

  2. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し