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

JavaScriptでネストされた配列を処理し、階層レベルに応じて数値を表示する方法

JavaScriptでは、多次元（ネストされた）配列の各要素を、その階層の深さに応じてインデント付きで画面に出力したいケースがあります。本記事では、reduce()メソッドと再帰処理を組み合わせて、ネストされた配列を美しく整形して表示する実装方法を解説します。

問題の概要

まず、以下のようなネストされた数値の配列を考えてみましょう。

const arr = [23, 6, [2,[6,2,1,2], 2], 5, 2];

この配列の各要素（数値）を画面に出力するプログラムを作成する必要があります。重要なのは、数値がネストされている階層の深さに応じて、出力の順序とインデント（字下げ）が決まるという点です。

つまり、上記の入力に対する期待される出力は次のようになります。階層が深くなるほど、右側にずれて表示されます。

23
6
    2
       6
       2
       1
       2
    2
5
2

実装のポイント

この問題を実装する際のポイントは以下の通りです。

  • 再帰的な処理： 配列の中に配列が含まれている場合、その内部配列に対して同じ処理を繰り返し適用します。
  • 階層レベルの管理： ネストが深くなるごとにインデント量を増やすため、現在の階層レベルを引数として渡していきます。
  • DOM操作： 各数値を<p>タグとして生成し、marginLeftスタイルで階層に応じた字下げを表現します。

コード例

実際のコードは以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>PATTERN</title>
</head>
<body>
    <script>
        const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];
        arr.reduce(function iter(level) {
            return function (node, item) {
                var pTag = document.createElement('p');
                pTag.style.marginLeft = level + 'px';
                node.appendChild(pTag);
                if (Array.isArray(item)) {
                    item.reduce(iter(level || 50), pTag);
                } else {
                    pTag.appendChild(document.createTextNode(item));
                }
                return node;
            };
        }(0), document.body);
    </script>
    <p></p>
</body>
</html>

コードの仕組み

このコードの動作を簡単に説明します。

  1. 最初にiter(0)を呼び出すことで、階層レベル0から処理が始まります。
  2. 各要素に対して新しい<p>タグを作成し、marginLeftに現在の階層レベル（px単位）を設定することでインデントを実現しています。
  3. Array.isArray(item)で要素が配列かどうかを判定し、配列であればiter(level || 50)を再帰的に呼び出します。これにより、一段深い階層（50px分右側）から要素が出力されます。
  4. 配列でない場合は、テキストノードとして数値を<p>タグ内に追加します。

実行結果

このコードをブラウザで実行すると、画面には階層構造が視覚的にわかる形で、以下のように数値が表示されます。

JavaScriptでネストされた配列を処理し、階層レベルに応じて数値を表示する方法

このように、reduce()とクロージャ（関数を返す関数）を活用することで、配列のネスト構造をそのまま画面上のインデント構造に変換できます。同様の手法は、ツリー構造のデータ表示やフォルダ構成の可視化など、さまざまな場面で応用可能です。

  1. JavaScriptで各要素より小さい数の個数を数えて配列を作成する方法

    JavaScriptで、数値の配列を引数として受け取る関数を作成する必要があります。 この関数は、入力された配列をもとに新しい配列を構築します。新しい配列の各要素には、元の配列において「その要素よりも小さい値を持つ要素の個数」が格納されます。 処理のイメージ 例えば、入力配列が次のようになっているとします。 const arr = [2, 7, 3, 1, 56, 4, 7, 8]; この場合、出力される配列は次のようになります。 const output = [1, 4, 2, 0, 7, 3, 4, 6]; それぞれの値がどのように求められているか見てみましょう。 最初の要素 2：自分よ

  2. JavaScriptの配列を数値は昇順、文字列はアルファベット順に並べ替える方法

    問題数値と文字列が混在した配列を受け取り、数値を昇順に並べ替えた要素を先頭に、続けて文字列をアルファベット順に並べ替えた要素を配置した、単一の配列を返すJavaScript関数を作成します。重要な条件として、各要素は元のデータ型（数値・文字列）を維持したまま扱う必要があります。つまり、数値を文字列に変換したり、その逆を行ったりしてはいけません。入力例[5, 8, car, dad, amber, 1, 12, 76, bat]実装コード以下が実際のコードです。 { if(typeof a === number && typeof b === string){