如何基于上下文对象递归构建符合规则的动态数据对象？

问题背景与需求 #

上下文对象示例 #

const context = {
   ...other props..., 
   groups: [ 
      {
         heading: 'basic',
         canHaveMultiple: false,  // data.basic = {username: { type: 'text', value: '' }, password: { type: 'password', value: ''}}
         inputs: [  
            {
              name: 'username',
              type: 'text',
              placeholder: 'username',
            },
            {
              name: 'password',
              type: 'password',
              placeholder: 'password',
            },
         ],
      },
      {
         heading: 'about',
         canHaveMultiple: false, // data.about = {about: { type: 'textarea', value: '' }}
         inputs: [  
            {
              name: 'about',
              type: 'textarea',
              placeholder: 'about',
              canHaveMultiple: false,
            },
         ],
      },
      {
         heading: 'hobbies',
         canHaveMultiple: true,  // data.hobbies = { model: { title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''} }, values: [ { title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''} }]
         inputs: [  
            {
              name: 'title',
              type: 'text',
              placeholder: 'about',
              canHaveMultiple: false,
            },
            {
              name: 'description',
              type: 'textarea',
              placeholder: null,
              canHaveMultiple: false,
            },
         ],
      },
      {
         heading: 'friends',
         canHaveMultiple: true, // data.friends = { model: {name: {type: 'text', value: '' }, hobbies: [{ title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''}} }] }
         inputs: [
          {
           name: 'name',
           type: 'text',
           placeholder: 'this is fine',
           canHaveMultiple: false
          },
          {
            name: 'hobbies',
            type: 'nested',
            canHaveMultiple: true,
            inputs: [
             {
               name: 'title',
               type: 'textarea',
               placeholder: 'about',
               canHaveMultiple: false,
             },
             {
               name: 'description',
               type: 'textarea',
               placeholder: 'about',
               canHaveMultiple: false,
             },
           ]
         }
      ],
    },
  ],
}

期望输出的数据对象示例 #

const data = {
  basic: {
      username: {
         type: 'text',
         value: '',
      },
      password: {
         type: 'password',
         value: ''
      }
  },
  about: {
     about: {
        type: 'textarea',
        value: '',
     }
  },
  hobbies: {
     model: {
       title: { 
          type: 'text',
          value: '',
       },
       description: {
          type: 'textarea',
          value: '',
       }
     },
     values: [
         {
            title: {
               type: 'text',
               value: '',
            },
            description: {
               type: 'textarea',
               value: '',
            }
         } 
     ]
  },
  friends: {
     model: {
       name: { 
         type: 'text',
         value: '',
       },
       hobbies: {
           model: {
             title: { 
                type: 'textarea',
                value: '',
             },
             description: {
                type: 'textarea',
                value: '',
             }
           },
           values: []
       }
     },
     values: []
  },
}

核心规则 #

• groups数组元素的heading作为数据对象的顶层属性；
• 每个group及子input的canHaveMultiple属性决定结构：
  • canHaveMultiple为false时，生成{[input.name]: {type: input.type, value: ''}}结构；
  • canHaveMultiple为true时，生成包含model和values的结构，model用于快速复制新对象到values数组；
• 需递归处理input类型为'nested'的多层嵌套场景。

用户问题 #

作为递归新手，尝试多日仍无法实现3层以上嵌套的处理，请问是否可通过递归完成该需求？是否高效？或者我的思路存在问题？

解答 #

1. 完全可以用递归实现 #

递归是处理这类嵌套层级结构的最优方案之一，不管多少层嵌套都能覆盖，只要逻辑正确，3层以上的嵌套完全没问题。

2. 递归实现的核心思路 #

递归的关键是抽离通用的子问题处理逻辑：不管是顶层的group，还是nested类型的input，本质都是「根据一组inputs和canHaveMultiple属性，生成对应的数据结构」。我们可以把这个逻辑封装成通用函数，在需要处理嵌套结构时递归调用它。

3. 具体代码实现 #

// 处理单个input，生成对应结构
function buildInputStructure(input) {
  // 如果是嵌套类型，递归调用buildStructure生成结构
  if (input.type === 'nested') {
    return buildStructure(input.inputs, input.canHaveMultiple);
  }
  // 普通input生成基础结构
  return {
    type: input.type,
    value: ''
  };
}

// 处理一组inputs，根据canHaveMultiple生成对应结构
function buildStructure(inputs, canHaveMultiple) {
  // 先生成基础的字段结构：遍历inputs，生成{name: 对应结构}
  const baseObj = inputs.reduce((acc, input) => {
    acc[input.name] = buildInputStructure(input);
    return acc;
  }, {});

  // 根据canHaveMultiple决定最终结构
  if (!canHaveMultiple) {
    return baseObj;
  } else {
    return {
      model: baseObj,
      // 初始化values：根据场景决定是否默认添加空实例，可按需调整
      values: inputs.some(i => i.type === 'nested') ? [] : [JSON.parse(JSON.stringify(baseObj))]
    };
  }
}

// 生成最终data对象
function buildData(context) {
  return context.groups.reduce((acc, group) => {
    acc[group.heading] = buildStructure(group.inputs, group.canHaveMultiple);
    return acc;
  }, {});
}

// 调用示例
const data = buildData(context);
console.log(data);

4. 效率分析 #

递归的性能完全不用担心：

• 业务场景中的嵌套深度通常不会超过10层，远低于JavaScript引擎的调用栈上限（一般是几千层），不会出现栈溢出问题；
• 递归的函数调用开销在现代JS引擎中已经被优化得很好，和循环实现的性能差距可以忽略不计；
• 递归代码的可读性和可维护性远高于嵌套循环，后续修改规则或扩展功能更方便。

5. 新手常见的思路问题 #

你大概率是没有抽离通用的递归逻辑，比如把顶层group和nested input的处理分开写，导致代码重复且无法处理深层嵌套。正确的做法是把「处理inputs+canHaveMultiple」做成独立函数，不管是顶层还是嵌套层都复用这个函数，让递归自然处理层级关系。

内容的提问来源于stack exchange，提问作者Leslie Bong