js常用的数组遍历方式

news2025/5/13 11:22:42

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