以下是一个完整的示例，将包含图片、文字和数字的数组渲染到 HTML 页面，使用 多种遍历方式 实现不同的渲染效果：
1. 准备数据（数组）
const items = [
{
id: 1,
name: "苹果",
price: 5.99,
image: "https://via.placeholder.com/100?text=Apple"
},
{
id: 2,
name: "香蕉",
price: 3.49,
image: "https://via.placeholder.com/100?text=Banana"
},
{
id: 3,
name: "橙子",
price: 4.99,
image: "https://via.placeholder.com/100?text=Orange"
}
];2. HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数组渲染示例</title>
<style>
.item {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
display: inline-block;
text-align: center;
}
.item img { width: 100px; height: 100px; }
</style>
</head>
<body>
<h2>1. forEach 渲染</h2>
<div id="forEach-container"></div>
<h2>2. map + join 渲染</h2>
<div id="map-container"></div>
<h2>3. for...of 渲染</h2>
<div id="forOf-container"></div>
<script src="script.js"></script>
</body>
</html>3. JavaScript 渲染逻辑（script.js）
// 数据
const items = [
{ id: 1, name: "苹果", price: 5.99, image: "https://via.placeholder.com/100?text=Apple" },
{ id: 2, name: "香蕉", price: 3.49, image: "https://via.placeholder.com/100?text=Banana" },
{ id: 3, name: "橙子", price: 4.99, image: "https://via.placeholder.com/100?text=Orange" }
];
// 1. forEach 方式
const forEachContainer = document.getElementById('forEach-container');
items.forEach(item => {
const div = document.createElement('div');
div.className = 'item';
div.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<h3>${item.name}</h3>
<p>价格: ¥${item.price.toFixed(2)}</p>
`;
forEachContainer.appendChild(div);
});
// 2. map + join 方式
const mapContainer = document.getElementById('map-container');
const htmlString = items.map(item => `
<div class="item">
<img src="${item.image}" alt="${item.name}">
<h3>${item.name}</h3>
<p>价格: ¥${item.price.toFixed(2)}</p>
</div>
`).join('');
mapContainer.innerHTML = htmlString;
// 3. for...of 方式
const forOfContainer = document.getElementById('forOf-container');
for (const item of items) {
const div = document.createElement('div');
div.className = 'item';
div.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<h3>${item.name}</h3>
<p>价格: ¥${item.price.toFixed(2)}</p>
`;
forOfContainer.appendChild(div);
}4. 效果说明
**
forEach**- 动态创建 DOM 元素并追加到容器中。
- 适合需要逐个处理元素的场景。
**
map+join**- 生成 HTML 字符串后一次性插入。
- 性能更好（减少 DOM 操作次数）。
**
for...of**- 语法简洁，类似
forEach，但可以配合break或continue控制流程。
- 语法简洁，类似
