本文讲解如何正确遍历嵌套在对象中的数组，提取每个对象的 title 和 content 字段，并生成带 .card 类的动态 HTML 结构，避免常见属性访问错误。
本文讲解如何正确遍历嵌套在对象中的数组，提取每个对象的 `title` 和 `content` 字段，并生成带 `.card` 类的动态 html 结构，避免常见属性访问错误。
在前端开发中，常需将 JavaScript 数据结构（如含多个对象的数组）映射为 DOM 元素。示例数据中，section1 是一个包含两个对象的数组，每个对象具有 title 和 content 属性。目标是为每个对象生成一个 <div class="card">，内部嵌套 <h1> 标题与对应内容。
原始代码存在关键错误：在 .map() 回调中，content.title[index] 试图从顶层 content 对象直接读取 title 数组，但实际 title 并非独立数组——它属于 section1 中每个子对象的自有属性。因此应使用 item.title（更简洁安全）或 content.section1[index].title（冗余但可行）。
✅ 正确写法如下（推荐使用 item 参数）：
function main(content) {
const html = content.section1.map(item => `
<div class="card">
<h1>${item.title}</h1>
<p>${item.content}</p>
</div>
).join('');
return `
<main>
<section>${html}</section>
</main>
`;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要误写为 content.title[index] 或 content.content[index] —— 这会返回 undefined，导致渲染空标签；
- 使用模板字符串时注意缩进与换行，避免 HTML 中出现意外空白字符（生产环境建议用 trim() 或构建工具处理）；
- 若需绑定事件或后续操作，建议配合 innerHTML 插入后，用 document.querySelectorAll('.card') 获取节点，而非依赖字符串拼接逻辑；
- 对用户输入的 title / content 做 XSS 防护（如使用 textContent 替代插值，或采用 DOMPurify.sanitize() 处理）。
总结：遍历嵌套数组时，应始终基于当前迭代项（item）访问其属性，而非错误地向上回溯父对象结构。清晰的数据路径认知（content → section1 → [item] → title/content）是可靠渲染的前提。
