JavaScript如何将点分隔键的扁平对象转换为多层嵌套对象

原有代码问题点 #

• 变量名不匹配：原始数据定义的变量名是data，循环遍历的时候写的是datas，运行时会直接抛出未定义错误
• 键名使用错误：写newdata['key']时，方括号内是字符串字面量'key'，不是存储一级键名的变量key，永远只会生成固定名为key的属性，无法得到动态的一级键
• 逻辑覆盖问题：每次循环都直接给根对象赋值固定的key、value属性，没有判断当前一级键是否已经存在，会直接覆盖之前循环写入的同属一个一级键的内容
• 子属性写法错误：{subkey: xxx}的写法会生成固定名为subkey的键，不会使用拆分得到的动态子键名，还给值多套了一层不必要的对象结构，和目标结构不符

修正后代码 #

// 原始扁平结构数据
let data = {
    "data.name": "michael",
    "data.email": "michael@xsx.com",
    "person.gender": "male"
}

const newdata = {}
for (const property in data) {
    // 按点拆分键名，得到一级键和二级键
    const [topKey, subKey] = property.split(".")
    // 一级键不存在时先初始化为空对象，避免覆盖已有属性
    if (!newdata[topKey]) {
        newdata[topKey] = {}
    }
    // 给对应一级对象挂载子属性
    newdata[topKey][subKey] = data[property]
}

console.log(newdata)

运行输出结果 #

执行代码后会得到完全符合预期的嵌套结构：

{
    data: {
        name: "michael",
        email: "michael@xsx.com"
    },
    person: {
        gender: "male"
    }
}

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