本文讲解如何正确遍历嵌套在对象中的数组，并安全提取 title 和 content 字段，生成带 .card 类的动态 html 结构，避免常见属性访问错误。

本文讲解如何正确遍历嵌套在对象中的数组，并安全提取 title 和 content 字段，生成带 .card 类的动态 html 结构，避免常见属性访问错误。

在前端开发中，常需将结构化数据（如含嵌套数组的对象）渲染为 DOM 元素。示例数据中，section1 是一个包含多个 {title, content} 对象的数组，目标是为每一项生成一个

，内部嵌套

标题与对应内容。

原代码存在关键错误：

<h1>${content.title[index]}</h1>

此处误将 content.title 当作数组访问——但 content 是传入函数的整个对象（含 section1 属性），而 title 实际位于 section1 数组的每个子对象中，因此应通过 item.title 或 content.section1[index].title 访问。

✅ 正确写法（推荐使用 item 参数，语义清晰、不易出错）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

function main(content) {
  const html = content.section1.map((item, index) => `
    <div class="card">
      <h1>${item.title}</h1>
      <p>${item.content}</p>
    </div>
  `);
  return `
    <main><section>${html.join('')}</section></main>
  `;
}

⚠️ 注意事项：

• 避免深层路径硬编码（如 content.section1[index].title），既冗余又易因数据结构变更导致报错；
• 使用 map 的 item 参数直接解构字段，提升可读性与健壮性；
• 若 section1 可能为空或未定义，建议增加防护：

  const cards = Array.isArray(content.section1) 
    ? content.section1.map(item => /* ... */)
    : [];

最终输出将生成语义清晰、符合 HTML 规范的卡片列表，便于后续样式控制与交互扩展。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！