过程式遍历嵌套对象提取FIELD类型子节点及现有代码修复方法
原代码存在的核心问题
- 迭代方式不匹配结构:代码中遍历
children属性时,将普通JS对象直接作为数组使用for...of语法,普通对象无内置迭代器,会直接触发类型报错。遍历对象类型的children结构,需要先用Object.values()将子节点值转为可迭代数组。 - 顶层节点访问逻辑错误:根对象本身没有
children属性,它的直接子节点是o1、o2两个顶级容器,原代码读取object.children得到undefined,后续循环完全失效。 - 递归函数名调用错误:
godeeper函数内部递归调用时,引用了从未定义的iterate方法,会触发未定义函数的运行时报错。 - 递归结果合并逻辑错误:原代码遇到非FIELD节点时,将递归返回的整个数组直接推入收集列表,会形成多层嵌套的数组结构,无法得到扁平的FIELD节点集合,统计长度时会出现数值偏差。
- 变量命名存在冲突:代码用
object作为变量名,会覆盖全局的Object构造函数引用,后续如果代码中用到Object相关的静态方法,会触发意外报错。
修复后的纯过程式可运行实现
const rootObject = { o1: { type: 'CONTAINER', children: { child1: { type: 'FIELD' }, child2: { type: 'FIELD' } } }, o2: { type: 'CONTAINER', children: { child1: { type: 'FIELD' }, child2: { type: 'FIELD' } } } } const fieldList = []; // 单节点递归遍历逻辑 function traverseNode(currentNode) { // 命中FIELD类型直接收集 if (currentNode.type === 'FIELD') { fieldList.push(currentNode); return; } // 无children的节点直接终止遍历 if (!currentNode.children) return; // 取出children对象的所有子节点值转为数组遍历 const childList = Object.values(currentNode.children); for (const child of childList) { traverseNode(child); } } // 从根节点开始遍历:取出根对象的所有顶级子节点逐个处理 const topLevelNodes = Object.values(rootObject); for (const node of topLevelNodes) { traverseNode(node); } // 示例结构内共4个FIELD节点,最终会弹出4 alert(fieldList.length);
说明:该实现全程使用顺序循环、条件判断的过程式逻辑,无高阶函数、闭包封装等复杂函数式写法,可逐行打断点调试,逻辑链路清晰。
内容的提问来源于stack exchange,提问作者user310291
相关产品推荐
相关产品推荐

