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

ネストされたJavaScriptオブジェクトの深度レベルをカウントする方法は?


オブジェクトの配列があり、さらにこのようなネストされたオブジェクトがあります-

const arr = [{
   id: 0, children: []
}, {
      id: 1, children: [{
      id: 2, children: []
}, {
      id: 3, children: [{
         id: 4, children: []
      }]
   }]
}];

私たちの仕事は、この配列を受け取り、ネストされた各オブジェクトにdepthプロパティを割り当てる再帰関数(たとえば、assignDepth()を作成することです。 ID 0のオブジェクトの深さは0であるように、id 1の深さも1であり、id2とid3はid1の中にネストされているため、深さ1になり、さらにid3の中にネストされているid4の深さは2になります。

したがって、この関数のコードを書いてみましょう。これは単純な再帰関数であり、配列の最後に到達するまでサブオブジェクトを繰り返し繰り返します-

const arr = [{
   id: 0, children: []
}, {
      id: 1, children: [{
      id: 2, children: []
}, {
      id: 3, children: [{
         id: 4, children: []
      }]
   }]
}];
const assignDepth = (arr, depth = 0, index = 0) => {
   if(index < arr.length){
      arr[index].depth = depth;
      if(arr[index].children.length){
         return assignDepth(arr[index].children, depth+1, 0);
      };
      return assignDepth(arr, depth, index+1);
   };
   return;
};
assignDepth(arr);
console.log(JSON.stringify(arr, undefined, 4));

出力

コンソールの出力は-

になります
[
   {
      "id": 0,
      "children": [],
      "depth": 0
   },
   {
      "id": 1,
      "children": [
         {
            "id": 2,
            "children": [],
            "depth": 1
         },
         {
            "id": 3,
            "children": [
               {
                  "id": 4,
                  "children": [],
                  "depth": 2
               }
            ],
            "depth": 1
         }
      ],
      "depth": 0
   }
]

  1. 2つのJavaScriptオブジェクトをマージする方法は?

    以下は、2つのJavaScriptオブジェクトをマージするコードです- 例 <!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> &nbs

  2. JavaScriptの値に基づいてオブジェクトをグループ化する方法は?

    以下は、JavaScriptの値に基づいてオブジェクトをグループ化するコードです- 例 <!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>