JavaScript如何使用forEach()遍历嵌套对象展示所有图片

首先注意：你声明的btx虽然是数组类型，但你挂载的main是字符串键属性，不属于数组的索引元素，无法直接通过数组原生的forEach遍历到，需要先取出btx.main下的所有图片配置项，再调用遍历方法即可。

核心实现代码 #

// 你原有定义的图片配置
var btx = [];
btx["main"] = {};
btx["main"]["us-001"] = {src: "https://domain.com/kus-001.jpg", width: "128" , height: "256"};
btx["main"]["us-002"] = {src: "https://domain.com/kus-002.jpg", width: "128" , height: "256"};

// 取出main分组下所有图片配置转为数组，调用forEach遍历
Object.values(btx.main).forEach(imgConfig => {
  // 动态创建img标签
  const imgEl = document.createElement('img');
  // 绑定图片地址、宽高属性
  imgEl.src = imgConfig.src;
  imgEl.width = imgConfig.width;
  imgEl.height = imgConfig.height;
  // 可按需补充alt、加载类名等自定义属性
  imgEl.alt = '展示图片';
  // 将图片插入页面，示例为插入body末尾，可替换为你指定的容器节点
  document.body.appendChild(imgEl);
})

优化建议 #

• 如果后续需要新增其他图片分组（除main外的其他分类），可以先遍历Object.values(btx)拿到全部分组，再嵌套一层遍历分组内的图片即可。
• 如果对图片渲染顺序有要求，建议直接把同分组下的图片存为数组结构，避免对象键遍历的顺序兼容问题，调整后的数据结构可以直接调用forEach，不需要额外做值转换：

// 更推荐的结构定义
const btx = {
  main: [
    {src: "https://domain.com/kus-001.jpg", width: "128" , height: "256"},
    {src: "https://domain.com/kus-002.jpg", width: "128" , height: "256"}
  ]
}
// 直接遍历即可：btx.main.forEach(/* 逻辑同上 */)

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