再帰的に JavaScript オブジェクトをネストする | コーディングチュートリアル

はじめに

この実験では、nest と呼ばれる JavaScript 関数を調べます。この関数は、フラットな配列に相互にリンクされたオブジェクトを再帰的にネストします。この関数は再帰、Array.prototype.filter()、および Array.prototype.map() を使用して、項目の id と parent_id プロパティに基づいて項目をフィルタリングしてネストします。この実験が終了するとき、JavaScript で再帰を使用してネストされたオブジェクトを作成する方法をより深く理解しているでしょう。

JavaScript で再帰を使ってオブジェクトをネストする方法

フラットな配列内のオブジェクトを再帰的にネストするには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
相互にリンクされたオブジェクトを再帰を使ってネストします。
id が link と一致する項目をフィルタリングするために Array.prototype.filter() を使います。
各項目を新しいオブジェクトにマッピングするために Array.prototype.map() を使います。この新しいオブジェクトには children プロパティがあり、これは現在の項目の子である項目に基づいて再帰的に項目をネストします。
2 番目の引数 id を省略すると、既定で null になります。これはオブジェクトが別のオブジェクトにリンクされていないことを示します（つまり、トップレベルのオブジェクトです）。
3 番目の引数 link を省略すると、既定のプロパティとして 'parent_id' が使われます。これにより、オブジェクトがその id によって別のオブジェクトにリンクされます。

以下がコードです。

const nest = (items, id = null, link = "parent_id") =>
  items
    .filter((item) => item[link] === id)
    .map((item) => ({ ...item, children: nest(items, item.id, link) }));

nest() 関数を使うには、id プロパティと parent_id プロパティを持つオブジェクトの配列を作成します。この parent_id プロパティは、オブジェクトを別のオブジェクトにリンクします。その後、nest() 関数を呼び出して、配列を引数として渡します。この関数は、parent_id プロパティに基づいてネストされた新しいオブジェクトの配列を返します。

たとえば：

const comments = [
  { id: 1, parent_id: null },
  { id: 2, parent_id: 1 },
  { id: 3, parent_id: 1 },
  { id: 4, parent_id: 2 },
  { id: 5, parent_id: 4 }
];
const nestedComments = nest(comments);
// [{ id: 1, parent_id: null, children: [...] }]

まとめ

おめでとうございます！あなたはオブジェクトをネストする実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

リンクされた JavaScript オブジェクトの再帰的なネスト

はじめに

JavaScript で再帰を使ってオブジェクトをネストする方法

まとめ