当前位置：首页 > news >正文

js常用的数组遍历方式

news 2025/5/10 13:38:23

以下是一个完整的示例，将包含图片、文字和数字的数组渲染到 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);
}