如何在遍历Object.entries()时保留并展示Charlie/Derek作为li名称？

要获取Charlie和Derek这类顶层键名，你需要遍历对象的键名集合，而非直接遍历值。以下是具体实现方案：

核心思路 #

1. 用Object.keys(data)提取所有顶层键（即Charlie、Derek）
2. 遍历每个键名，同时通过键名访问对应的keys数据
3. 动态生成包含键名的<li>元素

完整代码示例 #

<!DOCTYPE html>
<html>
<body>
  <ul id="userList"></ul>

  <script>
    var data = {
      'Charlie': {
        'keys': {
          'a': '1',
          'b': ['1', '2', '3'],
          'c': '3'
        }
      },
      'Derek': {
        'keys': {
          'a': '10',
          'b': ['9', '8', '7'],
          'c': '9'
        }
      }
    };

    const userList = document.getElementById('userList');
    // 获取所有顶层键名数组
    const userNames = Object.keys(data);

    userNames.forEach(name => {
      // 创建列表项元素
      const listItem = document.createElement('li');
      // 设置列表项标题为目标键名
      listItem.innerHTML = `<strong>${name}</strong><br>`;
      
      // 遍历当前用户的keys数据，补充详情内容
      const userKeys = data[name].keys;
      for (const key in userKeys) {
        let value = userKeys[key];
        // 数组类型转成逗号分隔字符串展示
        if (Array.isArray(value)) {
          value = value.join(', ');
        }
        listItem.innerHTML += `${key}: ${value}<br>`;
      }

      userList.appendChild(listItem);
    });
  </script>
</body>
</html>

关键说明 #

• Object.keys(data)会返回包含所有顶层键的数组：['Charlie', 'Derek']，这正是你需要的
• 名称
• 若之前直接用Object.values(data)遍历，会只获取到keys对应的内容，丢失顶层键名，这就是你看不到Charlie/Derek的原因
• 通过data[name]可以精准访问到对应用户的所有数据，包括嵌套的keys子对象

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