JS递归将配置对象转为DOM元素无法返回最终结果问题求助

问题根因 #

• 原递归函数没有返回内部创建的Promise实例，外部调用自然拿不到异步结果
• 递归处理子元素时没有等待子任务执行完成就提前resolve了父元素，存在异步时序问题
• 对对象/数组的分支处理逻辑冗余，部分变量作用域混乱可能导致DOM挂载错误

修复后的实现代码 #

function recursion(obj) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 处理单个元素对象
            if (obj.constructor === Object) {
                const elem = document.createElement(obj.name);
                // 设置元素属性
                if (obj.attr) {
                    for (const attrKey in obj.attr) {
                        elem.setAttribute(attrKey, obj.attr[attrKey]);
                    }
                }
                // 处理子元素，收集所有子元素的处理Promise
                if (obj.children && obj.children.length) {
                    const childPromises = obj.children.map(child => recursion(child));
                    Promise.all(childPromises).then(childElems => {
                        childElems.forEach(childElem => elem.appendChild(childElem));
                        resolve(elem);
                    }).catch(reject);
                } else {
                    // 无后代元素直接返回当前元素
                    resolve(elem);
                }
            } else {
                reject(new Error('输入格式错误，根节点必须为元素对象'));
            }
        }, 0);
    });
}

使用方式 #

因逻辑为异步处理，需要通过.then或者async/await获取最终DOM结果：

// 方式1：then链式调用
recursion(videoElements).then(container => {
    console.log(container); // 输出完整的目标DOM结构
    // 可直接挂载到页面
    document.body.appendChild(container);
});

// 方式2：async/await调用
async function generateVideoDom() {
    const container = await recursion(videoElements);
    console.log(container);
}
generateVideoDom();

最终生成的DOM结构与你给出的预期输出完全一致。

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