在前几篇内容里，我们掌握了 JavaScript 基础语法、DOM 操作、事件监听，也完成了个人博客页面的搭建与适配。但在实际开发中，页面往往会出现大量重复数据：比如博客文章列表、标签列表、分类菜单等。

如果每一条数据都手动写 HTML 标签，不仅代码冗余，后期维护也十分麻烦。而 数组 + 循环 就是 JS 批量处理数据的核心组合。

本篇我们重点讲解数组常用操作、循环语句实战，结合博客项目完成动态列表渲染，彻底告别手写重复标签，同时梳理新手在数组和循环中高频踩坑的问题。

一、认识数组：批量存储数据的容器

数组是 JavaScript 中用来存放一组数据的集合，不管是文字、数字、对象，都可以统一放在数组中管理，也是前端开发使用频率最高的数据结构之一。

1. 数组的基础定义与取值

javascript

运行

// 1. 字面量方式创建数组（开发最常用）
let arr = ["HTML", "CSS", "JavaScript", "响应式"];

// 2. 获取数组单个元素：通过下标（索引）取值，下标从 0 开始
console.log(arr[0]); // 输出：HTML
console.log(arr[2]); // 输出：JavaScript

// 3. 获取数组长度 length
console.log(arr.length); // 输出：4

核心要点：

• 数组下标从 0 开始计数，这是新手最容易混淆的点；
• length 属性可以直接获取数组内元素总个数，搭配循环使用效率极高。

2. 数组常用增删改查方法

日常开发中，以下几个方法可以满足 90% 的数组操作需求：

javascript

运行

let list = ["前端入门", "CSS实战"];

// 末尾添加元素 push()
list.push("JS交互"); 

// 末尾删除元素 pop()
list.pop();

// 头部添加元素 unshift()
list.unshift("HTML基础");

// 头部删除元素 shift()
list.shift();

// 修改指定下标的元素
list[0] = "全新标题";

二、循环语句：批量遍历数组

想要把数组里的每一条数据渲染到页面，就需要用到循环。前面简单介绍过 for 循环，这里结合数组做深度实战，同时区分不同循环的使用场景。

1. 基础 for 循环（通用首选）

语法结构：

javascript

运行

for(初始化变量; 循环条件; 变量自增){
  // 循环执行的代码
}

结合数组遍历示例：

javascript

运行

// 文章标题数组
let articleTitles = [
  "HTML基础入门",
  "CSS美化与布局",
  "JavaScript交互实战",
  "响应式页面适配"
];

// 遍历数组
for(let i = 0; i < articleTitles.length; i++){
  // 依次打印每一个标题
  console.log(articleTitles[i]);
}

执行逻辑：

1. 定义变量 i 作为下标，初始值为 0；
2. 判断 i 是否小于数组长度，满足条件则执行循环体；
3. 执行完毕后 i++，下标向后移动一位，再次判断条件；
4. 条件不成立时，循环终止。

2. for...of 循环（快速取值，简化代码）

如果只需要获取数组元素，不需要操作下标，可以使用 for...of，代码更简洁：

javascript

运行

for(let item of articleTitles){
  console.log(item); // 直接取出数组中的每一项
}

三、实战演练：动态渲染博客文章列表

前面的博客页面，所有文章卡片都是手写 HTML 完成。现在我们用数组存储文章数据 + for 循环 + DOM 操作，实现动态渲染列表，数据和结构分离。

1. 改造 HTML 结构

保留容器，删除手动编写的文章卡片：

html

预览

<!-- 左侧：文章列表 -->
<section class="article-list">
  <!-- 文章由 JS 动态生成 -->
</section>

2. JS 代码实现动态渲染

我们用对象数组存储每一篇文章的完整信息（标题、时间、阅读量、摘要），再通过循环拼接 HTML 结构，最后插入到页面中。

javascript

运行

document.addEventListener("DOMContentLoaded", function() {
  // 1. 用对象数组存储所有文章数据
  let articleData = [
    {
      title: "CSS入门实战，30分钟搞定网页美化与基础布局",
      date: "2026-04-25",
      views: "201",
      excerpt: "上一篇我们学会了用HTML搭建网页的“骨架”，但只有骨架的网页难免单调……"
    },
    {
      title: "HTML基础入门——从“骨架”开始，避开新手必踩的3个坑",
      date: "2026-04-25",
      views: "34",
      excerpt: "HTML是网页的基础，就像盖房子的地基和钢筋骨架，决定了网页的结构和内容……"
    },
    {
      title: "JavaScript入门——给网页装上“灵魂”，从基础交互到DOM操作",
      date: "2026-04-26",
      views: "120",
      excerpt: "HTML和CSS让网页有了结构和样式，但此时的网页还只是一张“静态海报”……"
    }
  ];

  // 2. 获取文章列表容器
  const articleList = document.querySelector(".article-list");
  // 定义变量，拼接HTML字符串
  let htmlStr = "";

  // 3. for循环遍历数组，拼接每一篇文章的HTML结构
  for(let i = 0; i < articleData.length; i++){
    let item = articleData[i];
    htmlStr += `
      <article class="article-card">
        <div class="article-header">
          <h2 class="article-title">
            <a href="#">${item.title}</a>
          </h2>
          <div class="article-meta">
            <span class="date">${item.date}</span>
            <span class="views">阅读 ${item.views}</span>
          </div>
        </div>
        <div class="article-excerpt">
          <p>${item.excerpt}</p>
        </div>
        <a href="#" class="read-more">阅读全文 →</a>
      </article>
    `;
  }

  // 4. 将拼接好的HTML插入到页面中
  articleList.innerHTML = htmlStr;
});

3. 效果与优势说明

1. 页面效果和之前手写代码完全一致；
2. 后续新增、删除、修改文章，只需要修改数组数据，不用改动 HTML 结构，维护效率大幅提升；
3. 这也是企业级开发中列表渲染的基础思路。

四、拓展实战：动态渲染侧边栏热门文章

沿用相同逻辑，我们再实现侧边栏热门文章的动态渲染，举一反三：

HTML 修改

html

预览

<ul class="hot-articles">
  <!-- 热门文章由JS动态生成 -->
</ul>

JS 补充代码

javascript

运行

// 热门文章数据数组
let hotData = [
  "CSS入门实战，30分钟搞定网页美化与基础布局",
  "HTML基础入门——从“骨架”开始，避开新手必踩的3个坑",
  "JavaScript入门——给网页装上“灵魂”"
];

const hotList = document.querySelector(".hot-articles");
let hotHtml = "";

for(let i = 0; i < hotData.length; i++){
  hotHtml += `<li><a href="#">${hotData[i]}</a></li>`;
}
hotList.innerHTML = hotHtml;

五、新手高频坑点与解决方案

1. 下标越界报错

现象：循环取值出现 undefined 原因：循环条件写成 i <= arr.length，数组最大下标为 length - 1 解决：统一使用 i < arr.length 作为循环条件。

2. 循环外部无法获取循环内变量

原因：旧版书写习惯或变量作用域问题 解决：循环内部变量使用 let 声明，不要使用 var。

3. 拼接 HTML 出现格式混乱

原因：字符串拼接符号使用错误、引号嵌套冲突 解决：优先使用 模板字符串 （反引号），支持换行和直接嵌入变量 ${}。

4. 多次渲染导致内容重复

现象：触发事件后，列表内容不断叠加 原因：没有清空原有内容，直接拼接新 HTML 解决：拼接前清空容器，或每次重新生成完整字符串再赋值。

六、结语

数组和循环是 JavaScript 从 “简单交互” 走向 “数据驱动页面” 的关键一步。通过本篇学习，你掌握了数组的基础操作、多种循环用法，并且在原有博客项目中完成了列表动态渲染。

现在你的项目已经实现了数据与结构分离，更贴近真实开发场景。

下一篇我们将学习函数封装与代码复用，把重复的逻辑抽离成独立函数，让代码更简洁、可读性更强，进一步提升代码规范度。