码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-循环

2025年05月25日 更新

前端基础JavaScript基础循环课程前言Course Introduction同学们好，在 JavaScript 编程中，循环是实现代码高效复用的关键。本课程将带你系统学习 for、while、do - while 等多种循环语句，以及循环中的跳转语句。通过丰富案例，助你快速掌握循环知识，提升编...

前端基础JavaScript基础循环

课程前言Course Introduction同学们好，在 JavaScript 编程中，循环是实现代码高效复用的关键。本课程将带你系统学习 for、while、do - while 等多种循环语句，以及循环中的跳转语句。通过丰富案例，助你快速掌握循环知识，提升编程能力。现在，让我们开始今天的课程吧。一for循环

CodingFuture

1.1语法结构

for(初始化变量; 条件表达式; 操作表达式){//循环体}名称作用初始化变量通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。操作表达式用于每次代码执行完毕之后进行，初始化变量的累加。1.2执行过程

初始化变量，初始化操作在整个 for 循环只会执行一次。执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。1.3for 循环重复相同的代码

比如输出10句“我学会了”// 基本写法for(var i = 1; i <= 10; i++){alert("我学会了");}1.4案例

求1-100之间的整数累加和var sum=0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum)//5050求1-100之间所有数的平均值var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum/100)//50.5求1-100之间所有偶数和奇数的和var sum1 = 0;var sum2 = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {sum1 += i;} else {sum2 += i;}}console.log(sum1)//2550console.log(sum2)//2500二双重for循环

CodingFuture

2.1概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。2.2语法结构

内层循环可以看做外层循环的循环体语句内层循环执行的顺序也要遵循 for 循环的执行顺序外层循环执行一次，内层循环要执行全部次数for (外循环的初始; 外循环的条件; 外循环的操作表达式) {    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {         需执行的代码;   }}2.3案例

打印五行五列星星var star = "";for (var j = 1; j <= 5; j++) { for (var i = 1; i <= 5; i++) { star += "☆" } // 每次满 5个星星 就 加一次换行 star += "\n"}console.log(star);三while循环

CodingFuture

3.1语法结构

while (条件表达式) {    // 循环体代码}3.2执行过程

先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码执行循环体代码循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束。var total=1;while(total<521){    console.log("老鼠爱大米");    total++;}console.log("共计执行了"+total+"次")注意：使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环四do-while循环

CodingFuture

4.1语法结构

do {    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码} while(条件表达式);4.2执行过程

先执行一次循环体代码。再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码。do…while循环语句至少会执行一次循环体代码。五跳转语句

CodingFuture

5.1概述

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少 执行一次）。break 关键字用于立即跳出整个循环（循环结束）。5.2案例

continue：吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：for (var i = 1; i <= 5; i++) {    if (i == 3) {        console.log("这个包子有虫子，扔掉");        continue; // 跳出本次循环，跳出的是第3次循环    }    console.log("我正在吃第" + i + "个包子呢");}运行结果：

break：吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：for (var i = 1; i <= 5; i++) {   if (i == 3) {       break; // 直接退出整个for 循环，跳到整个for下面的语句   }   console.log("我正在吃第" + i + "个包子呢");}运行结果：

六while、do-while、for的区别

CodingFuture

while 和 do-while 一般用于循环次数不确定的业务场景；for 一般用于循环次数确定的场景。while 和 for 都是先判断循环条件，再执行循环体；do-while 先执行循环体，再判断循环条件。（注：for 循环只适用于循环次数确定的场景下(for 也可以适用于循环次数不确定的场景，只不过一般不会用这种方式进行开发)，while 和 do-while 循环次数确定或者不确定都可以使用。）

结言陈词Closing statement今天的课程就到这里了，本课程介绍了 JavaScript 中各类循环语句，包括 for、双重 for、while、do - while 循环，以及 continue 和 break 跳转语句，并对比了它们的区别。掌握这些循环知识，能更好地处理重复任务，为 JavaScript 编程打下坚实基础。下期课程预告：JavaScript基础-数组和函数码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部