如何将嵌套对象扁平化为对象数组?现有递归实现功能异常求解决方案
解决嵌套对象扁平化问题
我来帮你修复这个递归实现,先拆解原代码的问题,再给出符合预期的解决方案~
原代码的核心问题
你的当前实现有几个关键逻辑偏差,导致输出不符合预期:
- 错误遍历属性而非item:你遍历的是对象的每个键(比如
title、value、children),每次只给flattened赋值单个属性就push到结果数组,导致数组里会出现大量不完整的对象(比如只有title或只有value的条目)。 - 递归逻辑未区分层级:递归时没有专门处理
children这个层级标识,只要遇到对象就递归,导致把普通属性的处理逻辑和层级递归混在一起,同时重复push了多次中间状态的对象。 - 全局数组的冗余填充:结合上面的遍历逻辑,全局数组会被填充很多无效的中间对象,而非完整的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
相关产品推荐
相关产品推荐

