如何在JavaScript对象中正确嵌套？实现四级级联下拉菜单

首先你原代码里的HTML对应结构写法错误——数组不能包含"Links": {...}这种键值对，数组是有序元素集合，只能存值，不能带键名。要实现四级嵌套，每一级需要用对象存储（键为选项名称，值是该选项的下一级菜单结构），没有子级的选项可以用空数组[]标记。

修正后的数据结构 #

var subjectObject = {
  "Front-end": {
    "HTML": {
      "Links": {
        "Test": ["test1", "test2"]
      },
      "Images": [],
      "Tables": [],
      "Lists": []
    },
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]    
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}

逻辑调整要点 #

之前三级菜单的逻辑只处理到数组，现在要支持四级，需要在生成下拉菜单的逻辑里增加类型判断：

1. 如果当前选中项对应的值是对象（非数组），说明还有下一级菜单，遍历对象的键来生成选项
2. 如果是数组，直接生成最终的选项（空数组则显示无选项）

举个核心逻辑的例子：

function fillNextSelect(currentLevelData, targetSelect) {
  // 清空目标下拉框
  targetSelect.innerHTML = '';

  if (typeof currentLevelData === 'object' && !Array.isArray(currentLevelData)) {
    // 遍历对象键，生成下一级选项
    Object.keys(currentLevelData).forEach(optionName => {
      const option = document.createElement('option');
      option.value = optionName;
      option.textContent = optionName;
      targetSelect.appendChild(option);
    });
  } else if (Array.isArray(currentLevelData)) {
    // 生成最终级选项
    currentLevelData.forEach(item => {
      const option = document.createElement('option');
      option.value = item;
      option.textContent = item;
      targetSelect.appendChild(option);
    });
  }
}

这样当用户选中Links时，程序会识别到它对应的值是包含Test的对象，自动生成第四级下拉菜单；选中Test后则会显示它对应的数组内容。

内容的提问来源于stack exchange，提问作者Programming is life