本文讲解如何将 javascript 中的嵌套数组（如电影数据）按索引顺序精准渲染到多个具有相同 class（如 `.fun`）的 `
` 中，并为每个元素动态设置 `data-id` 属性及插入结构化 html 内容。
在前端开发中，常需将结构化数据（如 JSON 数组）批量渲染到页面上多个语义相同但需独立标识的 DOM 节点中。一个典型误区是：试图用 forEach 嵌套遍历所有目标元素（如 document.querySelectorAll('.fun')），导致数据错位或重复覆盖——正如原问题中，内层 for 循环使每个 .fun 元素反复被赋值，最终所有 dataset.id 都变成数组最后一项的 id。
正确思路是「一一映射」而非「交叉匹配」：只要确保 data 数组长度 ≤ 目标 DOM 节点数量，即可直接通过 索引对齐（index-based mapping） 实现精准注入。这是最简洁、高效且无副作用的方式。
✅ 推荐实现（使用 for...in 或更推荐的 for...of + entries()）：
const data = [
{ id: 1, movie_name: "last holiday", date: "2023-10-29", length: ["1 hour 30"] },
{ id: 2, movie_name: "pitch perfect", date: "2023-04-24", length: ["2 hours"] }
];
const funElements = document.querySelectorAll('.fun');
// 安全遍历：仅处理 data.length 范围内的元素
for (let i = 0; i < data.length && i < funElements.length; i++) {
const item = data[i];
const el = funElements[i];
// 设置 data-id 属性
el.dataset.id = item.id;
// 插入结构化内容（注意：原需求中输出为 <h3>/<h4>，但示例代码用 <h4>/<h5>；此处按最终期望 HTML 输出调整）
el.insertAdjacentHTML('beforeend', `
<h3>${item.movie_name}</h3>
<h4>${item.date}</h4>
`);
}? 关键注意事项：
- ✅ 避免 forEach + 全量遍历 DOM：data.forEach(...) 内部再循环所有 .fun 元素会导致 O(n×m) 复杂度和逻辑混乱；
- ✅ 优先使用 for 循环或 for...of：可精确控制索引，天然支持边界检查（如 i < funElements.length），防止越界报错；
- ✅ 属性命名一致性：dataset.id 会自动转为 data-id（驼峰转短横线），无需手动写 data-id 字符串；
- ⚠️ HTML 结构兼容性：insertAdjacentHTML('beforeend') 将内容追加到元素末尾（即 </div> 之前），确保 <p>Hello</p> 始终保留在新增标题之前；
- ? 若数据多于 DOM 元素？ 可提前截断：data.slice(0, funElements.length)；若 DOM 元素更多，多余元素保持原样（安全降级）。
? 进阶建议（可选）：
如需支持动态增删或非顺序匹配（例如按 data-id="2" 精确查找并更新），应改用 Map 缓存或 Array.find() 配合 querySelector，但本场景下索引映射已是最优解。
总结：面对“同 class 多节点 + 同长度数据源”的渲染任务，放弃复杂条件匹配，拥抱索引驱动的一一绑定——它更可靠、更易读、更易维护。
