JavaScript 算术与流程控制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/118029948

本文详细介绍了JavaScript中的算术运算符，包括浮点数精度问题、递增和递减运算符，以及比较和逻辑运算符的使用。此外，还探讨了流程控制结构，如if分支、switch语句、for和while循环，以及如何处理循环中的特殊情况。内容覆盖了从基本的算术操作到复杂的条件判断和循环控制，是理解JavaScript基础的重要参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除去的余数9 % 2 = 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			console.log(1 + 1);//2
			console.log(1 - 1);//0
			console.log(1 * 1);//1
			console.log(1 / 1);//1
			// % 取余
			console.log(4 % 2);//0
			console.log(5 % 3);//2
			console.log(3 % 5);//3
		</script>
	</head>
	<body>
	</body>
</html>

浮点数精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数

var result = 0.1 + 0.2;			//结果不是0.3，而是：0.30000000000000004
console.log(0.7 * 100);			//结果不是7，而是：7.000000000000001

所以不要直接判断两个浮点数是否相等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//浮点数 算术运算里面会有问题
			//我们不能直接拿着浮点数来进行相比较 是否相等
			var num = 0.1 + 0.2;
			console.log(num == 0.3);//false
		</script>
	</head>
	<body>
	</body>
</html>

递增和递减运算符

如需反复给数字变量添加或减去1，可以使用递增（++）和递减（–）运算符来完成

前置递增运算符

++num 前置递增，就是自加1，类似于num = num + 1，但是 ++num 写起来更简单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.想要一个变量自己加1 num = num + 1 比较麻烦
			var num = 1;
			num = num + 1;//++num
			console.log(num);//2
			//2.前置递增运算符 ++ 写在变量的前面
			var age = 10;
			++age;
			console.log(age);//11
			//3.先加1 后返回值
			var p = 10;
			console.log(++p + 10);//21
		</script>
	</head>
	<body>
	</body>
</html>

后置递增运算符

num++ 后置递增，就是自加1，类似于num = num + 1，但是 num++ 写起来更简单

使用口诀：先返回原值，后自加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 10;
			num++;// num = num + 1 ++num;
			//前置自增和2后置自增如果单独使用 效果是一样的
			var age = 10;
			console.log(age++ + 10);//20
			//这里age = 11
		</script>
	</head>
	<body>
	</body>
</html>

前置递增和后置递增小结

前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先己后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++ 或者 num–;

比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号（大于或者等于）	2 >= 2	true
<=	小于等于号（小于或者等于）	3 <= 2	false
==	判等号	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
			console.log(3 == 5)//false
			console.log('阿波' == '波波');//false
			console.log(78 == 78);//true
			console.log(78 == '78');//true
			console.log(78 != 78);//false
			//2.程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以true
			console.log(18 === 18);//true
			console.log(18 === '18');//false
		</script>
	</head>
	<body>
	</body>
</html>

小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发经常用于多个条件的判断

逻辑运算符	说明	案例
&&	“逻辑与”，简称 “与” and	true && false
\|\|	“逻辑或”，简称 “或” or	true \|\| false
!	“逻辑非”，简称 “非” not	! true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.逻辑与 && and 两侧都为true 结果才是true 只要有一侧为false 结果就为false
			console.log(3 > 5 && 3 > 2);//false
			console.log(3 < 5 && 3 > 2);//true
			//2.逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true
			console.log(3 > 5 || 3 > 2);//true
			console.log(3 > 5 || 3 < 2);//false
			//3.逻辑非 ! not
			console.log(!true);//false
		</script>
	</head>
	<body>
	</body>
</html>

小结

逻辑与&&：两边都是true才返回true，否则返回false

逻辑或||：两边都为false才返回false，否则都为true

逻辑非!：也叫取反符，用来取一个布尔值相反的值，如true的相反值是false

var isOk = !true;
console.log(isOk);//false

短路运算（逻辑中断）

当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

逻辑与

语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用我们的布尔值参与的逻辑运算 true && false == false
			//2.123 && 456是值 或者是 表达式 参与逻辑运算？
			//3.逻辑与短路运算 如果表达式1为真 则返回表达式2 如果表达式1为假的 返回表达式1
			console.log(123 && 456);//456
			console.log(0 && 456);//0
			console.log(0 && 1 + 2 && 456 * 56789);//0
			console.log('' && 1 + 2 && 456 * 56789)//''
			//如果有空的或者否定的为假 其余是真的 0、''、null、undefined、NaN
		</script>
	</head>
	<body>
	</body>
</html>

逻辑或

语法：表达式1 || 表达式2

如果表达式1为真，则返回表达式1

如果表达式1为假，则返回表达式2

console.log(123 || 456);//123
console.log(0 || 456);//456
console.log(123 || 456 || 789);//123

赋值运算符

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’
+=、-=	加、减一个数后再赋值	var age = 10;age += 5; //15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age *= 5; //10

var age = 10;
age += 5;//相当于 age = age + 5
age -= 5;//相当于 age = age - 5
age *= 10;//相当于 age = age * 10

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算术运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

流程控制

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行

分支结构

由上到下执行代码的过程中，根据不同条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS提供了两种分支结构语句：if语句和 switch语句

if分支语句

语法结构：

//条件成立执行代码，否则什么也不做
if(条件表达式) {
	执行语句
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			if(3 > 5) {
				alert('阿波');
			}
		</script>
	</head>
	<body>
	</body>
</html>

案例：进入网吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var year = prompt('请输入年龄');
			if(year >= 18) {
				alert('允许进入网吧');
			}
		</script>
	</head>
	<body>
	</body>
</html>

if else语句（双分支语句）

语法结构：

//条件成立执行if里面的代码，否则执行else里面的代码
if(条件表达式) {
    //if条件成立执行的代码
} else {
    //否则 执行的代码
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var age = prompt('请输入年龄');
			if(age >= 18) {
				alert('我带你去网吧偷键盘');
			} else {
				alert('滚！回家做作业去！');
			}
		</script>
	</head>
	<body>
	</body>
</html>

判断闰年

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var year = prompt('请输入一个年份');
			if(year % 4 == 0 & year % 100 != 0) {
				alert('闰年');
			} else {
				alert('平年');
			}
		</script>
	</head>
	<body>
	</body>
</html>

判断是否中奖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var name = prompt('请输入姓名');
			if(name === '刘德华') {
				alert('中了5块钱');
			} else {
				alert('没有中奖');
			}
		</script>
	</head>
	<body>
	</body>
</html>

if else if 语句（多分支语句）

语法结构

//适合检查多重条件
if(条件表达式1) {
    语句1;
} else if (条件表达式2) {
    语句2;
} else if (条件表达式3) {
    语句3;
    ...
} else {
    //上述条件都不成立执行此处的代码
}

判断成绩级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var grade = prompt('请输入你的分数');
			if(grade >= 90) {
				alert('成绩为A等级');
			} else if(grade >= 80 && grade < 90) {
				alert('成绩为B等级');
			} else if(grade >= 70 && grade < 80) {
				alert('成绩为C等级');
			} else if(grade >= 60 && grade < 70) {
				alert('成绩为D等级');
			} else if(grade < 60) {
				alert('成绩为E等级');
			}
		</script>
	</head>
	<body>
	</body>
</html>

三元表达式

有三元运算符组成的式子我们称为三元表达式

语法结构

条件表达式 ? 表达式1 : 表达式2
//如果条件表达式结果为真 则返回 表达式1的值
//如果条件表达式结果为假 则返回 表达式2的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 10;
			var result = num > 5 ? '是的' : '不是的';
			console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

数字补0案例

分析：

用户输入0~59之间的一个数字
如果数字小于10，则在这个数字面前补0（加0），否则不做操作
用一个变量接受这个返回值，输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var time = prompt('请输入一个0~59之间的一个数字');
			//三元表达式
			var result = time < 10 ? '0' + time : time;//把返回值赋值给一个变量
			alert(result);
		</script>
	</head>
	<body>
	</body>
</html>

switch语句

当要针对变量设置一系列的特定值的选项时，就可以使用switch

语法结构

switch(表达式) {
    case value1:
        //表达式等于 value1 时执行的代码
        break;
    case value2:
        //表达式等于 value1 时执行的代码
        break;
    default:
        //表达式不等于任何一个value时要执行的代码
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//switch注意事项
			var num = 3;
			switch (num) {
				case 1:
					console.log(1);
					break;
				case 2:
					console.log(2);
					break;
				case 3:
					console.log(3);
					break;
			}
			//1.我们开发里面 表达式经常写成变量
			//2.我们num里的值和case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
			//3.break 如果当前的case里面没有break则不会退出switch 是继续执行下一个case
		</script>
	</head>
	<body>
	</body>
</html>

查询水果案例

用户在弹出框里面输入一个水果，如果有就弹出该水果的价格，如果没有该水果就弹出“没有此水果”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var fruit = prompt('请输入您查询的水果：');
			switch (fruit) {
				case '苹果':
					alert('苹果一斤5块钱');
					break;
				case '香蕉':
					alert('香蕉一斤2块钱');
					break;
				case '西瓜':
					alert('西瓜一斤3块钱');
					break;
				case '桃子':
					alert('桃子一斤6块钱');
					break;
				default:
					alert('没有此水果');
			}
		</script>
	</head>
	<body>
	</body>
</html>

案例

判断时间阶段

用户输入12点弹出中午好，18点弹出傍晚好，23点弹出深夜好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var time = prompt('请输入时间（0~24）');
			switch (time) {
				case '12':
					alert('现在' + time + '点' + ' ' + '中午好');
					break;
				case '18':
					alert('现在' + time + '点' + ' ' + '傍晚好');
					break;
				case '23':
					alert('现在' + time + '点' + ' ' + '深夜好');
					break;
				default:
					alert('现在' + time + '点');
			}
		</script>
	</head>
	<body>
	</body>
</html>

比较最大值

用户依次输入两个值，最后弹出最大的那个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var a = prompt('请输入第一个数');
			var b = prompt('请输入第二个数');
			if (a > b) {
				alert(a);
			} else {
				alert(b);
			}
		</script>
	</head>
	<body>
	</body>
</html>

判断奇数偶数

用户输入一个数字，来判断是奇数还是偶数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = prompt('请输入一个数字');
			if (num % 2 == 0) {
				alert(num + '是偶数');
			} else {
				alert(num + '是奇数');
			}
		</script>
	</head>
	<body>
	</body>
</html>

返回星期几

根据用户输入的数字（1~7），返回星期几

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var week = prompt('请输入代表星期几的数字（1~7）');
			switch (parseInt(week)) {
				case 1:
					alert('星期一');
					break;
				case 2:
					alert('星期二');
					break;
				case 3:
					alert('星期三');
					break;
				case 4:
					alert('星期四');
					break;
				case 5:
					alert('星期五');
					break;
				case 6:
					alert('星期六');
					break;
				case 7:
					alert('星期日');
					break;
				default:
					alert('错误！请输入数字1~7');
			}
		</script>
	</head>
	<body>
	</body>
</html>

班长口袋里的钱

接收班长口袋里的钱数，若大于等于2000，请大家吃西餐，若小于等于1500，请大家吃快餐，若小于1500、大于等于1000，请大家喝饮料。若小于1000、大于等于500，请大家吃棒棒糖，否则提醒班长下次把前带够。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var money = prompt('输入班长口袋里的钱数');
			if (money >= 2000) {
				alert('班长请大家吃西餐');
			} else if (money >= 1500 && money < 2000) {
				alert('班长请大家吃快餐');
			} else if (money >= 1000 && money < 1500) {
				alert('班长请大家喝饮料');
			} else if (money >= 500 && money < 1000) {
				alert('班长请大家吃棒棒糖');
			} else {
				alert('请班长下次把钱带够');
			}
		</script>
	</head>
	<body>
	</body>
</html>

循环

在JS中，主要有三种类型的循环语句：

for循环
while循环
do…while循环

for 循环

语法结构

for (初始化变量; 条件表达式; 操作表达式) {
    //循环体
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 100; i++) {
				console.log('哈哈哈~');
			}
			/*
				初始化变量 就是用var声明一个普通变量，通常用于作为计数器使用
				条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
				操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
			*/
		</script>
	</head>
	<body>
	</body>
</html>

for循环执行过程

首先执行里面的计数器变量 var i = 1，但是这句话在for里面只执行一次
去i <= 100 来判断是否满足条件，如果满足就去执行循环体不满足就退出循环
最后去执行i++ 第一轮结束，接着去执行i <= 100 如果条件满足就去执行循环体 ……依此类推

断点调试

断点调试可以帮我们观察程序的运行过程

浏览器中按F12—>sources—>找到需要调试的文件—>在程序的某一行设置断点

Watch：监视，通过watch可以监视变量的值的变化，非常的常用
F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化

for循环重复执行相同代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//for循环可以执行相同的代码
			for (var i = 1; i <= 10; i++) {
				console.log('哈');
			}
			//我们可以让用户控制输入的次数
			var num = prompt('请输入次数');
			for (var i = 1; i <= num; i++) {
				console.log("嘿");
			}
		</script>
	</head>
	<body>
	</body>
</html>

for循环重复不相同的代码

for循环可以重复执行不同的代码，因为我们有计数器变量i的存在，i每次循环后值都会变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//想要输出1个人从1到100岁
			// for (var i = 1; i <= 100; i++) {
			// 	console.log('这个人今年' + i + '岁了');
			// }
			for (var i = 1; i <= 100; i++) {
				if (i == 1) {
					console.log('这个人今年1岁了，他出生了');
				} else if (i == 100) {
					console.log('这个人今年100岁了，他死了');
				} else {
					console.log('这个人今年' + i + '岁了');
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

案例1

求1-100之间所有整数的累加和

分析：

需要循环100次，需要一个计数器i
需要一个存储结果的变量sum，但是初始值一定是0
核心算法：1 + 2 + 3 + 4……，sum = sum + i；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//求1-100之间所有的平均数
			var sum = 0;
			for (var i = 1; i <= 100; i++) {
				sum += i;
			}
			alert(sum);//5050
		</script>
	</head>
	<body>
	</body>
</html>

案例2

用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均值

分析

弹出输入框输入总的班级人数（num）
依次输入学生的成绩（保存起来score），此时我们需要用到for循环，弹出次数跟班级总人数有关系条件表达式 i <= num
进行业务处理，计算成绩，先求总成绩（sum），之后求平均成绩（average）
弹出结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = prompt('请输入班级的总人数：');//num 总的班级人数
			var sum = 0;// 求和的变量
			var average = 0;// 求平均值的变量
			for (var i = 1; i <= num; i++) {
				var score = prompt('请输入第' + i + '个学生的成绩');
				//因为从prompt取过来的数据是字符串型的，需要转换为数字型
				sum = sum + parseFloat(score);
			}
			average = sum / num;
			alert('班级总的成绩是：' + sum);
			alert('班级平均分是：' + average);
		</script>
	</head>
	<body>
	</body>
</html>

案例3

打印五颗星星

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 一行打印五个星星
			// 1.
			// console.log('★★★★★');
			// 2.
			// var str = '';
			// for (var i = 1; i <= 5; i++) {
			// 	str = str + '★';
			// }
			// console.log(str);
			// 3.
			var num = prompt('请输入星星的个数');
			var str = '';
			for (var i = 1; i <= num; i++) {
				str = str + '★';
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

双重for循环

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形，打印一个倒三角等等，此时我们可以通过循环嵌套来实现。循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。

语法结构

双重for循环 语法结构
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        //执行语句;
    }
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.我们可以把里面的循环看作是外层循环的语句
			// 2.外层循环 循环一次，里面的循环执行全部
			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>

在这里插入图片描述

打印五行五列星星

内层循环负责一行打印5个星星
外层循环负责打印5行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 打印五行五列星星
			var str = '';
			for (var i = 1; i <= 5; i++) {
				for (var j = 1; j<= 5; j++) {
					str += '★';
				}
				//如果一行打印完5个星星，就要另起一行 加\n
				str = str + '\n';
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

打印倒三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//打印倒三角
			var str = '';
			for (var i = 1; i <= 10; i++) { //外层循环控制行数
				for (var j = i; j <= 10; j++) { // 里层循环控制打印的个数不一样 j = i
					str += '*';
				}
				str += '\n';
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

打印正三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//打印正三角
			var str = '';
			for (var i = 1; i <= 10; i++) {
				for (var j = 1; j <= i; j++) {
					str += '*';
				}
				str += '\n';
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

九九乘法表

分析：

一共有9行，但是每行的个数不一样
外层的for控制行数i，循环9次，打印9行
内层的for控制每行公式j
核心算法：每一行公式的个数正好和行数一致，j <= i;
每行打印完毕，都需要换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str = '';
			for (var i = 1; i <= 9; i++) {
				for (var j = 1; j <= i; j++) {
					// 1 x 2 = 2
					str += j + 'x' + i + '=' + i * j + '\t';
				}
				str += '\n';
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

while循环

while (条件表达式) {//while 当……的时候
    //循环体代码
}

执行思路：

先执行条件表达式，如果结果为true，则执行循环体代码，如果为false，则退出循环，执行后面的代码
执行循环体代码
循环体代码执行完毕之后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 1;
			while (num <= 10) {
				console.log('哈哈哈~');
				num++;
			}
			// 里面应该也有计数器 初始化变量
			// 里面应该也有操作表达式 完成计数器的更新 防止死循环
		</script>
	</head>
	<body>
	</body>
</html>

案例

1

打印人的一生，从1岁到100岁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var time = 0;
			while (time < 100) {
				time++
				console.log(time + '岁');
			}
		</script>
	</head>
	<body>
	</body>
</html>

2

计算1~100之间所有整数的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var sum = 0;
			var i = 0;
			while (i <= 100) {
				sum += i;
				i++;
			}
			console.log(sum);
		</script>
	</head>
	<body>
	</body>
</html>

do while循环

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

执行思路：

先执行一次循环体代码
再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码

注意：先执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 1;
			do {
				console.log('How are you?');
				i++;
			} while (i <= 100);
		</script>
	</head>
	<body>
	</body>
</html>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 1;
			do {
				console.log(i + '岁');
				i++;
			} while (i <= 100);
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var sum = 0;
			var i = 0;
			do {
				sum += i;
				i++;
			} while (i <= 100);
			console.log(sum);//5050
		</script>
	</head>
	<body>
	</body>
</html>

continue

continue关键字用于立即跳出本次循环，继续下一次循环

例如：吃5个包子，第三个包子有虫子，就扔掉第3个，继续吃第4个第5个包子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					// console.log('第' + i + '个包子有虫子，不吃，扔掉');
					continue;
				}
				console.log('正在吃第' + i + '个包子');
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

break

break关键字用于立即跳出整个循环（循环结束）

例如：吃5个包子，吃到第3个发现里面有半个虫子，没胃口，其余的不吃了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					// console.log('第' + i + '个包子有虫');
					break;
				}
				console.log('正在吃第' + i + '个包子');
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

简易ATM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var money = 100;// 原先的钱,余额
			while (a != 4) {
				var a = prompt('请输入您要的操作：' + '\n'
						+ '1.存钱' + '\n'
						+ '2.取钱' + '\n'
						+ '3.显示余额' + '\n'
						+ '4.退出');
				if (a == 1) {
					var add = prompt('请输入存储的钱数：');
					money += parseFloat(add);
					continue;
				} else if (a == 2) {
					var sub = prompt('请输入要取出的钱数：');
					money -= parseFloat(sub);
					continue;
				} else if (a == 3) {
					alert('当前余额为：' + money + '元');
					continue;
				} else if (a == 4) {
					alert('退出');
				}
				else {
					alert('错误，请输入1~4之间的数字！');
					continue;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>