如何在JavaScript/JQuery中动态创建多维对象

原始数据 #

我们有一个扁平结构的对象，Key用点.分隔表示层级关系：

var Data = {
    "1": "Hi 1",
    "1.1": "Hi 1.1",
    "1.1.1": "Hi 1.1.1",
    "2": "Hi 2",
    "2.1": "Hi 2.1",
    "2.2": "Hi 2.2",
    "3": "Hi 3",
}

期望转换结果 #

需要将其转换为嵌套的多维对象，层级对应Key的点分隔关系：

NewData = {
    "1": {
        "Text": "Hi 1",
        "1": {
            "Text": "Hi 1.1",
            "1": {
                "Text": "Hi 1.1.1",
            },
        }, 
    },
    "2": {
        "Text": "Hi 2",
        "1": {
            "Text": "Hi 2.1",
        },
        "2": {
            "Text": "Hi 2.2",
        },
    },
    "3": {
        "Text": "Hi 3",
    },
}

当前尝试的代码（遇到动态创建多维对象的瓶颈） #

var NewData = {};
$.each(Data, function(key, value) {
    var splitted = key.split(".");

    $.each(splitted , function(key2, value2) {

        // Stuck here
        // How to make multidimensional object in Javascript dynamically.

    });
});

解决方案 #

核心思路是用一个指针变量跟踪当前所处的嵌套层级对象，逐步遍历Key片段并构建结构：

var NewData = {};
$.each(Data, function(key, value) {
    var splitted = key.split(".");
    // current作为当前层级的对象指针，初始指向根对象
    var current = NewData;
    
    $.each(splitted, function(index, part) {
        // 如果当前层级没有该节点，创建空对象
        if (!current[part]) {
            current[part] = {};
        }
        // 最后一个Key片段，设置对应的Text属性
        if (index === splitted.length - 1) {
            current[part].Text = value;
        }
        // 移动指针到下一层级对象
        current = current[part];
    });
});

代码说明 #

1. 遍历原始对象的每个Key-Value对，将Key按.分割成层级数组
2. 用current变量跟踪当前操作的对象层级，从根对象NewData开始
3. 逐个处理层级数组中的每个片段：
   • 检查当前层级是否存在该片段对应的对象，不存在则创建
   • 如果是最后一个片段，给该对象添加Text属性并赋值
   • 将current切换到下一层级的对象，继续处理后续片段

这样就能动态构建出符合要求的嵌套多维对象。

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