如何为嵌套JavaScript对象数组各层级添加Radius属性？

我有一个嵌套结构的JavaScript对象数组，需要为每个层级的对象添加Radius属性，属性值为当前层级深度 × 20。尝试用递归实现时，无法在递归过程中维持层级索引，遇到了困难。

输入示例 #

let data = [{
    label: 'classA',
    value: 40,
    children: [{
        label: 'classA_sectioA',
        value: 12,
        children: [{
            label: 'classA_sectioA_student1',
            value: 7,
          },
          {
            label: 'classA_sectioA_student2',
            value: 3,
          },
          {
            label: 'classA_sectioA_student3',
            value: 2,
          }
        ]
      },
      {
        label: 'classA_sectioB',
        value: 15,
        children: [{
            label: 'classA_sectioB_student1',
            value: 7,
          },
          {
            label: 'classA_sectioB_student2',
            value: 3,
          },
          {
            label: 'classA_sectioB_student3',
            value: 5,
          }
        ],
      },
      {
        label: 'classA_sectioC',
        value: 13,
        children: [{
            label: 'classA_sectioC_student1',
            value: 6,
          },
          {
            label: 'classA_sectioC_student2',
            value: 3,
          },
          {
            label: 'classA_sectioC_student3',
            value: 4,
          }
        ]
      }
    ]
  },
  {
    label: 'classB',
    value: 60,
    children: [{
        label: 'classB_sectioA',
        value: 12,
        children: [{
            label: 'classB_sectioA_student1',
            value: 6,
          },
          {
            label: 'classB_sectioA_student2',
            value: 5,
          },
          {
            label: 'classB_sectioA_student3',
            value: 1,
          }
        ]
      },
      {
        label: 'classB_sectioB',
        value: 18,
        children: [{
            label: 'classB_sectioB_student1',
            value: 3,
          },
          {
            label: 'classB_sectioB_student2',
            value: 13,
          },
          {
            label: 'classB_sectioB_student3',
            value: 2,
          }
        ],
      },
      {
        label: 'classB_sectioC',
        value: 30,
        children: [{
            label: 'classB_sectioC_student1',
            value: 1,
          },
          {
            label: 'classB_sectioC_student2',
            value: 9,
            children: [{
                label: 'shan',
                value: 4,
              },
              {
                label: 'sk',
                value: 2,
              },
              {
                label: 'tk',
                value: 2,
              }
            ]
          },
          {
            label: 'classB_sectioC_student3',
            value: 20,
          }
        ]
      }
    ]
  },
  {
    label: 'classC',
    value: 90,
    children: [{
        label: 'classC_sectioA',
        value: 30,
        children: [{
            label: 'classC_sectioA_student1',
            value: 11,
          },
          {
            label: 'classC_sectioA_student2',
            value: 12,
          },
          {
            label: 'classC_sectioA_student3',
            value: 7,
          }
        ]
      },
      {
        label: 'classC_sectioB',
        value: 20,
        children: [{
            label: 'classC_sectioB_student1',
            value: 1,
          },
          {
            label: 'classC_sectioB_student2',
            value: 16,
          },
          {
            label: 'classC_sectioB_student3',
            value: 13,
          }
        ],
      },
      {
        label: 'classC_sectioC',
        value: 40,
        children: [{
            label: 'classC_sectioC_student1',
            value: 21,
            children: [{
                label: 'shanu',
                value: 22,
                label: 'sk',
                value: 18,
              },
              {
                label: 'tk',
                value: 11,
              }
            ]
          },
          {
            label: 'classC_sectioC_student2',
            value: 12,
          },
          {
            label: 'classC_sectioC_student3',
            value: 7,
          }
        ]
      }
    ]
  }]

期望输出示例 #

let data = [{
    label: 'classA',
    value: 40,
    Radius: 20,
    children: [{
        label: 'classA_sectioA',
        value: 12,
        Radius: 40,
        children: [{
            label: 'classA_sectioA_student1',
            value: 7,
          },
          {
            label: 'classA_sectioA_student2',
            value: 3,
          },
          {
            label: 'classA_sectioA_student3',
            value: 2,
          }
        ]
      },
      {
        label: 'classA_sectioB',
        value: 15,
        Radius: 40,
        children: [{
            label: 'classA_sectioB_student1',
            value: 7,
            Radius: 60
          },
          {
            label: 'classA_sectioB_student2',
            value: 3,
            Radius: 60
          },
          {
            label: 'classA_sectioB_student3',
            value: 5,
            Radius: 60
          }
        ],
      },
      {
        label: 'classA_sectioC',
        value: 13,
        Radius: 40,
        children: [{
            label: 'classA_sectioC_student1',
            value: 6,
            Radius: 60
          },
          {
            label: 'classA_sectioC_student2',
            value: 3,
            Radius: 60
          },
          {
            label: 'classA_sectioC_student3',
            value: 4,
            Radius: 60
          }
        ]
      }
    ]
  },
  {
    label: 'classB',
    value: 60,
    Radius: 20,
    children: [{
        label: 'classB_sectioA',
        value: 12,
        Radius: 40,
        children: [{
            label: 'classB_sectioA_student1',
            value: 6,
            Radius: 60
          },
          {
            label: 'classB_sectioA_student2',
            value: 5,
            Radius: 60
          },
          {
            label: 'classB_sectioA_student3',
            value: 1,
            Radius: 60
          }
        ]
      },
      {
        label: 'classB_sectioB',
        value: 18,
        Radius: 40,
        children: [{
            label: 'classB_sectioB_student1',
            value: 3,
            Radius: 60
          },
          {
            label: 'classB_sectioB_student2',
            Radius: 60,
            value: 13,
          },
          {
            label: 'classB_sectioB_student3',
            value: 2,
            Radius: 60
          }
        ],
      },
      {
        label: 'classB_sectioC',
        value: 30,
        Radius: 40,
        children: [{
            label: 'classB_sectioC_student1',
            value: 1,
            Radius: 60
          },
          {
            label: 'classB_sectioC_student2',
            Radius: 60,
            value: 9,
            children: [{
                label: 'shan',
                value: 4,
                Radius: 80
              },
              {
                label: 'sk',
                value: 2,
                Radius: 80
              },
              {
                label: 'tk',
                value: 2,
                Radius: 80
              }
            ]
          },
          {
            label: 'classB_sectioC_student3',
            value: 20,
            Radius: 60
          }
        ]
      }
    ]
  },
  {
    label: 'classC',
    value: 90,
    Radius: 20,
    children: [{
        label: 'classC_sectioA',
        value: 30,
        Radius: 40,
        children: [{
            label: 'classC_sectioA_student1',
            value: 11,
            Radius: 60
          },
          {
            label: 'classC_sectioA_student2',
            value: 12,
            Radius: 60
          },
          {
            label: 'classC_sectioA_student3',
            value: 7,
            Radius: 60
          }
        ]
      },
      {
        label: 'classC_sectioB',
        value: 20,
        Radius: 40,
        children: [{
            label: 'classC_sectioB_student1',
            value: 1,
            Radius: 60
          },
          {
            label: 'classC_sectioB_student2',
            value: 16,
            Radius: 60
          },
          {
            label: 'classC_sectioB_student3',
            value: 13,
            Radius: 60
          }
        ],
      },
      {
        label: 'classC_sectioC',
        value: 40,
        Radius: 40,
        children: [{
            label: 'classC_sectioC_student1',
            Radius: 60,
            value: 21,
            children: [{
                label: 'shanu',
                value: 22,
                Radius: 80
              },
              {
                label: 'sk',
                value: 18,
                Radius: 80
              },
              {
                label: 'tk',
                value: 11,
                Radius: 80
              }
            ]
          },
          {
            label: 'classC_sectioC_student2',
            value: 12,
            Radius: 60
          },
          {
            label: 'classC_sectioC_student3',
            value: 7,
            Radius: 60
          }
        ]
      }
    ]
  }]

解决方案 #

核心思路是给递归函数传递当前层级深度参数，每次处理完当前层级对象后，递归处理子级时将深度加1。

function addRadiusToNestedData(data, depth = 1) {
  data.forEach(item => {
    // 为当前对象添加Radius属性，值为深度×20
    item.Radius = depth * 20;
    // 如果存在子级数组，递归处理子层级，深度+1
    if (item.children && Array.isArray(item.children)) {
      addRadiusToNestedData(item.children, depth + 1);
    }
  });
}

// 调用函数处理原始数据
addRadiusToNestedData(data);

代码说明

• 递归函数addRadiusToNestedData接收两个参数：待处理的数组data，以及当前层级深度depth（默认值为1，对应最外层层级）
• 遍历数组中的每个对象，计算并添加Radius属性
• 检查对象是否包含children数组，若存在则递归调用函数，将深度参数加1，处理下一层级
• 注意：该函数会直接修改原数组对象，若需要保留原始数据，可先对数据进行深拷贝（比如使用JSON.parse(JSON.stringify(data))）后再处理

内容的提问来源于stack exchange，提问作者Sbinod B