如何基于现有扁平化对象动态生成指定结构的嵌套JS对象

实现思路 #

直接遍历原对象的所有键，把每个键对应的值包装成{debug: 原值}的结构存入新对象即可，以下是两种常用的实现方案：

方案1：使用Object.entries + reduce（推荐，写法更简洁） #

const object1 = {
    DataStore : false,
    Header: false,
    Footer : false,
    Sidebar : false,
    Main : false,
}

const registerComponentsLocal = Object.entries(object1).reduce((acc, [key, value]) => {
    acc[key] = { debug: value }
    return acc
}, {})

该方案全程无副作用，所有转换逻辑都封装在reduce方法内，键和值均动态从原对象读取，不需要手动写死任何属性名，原对象新增/删除属性时，输出结果会自动同步。

方案2：使用for...in遍历（兼容性更好，适合需要兼容低版本JS环境的场景） #

const object1 = {
    DataStore : false,
    Header: false,
    Footer : false,
    Sidebar : false,
    Main : false,
}

const registerComponentsLocal = {}
for (const key in object1) {
    // 可选：如果需要过滤原型链上的属性可以加这行判断
    if (object1.hasOwnProperty(key)) {
        registerComponentsLocal[key] = { debug: object1[key] }
    }
}

两种方案都完全满足动态生成要求，原对象的键、值修改后，最终生成的registerComponentsLocal会自动适配结构，不需要手动调整转换逻辑。

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