You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将嵌套对象扁平化为对象数组?现有递归实现功能异常求解决方案

解决嵌套对象扁平化问题

我来帮你修复这个递归实现,先拆解原代码的问题,再给出符合预期的解决方案~

原代码的核心问题

你的当前实现有几个关键逻辑偏差,导致输出不符合预期:

  1. 错误遍历属性而非item:你遍历的是对象的每个键(比如title、value、children),每次只给flattened赋值单个属性就push到结果数组,导致数组里会出现大量不完整的对象(比如只有title或只有value的条目)。
  2. 递归逻辑未区分层级:递归时没有专门处理children这个层级标识,只要遇到对象就递归,导致把普通属性的处理逻辑和层级递归混在一起,同时重复push了多次中间状态的对象。
  3. 全局数组的冗余填充:结合上面的遍历逻辑,全局数组会被填充很多无效的中间对象,而非完整的item条目。

正确的实现方案

我们的核心思路应该是:遍历每个层级的item对象,提取title和value组成完整对象加入结果,然后递归处理该item的children对象。

方案1:保留全局数组(贴合你的原有结构)

var data = { 
  1: { 
    title: "Foo", 
    value: 111, 
    children: { 
      2: { 
        title: "Bar", 
        value: 222, 
      }, 
    }, 
  }, 
  3: { 
    title: "Baz", 
    value: 333, 
    children: { 
      4: { 
        title: "Qux", 
        value: 444, 
        children: { 
          5: { 
            title: "Quux", 
            value: 555, 
          }, 
        }, 
      }, 
    }, 
  }, 
}; 

const finalArrayOfObjects = []; 

const flattenObject = (obj) => {
  // 遍历当前对象的所有值(每个值都是一个带title/value/children的完整item)
  Object.values(obj).forEach(item => {
    // 提取当前item的title和value,组成完整对象加入结果数组
    finalArrayOfObjects.push({
      title: item.title,
      value: item.value
    });
    
    // 如果当前item存在children,递归处理children对象
    if (item.children && typeof item.children === 'object' && item.children !== null) {
      flattenObject(item.children);
    }
  });
};

// 调用函数
flattenObject(data);
console.log(finalArrayOfObjects);

方案2:无全局变量(更纯净的函数式实现)

如果不想依赖全局数组,可以把结果数组作为参数传递给递归函数,减少函数副作用:

const flattenObject = (obj, result = []) => {
  Object.values(obj).forEach(item => {
    result.push({ title: item.title, value: item.value });
    // 存在children则递归处理子层级
    if (item.children) {
      flattenObject(item.children, result);
    }
  });
  return result;
};

// 调用方式
const finalArray = flattenObject(data);
console.log(finalArray);

两种方案的输出都会完全符合你的预期:

[
  { title: 'Foo', value: 111 },
  { title: 'Bar', value: 222 },
  { title: 'Baz', value: 333 },
  { title: 'Qux', value: 444 },
  { title: 'Quux', value: 555 }
]

内容的提问来源于stack exchange,提问作者rbt hl

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.30 09:57:38