JavaScript循环基础教程：for、while和do...while

2024-10-16

博客文章：JavaScript 基础知识: 循环 - For、While 和 Do-Wait

概述

JavaScript 是一种广泛应用于网页前端的编程语言，用于创建动态内容。掌握其语法、变量、函数及循环是前端开发的重要组成部分。

要学习的内容
情景：动态产品推荐

假设一个网站需要根据用户的浏览历史动态显示产品建议。考虑到资源优化，该网站仅需在每次会话开始时从数据库或API中获取产品数据，而不是每次都进行查询。

循环实例：for 循环

for 循环用于执行特定次数的操作：

// 初始化变量
const userId = "12345";
const numberOfProducts = 5;

// 使用循环变量的 for 循环示例
for (let i = 0; i < numberOfProducts; i++) {
    // 示例：从数据库或 API 中获取产品数据。
    console.log(`显示产品 ${i + 1}`);
}

循环实例：while 循环

while 循环在条件为真时一直执行：

// 初始化变量
let i = 0;
const maxProducts = 5;

// 使用循环变量的 while 循环示例，直到用户停止显示产品。
while (i < maxProducts) {
    console.log(`显示产品 ${i + 1}`);
    i++;
}

循环实例：do...while 循环

do...while 循环确保代码至少执行一次后检查条件：

// 初始化变量
let j = 0;
const maxProducts = 5;

// 使用循环变量的 do...while 循环示例，直到用户停止显示产品。
do {
    console.log(`显示产品 ${j + 1}`);
    j++;
} while (j < maxProducts);

结论

JavaScript 循环是创建动态和交互式前端应用的强大工具。for、while 和 do...while 语句允许您根据用户交互或预定义条件自动化任务，确保前端代码高效且可扩展。

练习题
  1. 在简单的网页中创建一个计数器使用 for 循环。
  2. 编写一个 JavaScript 函数，使用 while 循环显示产品推荐的次数最多是 5 次。
  3. 尝试不同的 do...while 循环变体，例如添加用户输入条件。

通过掌握这些基本循环构造，在前端开发中处理更多复杂的场景并创建吸引用户的网页体验。 | 循环类型 | 概述 | 示例 | |----------|----------------------------------------|-----------------------------------------| | for | 使用特定次数初始化循环 | let i = 0; const maxProducts = 5; while (i < maxProducts) { console.log(显示产品 ${i + 1}); i++; } | | while | 在条件为真时执行 | for (let j = 0; j < maxProducts; j++) { console.log(显示产品 ${j + 1}); } | | do...while | 确保代码至少执行一次后检查条件 | const userId = "12345"; const numberOfProducts = 5; do { console.log(显示产品 ${i + 1}); i++; } while (i < maxProducts); |

以上表格列出了三种循环类型及其示例，帮助您理解和使用这些工具。

Blog Post Image