前端之JS篇(四)——三种循环(forwhiledo...while)
2024-03-23 06:49:46
前言: JS的流程控制分为顺序结构，分支结构和循环结构
1.JS的循环
循环的目的:
在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。
在js中，主要有三种类型的循环语句:
for循环
while循环
do…while循环
1.1 for循环
在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
语法结构
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1.for 重复执行某些代码，通常跟计数有关系2.for 语法结构for (初始化变量;条件表达式;操作表达式) {循环体}初始化变量: 就是用var 声明的一个普通变量，通常用于作为计数器使用条件表达式: 就是用来决定每一次循环是否继续执行，就是终止的条件操作表达式：就是每次循环最后执行的代码，经常用于我们计数器变量进行更新(递增或者递减)*/// 重复打印一百句 hellofor (var i = 1;i <= 100;i++) {console.log('hello');}/* for循环执行过程:1.首先执行里面的计数器变量 var i = 1 但是这句话在for里面只执行一次，这里的字母i是index的缩写2.去 i < = 100 来判断是否满足条件，如果满足条件，就去执行循环体，不满足条件退出循环3.最后去执行i++ i++是单独写的代码 递增 第一轮结束。4.接着去执行 i <= 100, 如果满足条件 就去执行 循环体， 不满足条件退出循环 第二轮*/</script>
</head>
<body></body>
</html>
效果如下：
断点调试
1.1.1 for循环重复执行相同代码
新建.html文件，执行效果如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// for 循环可以执行相同的代码for (var i = 1; i <= 10; i++) {console.log('这是一段循环');}// 可以让用户控制输出的次数var num = prompt('请您输入次数');for (var i = 1; i <= num; i++) {console.log('hello world');}</script>
</head>
<body></body>
</html>
效果如下:
1.1.2 for 循环重复不相同的代码
新建.html文件，执行代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// for 循环可以重复执行不同的代码，因为有计数器变量 i 的存在 i每次循环值都会变化// 输入一个人的 1- 100 岁// 引引加加for (var i = 1; i <= 100; i++) {if (i == 1) {console.log('这个人今年1岁了，hello');} else if ( i == 18) {console.log('这个人今年18岁了，他成年了');} else {console.log('这个人今年' + i + '岁了');}}</script>
</head>
<body></body>
</html>
效果如下：
1.1.3 for 循环可以重复某些相同操作
for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。
1.1.3.1 案例 ：求1-10之间所有整数的累加和
分析:
新建.html文件，执行代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var sum = 0; // 求和 的变量for (var i = 1; i <= 100; i++) {sum += i// 或 sum = sum + i}console.log(sum);</script>
</head>
<body></body>
</html>
效果如下：
1.1.3.2 案例三小则
新建.html文件，执行代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1.求1-100之间所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average变量var sum = 0;var average = 0;for (var i = 1;i <= 100;i++) {sum += i}average = sum / 100;console.log(average);// 2.求1-100之间所有偶数和奇数的和 需要一个偶数的和的变量 even 还需要一个奇数和的变量 oddvar even = 0;var odd = 0;for (var i = 1; i <= 100;i++) {if (i % 2 ==0) {even += i; // even = even + i} else {odd += i; // odd = odd + i}}console.log('1-100之间所有的偶数和是' + even);console.log('1-100之间所有的奇数和是' + odd);// 3.求1-100之间所有能被3整除的数字的和 var result = 0;for (var i = 1; i <=100; i++) {if (i % 3 == 0) {result += i // result = result + i }} console.log('1~100之间能被3整除的数字的和是:' + result);</script>
</head>
<body></body>
</html>
效果如下：
1.1.3.3 案例：求学生成绩
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。
分析：
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num = prompt('请输入班级的总人数:'); // num 是总的单击人数var sum = 0; // 求和变量var average = 0; // 求平均值的变量for (var i = 1; i <= num; i++) {var score = prompt('请您输入第' + i + '个学生成绩'); // prompt取的数字是字符串，如果之间和数字加，都会变成字符串，故需要把字符串转换成数字sum += parseFloat(score);}average = sum / num;alert('班级总的成绩是:' + sum);alert('班级平均分是:' + average);</script>
</head>
<body></body>
</html>
效果如下：
1.1.3.4 案例：一行打印五个星星
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// var str = '';// for (var i = 1;i<= 5;i++) {// str += '★';// }// console.log(str);// 拓展：var num = prompt('请输入星星的个数:');var str = '';for (var i = 1; i <= num; i++) {str += '★';}alert(str);</script>
</head>
<body></body>
</html>
效果如下:
2.双重for循环
很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1. 双重for循环，语法结构for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {for (里层的初始化变量;里层的条件表达式;里层的操作表达式) {// 执行语句;}}2. 把里面的循环看作是外层循环的语句3.外层循环循环一次，里面的循环执行全部4.代码验证*/for (var i =1;i <= 3;i++) {console.log('这是外层循环第' + i + '次');for (var j =1;j <= 3;j++) {console.log('这是里层循环第'+ j + '次');}}</script>
</head>
<body></body>
</html>
效果如下：
2.1 案例：五行五列星星案例
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 打印五行五列星星var str = '';for (var i = 1;i <= 5; i++) { // 外层循环负责打印五行for (j = 1; j <= 5; j++) { // 里层循环负责一行打印五个星星str += '★'; }// 如果一行打印完毕5个星星就要另起一行 加 \nstr += '\n';}console.log(str);</script>
</head>
<body></body>
</html>
效果如下：
2.2 案例：打印n行n列的星星
要求：用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 打印n行n列的星星var rows = prompt('请您输入行数:');var cols = prompt('请您输入列数:');var str = '';for (var i =1; i<= rows;i++) {for (var j= 1; j <= cols;j++) {str += '★';}str += '\n';}console.log(str);</script>
</head>
<body></body>
</html>
效果如下:
2.3 案例: 打印倒(正)三角形
新建.html文件，执行如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 打印倒三角形案例var str = '';for (var i = 1; i <= 10; i++) { // 外层循环控制行数for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样 j =istr += '★';}str += '\n';}console.log(str);// 打印正三角形案例var num = '';for (var i = 1; i <= 10;i++) {for (var j = 1;j <= i; j++) { // j <= inum += '★';}num += '\n';}console.log(num);</script>
</head>
<body></body>
</html>
效果如下：
2.4 案例：打印九九乘法表
案例分析
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var str = '';for (var i = 1; i <= 9; i ++) { // 外层循环控制行数for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数 j <= istr += j +'×'+i +'='+i*j+'\t'; }str += '\n';}console.log(str);</script>
</head>
<body></body>
</html>
效果如下：
2.5 for 循环小结
3.while 循环
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1. while 循环语法结构 while 当...的时候while (条件表达式) {循环体;}2.执行思路，当条件表达式结果为true 则执行循环体 否则 退出循环3.代码验证var num = 1;while (num <= 1000) {console.log('你好');num++;} 4. 里面应该也有计数器 初始化变量5. 里面应该也有操作表达式 完成计数器的更新 防止死循环 */</script>
</head>
<body></body>
</html>
3.1 while案例
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// while 循环案例// 1.打印人的一生，从1岁到100岁var i = 1;while (i <= 100) {console.log('这个人今年'+i+'岁了');i++;}// 2. 计算1~100 之间的所有整数的和sum = 0;var j =1;while (j <= 100) {sum += j;j++}console.log(sum);// 3. 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。var message = prompt('你爱我吗？');while (message !== '我爱你') {message = prompt('你爱我吗？');}alert('我也爱你呀！')</script>
</head>
<body></body>
</html>
效果如下：
4. do while 循环
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1.do while 循环 语法结构/*do {// 循环体} while (条件表达式)*/// 2. 执行思路：跟while循环的不同地方在于：do while循环先执行一次循环体，在判断条件 如果条件表达式结果为真，则继续// 执行循环体，否则退出循环。// 3.代码验证 执行一百次'你好'var i = 1;do {console.log('你好');i++;} while (i <=100);// 4. do while 的循环体至少执行一次</script>
</head>
<body></body>
</html>
效果如下：
4.1 do while 案例
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// while 循环案例// 1. 打印人的一生，从1岁到100岁var i = 1;do {console.log('这个人今年' + i+'岁了');i++; // 如果没有这一行，电脑会卡死} while (i <= 100)// 2. 计算1~100 之间所有整数的和var sum = 0;var j = 1;do {sum += j;j++;} while (j <= 100)console.log(sum);// 3. 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。do {var message = prompt('你爱我吗？');} while (message !== '我爱你')alert('我也爱你呀');</script>
</head>
<body></body>
</html>
效果如下：
5.循环小结
6. continue break
6.1 continue
continue 关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// continue 关键字 退出本次(当前次的循环) 继续执行剩余次数循环// 案例：1. 吃五个包子，第三个包子没熟，放下，继续吃第四个、第五个包子for (var i = 1; i <= 5; i++) {if (i == 3) {continue;}console.log('我正在吃第'+i+'个包子');}// 案例：2.求1~100之间，除了能被7整除之外的整数和var sum = 0;for (var i= 1;i <= 100; i++) {if (i % 7 == 0) {continue;}sum += i;}console.log(sum);</script>
</head>
<body></body>
</html>
效果如下：
6.2 break
break 关键字用于立即跳出整个循环(循环结束)。
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// break// 案例：1. 吃五个包子，吃到第三个包子有虫子，其余的不吃了for (var i = 1; i <= 5; i++) {if (i == 3) {break;}console.log('我正在吃第'+i+'个包子');}</script>
</head>
<body></body>
</html>
效果如下：
7.JS命令规范以及语法格式
7.1 标识符命名规范
8. 循环案例(简易ATM)
新建.html文件，执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');money = 10;while (a > 0) {switch (a) {case '1':b = prompt('请您输入存入的钱数');money += parseFloat(b);alert('您现在的余额是'+ money);a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');break;case '2':c = prompt('请您输入取走的钱数');if (c > money) {alert('您的余额不足');} else {money -= parseFloat(c);alert('您现在的余额是' + money);}a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');break;case '3':alert('您现在的余额是：'+ money);a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');break;case '4':alert('退出成功');a = false;break; } } </script>
</head>
<body></body>
</html>
方法二：
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出');money = 10;while (money > 0) {if (cash == '1') {var dollar = prompt('存钱');dollar = parseInt(dollar);money = money + dollar;alert('余额' + money);cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')}if (cash == '2') {var dollar = prompt('存钱');dollar = parseInt(dollar);money = money - dollaralert('余额' + money)cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')}if (cash == '3') {alert('余额'+ money);cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')}if (cash == '4') {alert('退出成功');cash = false;break;}}</script>
</head>
<body></body>
</html>
效果如下
前端之JS篇(四)——三种循环(forwhiledo...while)相关推荐
- 前端复习——js（四）
前端复习--js 面向对象编程 面向对象编程介绍 面向过程POP(Process-oriented programming) 面向对象OOP(Object Oriented programming) ...
- 简单介绍Lua中三种循环语句的使用
今天小编就为大家分享一篇关于Lua中三种循环语句的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 Lua的循环和C语言的循环的语法其实差不多,所以, ...
- java循环do while_Java中for、while、do while三种循环语句的区别介绍
这篇文章主要介绍了Java中for.while.do while三种循环语句的区别介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 本文通过实例讲解给大家介绍Java中for.whil ...
- Shell脚本三种循环
Shell脚本三种循环 文章目录 Shell脚本三种循环 一.for循环 for语句结构 二.while循环 while语句结构 三.until循环 until语句结构 四.常用转义字符 一.for循 ...
- 前端实现跨域的三种方式
前端解决跨域的三种方式: 1.cors跨域(只需要后端配置) header("Access-Control-Allow-Origin:*"); // 允许任何来源 header(& ...
- 在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件 行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
- c语言循环结构常用语句,浅析C语言三种循环结构语句
摘 要: C语言是一种广泛使用的高级程序设计语言,文章对C语言中三种循环结构语句进行了分析和比较,使学生更容易理解和掌握. 关键词: C语言 for循环 while循环 do-while循环 一.引言 ...
- web设计师和前端设计师的互动—前端工程师应该具备的三种思维
如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...
- Java03-day03【switch、循环(for、while、do...while)、三种循环的区别、跳转控制语句、Random、循环经典例题】
java零基础入门到精通(2019版)[黑马程序员] 视频+资料:[链接:https://pan.baidu.com/s/1MdFNUADVSFf-lVw3SJRvtg 提取码:zjxs] &qu ...
最新文章
- Android View篇之自定义验证码输入框
- UVa10410 Tree Reconstruction(bfs+dfs确定二叉树)
- 狗窝里的小日子- 6 ...
- JAVA逆向反混淆-追查Burpsuite的破解原理
- ESX/ESXi 主机上的每个插槽中安装了多少内存
- 软件测试—软件测试基础知识—测试用例设计的方法之等价类和边界值
- java sleep 精度,java – Thread.sleep(x)是否足以在Android中用作时钟？
- python读取qq客户端消息_使用 Python 读取 QQ 消息
- MATLAB数字水印处理技术的实现
- matlab心电滤波,应用Matlab对人体的心电信号进行滤波
- 【Algorithm】一般约束优化问题——PHR算法及其Matlab实现
- 六、文件管理(1.文件和文件系统)
- Java struts mysql实现的薪资工资管理系统源码+运行教程
- John McCarthy：人工智能之父
- cnn和rnn可以结合使用吗,rnn和cnn优点缺点对比
- 非常全面的NFS文档（FOR LINUX)
- 搜狗推送软件搜狗收录详细教程
- android bitmap转图片_这是一份面向Android开发者的复习指南
- 冥想的重大功能——人类21在21世纪的伟大发现
- 磁共振t1t2信号记忆顺口溜_医学影像分割入门、MRI、t1、t2等序列概念