JavaScript遍历嵌套对象并创建下拉选择器与对象列表问题

嘿，作为JavaScript新手遇到递归遍历嵌套对象的问题太正常啦！我来一步步帮你搞定这个需求——创建下拉选择器切换展示两个对象里的所有属性值，还会把它们分组对应到各自的对象下。

第一步：先明确数据结构（模拟你的嵌套对象） #

我先假设一个符合你描述的嵌套数据结构，你可以直接替换成自己的真实数据：

// 模拟你的嵌套对象数据
const data = {
  "Object One": {
    make: "VW",
    model: {
      name: "GTI",
      year: 2018
    },
    color: "Red"
  },
  "Object Two": {
    make: "Ford",
    model: {
      name: "Mustang",
      trim: "GT"
    },
    color: "Blue",
    year: 2020
  }
};

第二步：写递归函数遍历嵌套对象 #

递归的核心就是“自己调用自己”，这里我们写一个函数，专门收集嵌套对象里所有的叶子值（就是像VW、Red这种不是对象的最终值）：

// 递归函数：遍历嵌套对象，收集所有叶子节点的值
function getNestedValues(obj) {
  const values = [];
  // 遍历对象的每个键值对
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      // 如果当前值是对象，就递归调用自己，把结果合并进来
      if (typeof value === 'object' && value !== null) {
        values.push(...getNestedValues(value));
      } else {
        // 如果不是对象，就把值加入数组
        values.push(value);
      }
    }
  }
  return values;
}

第三步：创建HTML结构+绑定切换逻辑 #

先在页面里加好下拉选择器和内容展示容器：

<!-- 下拉选择器 -->
<select id="objectSelector">
  <option value="Object One">Object One</option>
  <option value="Object Two">Object Two</option>
</select>

<!-- 用来展示分组内容的容器 -->
<div id="contentContainer"></div>

然后写JS逻辑，实现初始化展示和下拉切换功能：

// 获取DOM元素
const selector = document.getElementById('objectSelector');
const container = document.getElementById('contentContainer');

// 渲染选中对象的内容
function renderContent(selectedKey) {
  // 先清空容器，避免内容叠加
  container.innerHTML = '';
  // 创建分组标题
  const heading = document.createElement('h3');
  heading.textContent = selectedKey;
  container.appendChild(heading);
  // 获取当前对象的所有叶子值
  const values = getNestedValues(data[selectedKey]);
  // 创建列表展示值
  const list = document.createElement('ul');
  values.forEach(value => {
    const listItem = document.createElement('li');
    listItem.textContent = value;
    list.appendChild(listItem);
  });
  container.appendChild(list);
}

// 页面加载时默认展示第一个选项的内容
renderContent(selector.value);

// 绑定下拉选择器的切换事件
selector.addEventListener('change', (e) => {
  renderContent(e.target.value);
});

关键逻辑说明 #

• 递归函数getNestedValues：不管你的对象嵌套多少层，它都会一层层钻进去，把所有最终的非对象值收集起来，完美解决你说的递归遍历问题。
• renderContent函数：负责根据选中的对象，动态生成标题和列表，每次切换都会清空容器重新渲染，避免内容混乱。
• 事件监听：下拉选项改变时，自动触发重新渲染，实现无缝切换。

如果你的数据里包含数组，只需要给递归函数加个数组判断就行，比如：

// 补充数组判断的递归函数版本
function getNestedValues(obj) {
  const values = [];
  if (Array.isArray(obj)) {
    obj.forEach(item => values.push(...getNestedValues(item)));
    return values;
  }
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      if (typeof value === 'object' && value !== null) {
        values.push(...getNestedValues(value));
      } else {
        values.push(value);
      }
    }
  }
  return values;
}

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