如何遍历嵌套在数组对象中的嵌套数组？附许可证类型获取需求

嘿，先帮你修正下数据结构里的小语法错误——原代码里的对象格式有点问题，还有拼写小失误（shoverler应该是shoveler），修正后的正确结构应该是这样：

const licenseTypes = [
  { diggerLicense: ["Shallow Digger", "Deep Digger"] },
  { shovelerLicense: ["Poop Shoveler", "Grass Shoveler"] }
];

接下来咱们一步步实现你的需求：

1. 遍历数据，提取License类型和对应的子许可 #

因为数组里的每个元素都是单个键值对的对象，我们可以用Array.forEach遍历数组，再结合Object.entries来取出每个对象里的键（也就是License类型）和值（子许可数组）：

// 获取页面中的header元素
const header = document.querySelector('.header');

licenseTypes.forEach(licenseObj => {
  // 取出当前对象的键值对（每个对象只有一组）
  const [licenseTypeKey, subLicenses] = Object.entries(licenseObj)[0];
  
  // 把键转换成更友好的显示名称，比如diggerLicense → Digger License
  const displayLicenseType = licenseTypeKey.replace(/([A-Z])/g, ' $1').replace('License', ' License').trim();
  
  // --- 第一步：把License类型插入header ---
  const licenseTitle = document.createElement('h1');
  licenseTitle.textContent = displayLicenseType;
  header.appendChild(licenseTitle);
  
  // --- 第二步：处理对应的subLicenses，这里以子标题为例 ---
  const subLicenseContainer = document.createElement('div');
  subLicenses.forEach(subLicense => {
    const subTitle = document.createElement('h2');
    subTitle.textContent = subLicense;
    subLicenseContainer.appendChild(subTitle);
  });
  // 把子许可容器插入header（或者你需要的其他位置）
  header.appendChild(subLicenseContainer);
});

2. 代码解释 #

• Object.entries(licenseObj)[0]：因为每个数组元素是单个键值对的对象，所以取第一个元素就能拿到License类型和对应的子许可数组。
• 字符串替换部分：把驼峰命名的键转换成可读性更强的标题格式，比如diggerLicense变成Digger License。
• DOM操作部分：根据需求创建h1（主标题）和h2（子标题）元素，依次插入到header中。如果需要把subLicenses作为正文，只需要把h2换成p标签即可。

3. 更灵活的遍历方式（如果未来数据结构扩展） #

如果之后你的数组元素可能包含多个License类型，或者结构更复杂，可以调整遍历逻辑，比如嵌套两层forEach：

licenseTypes.forEach(licenseObj => {
  Object.entries(licenseObj).forEach(([licenseTypeKey, subLicenses]) => {
    // 这里的逻辑和上面一致，这样即使一个对象里有多个License类型也能处理
  });
});

这样就能完美实现你要的需求啦——把所有License类型插入header，同时处理对应的子许可用于不同的视图展示。

内容的提问来源于stack exchange，提问作者Yuki Truck Services