表达式:
- 一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方
- 特点:表达式会先执行出一个结果,然后再参与其他程序。
语句
- 语句可以理解为一个行为,循环语句和判断语句就是典型的语句。一个程序有很多个语句 组成,一般情况下分号 ; 分割一个一个的语句。
- 语句可以认为是给计算机的一个指令,执行这段代码。
- 一般语句以分号结束,特殊的结构除外。
流程控制语句
- 流程控制语句:通过一些特殊结构可以让js代码加载时,要么可以跳过一部分不加载,或 者可以循环加载一段代码。
- 包括:条件
分支语句、循环语句。
条件分支语句
1. if语句
- if语句是最常用的条件分支语句,作用就是通过某个指定的判断条件,决定走哪个分支的代码.
- if:如果
else:否则
如果条件表达式为真true,执行结构体1,否则执行结构体2。
- if:如果
if (condition expression) {
statement1;
} else {
statement2;
}
- condition expression:
条件表达式,可以是任意的代码或者表达式,参与程序过程都会强制 得到一个布尔值执行结果。表达式,js 中遇到任何表达式都会先计算出一个结果然后才能 继续参与程序。 - statement:
结构体,js中可以用{}包括一行到多行语句,这些语句整体组成了一个结构体, 结构体中的语句要执行就都执行,要不执行就都不执行。
<head>
<script>
// 案例:让用户输入自己的考试成绩,反馈给他是否及格的结果
var s = parseFloat(prompt("请输入您的成绩","67"));
// 判断:超过60分及格
if (s >= 60) {
alert("恭喜你,你及格了");
} else {
alert("很遗憾,你没有及格");
}
</script>
</head>
注意
- if语句可以实现选择的功能,两个分支可以选择一个执行,不会都执行。
- if语句可以不写else分支,表示条件成立就执行后面的结构体,如果条件不成立,直接跳
出 if 语句不执行。
// 注意:可以没有 else 的分支
if (s >= 60) {
alert("恭喜你,你及格了");
}
- if语句后面的机构体如果是单行语句组成,可以省略{}不写。不建议省略大括号,容易出
现程序错误。
// 注意2:如果结构体是`单行`的语句,可以省略 {} 不写,只有在if只有一个条件的情况下,且没有else
//如果有if有2个alert就会报错,或者代码上传压缩挤在一起,没有括号分隔还是会错误
if (s >= 60)
alert("恭喜你,你及格了");
else
alert("很遗憾,你没有及格");
- if语句能够控制自己内部的流程,但是不论走哪个分支,结束后都要继续执行if语句后面的其他语句,叫做殊途 同归现象。
if (s >= 60) {
alert("恭喜你,你及格了");
} else {
alert("很遗憾,你没有及格");
}
// 殊途同归
alert("继续加油");
var a;
if (s >= 60) {
a = s;
} else {
a = 60;
}
console.log(a);
2. 多分支 if 语句
| 利用多分支if语句 | 细分班级成绩区间。 |
|---|---|
| 优秀: | 85-100 |
| 良好: | 75-84 |
| 及格: | 60-74 |
| 不及格: | 60以下 |
// 用户输入
var s = parseFloat(prompt("请输入您的成绩","67"));
// 利用多分支 if 语句进行判断
if (s >= 85) {
alert("优秀");
} else if (s < 85 && s >= 75) {
alert("良好");
} else if (s < 75 && s >= 60) {
alert("及格");
} else {
alert("不及格");
}
// 简化
if (s >= 85) {
alert("优秀");
} else if (s >= 75) { //如果程序能够判断到这里,说明 s 肯定是小于 85 的
alert("良好");
} else if (s >= 60) { //如果程序能够判断到这里,说明 s 肯定是小于 75 的
alert("及格");
} else {
alert("不及格");
}
3. if 语句嵌套
- 1多分支 if 语句中可以有多个 else if 的分支,但是 else 分支只能有一个,必须出现在最后, 作为备用的选项,而且 else 也可以省略不写,表示前面条件如果都不满足,直接跳出不走任何分支。
- 2多分支 if 语句有跳楼现象:条件从上往下依次验证,如果满足了某个条件,会立即执行后 面的结构体,执行完之后,不会再往后验证其他的条件了,而是从这一层直接跳楼跳出if语句, 这就是
跳楼现象。
// 用户输入
var sex = prompt("请输入您的性别","男");
var age = parseInt(prompt("请输入您的年龄","45"));
// 根据输入的数据,判断是否退休
if (sex === "男" && age >= 60) {
alert("恭喜你,可以享受人生了");
} else if (sex === "男" && age < 60) {
alert("忍忍吧,还要坚持坚持");
} else if (sex === "女" && age >= 55) {
alert("恭喜你,幸福人生开始了");
} else {
alert("太难了,还得继续坚持");
}
// 替换方法:if 语句的嵌套
// 外层的 if 语句只判断性别
// 内层的 if 语句只判断年龄
if (sex === "男") {
// 男性,年龄需要大于60岁
if (age >= 60) {
alert("恭喜你,可以享受人生了");
} else {
alert("忍忍吧,还要坚持坚持");
}
} else {
// 女性,年龄需要大于55岁
if (age >= 55) {
alert("恭喜你,幸福人生开始了");
} else {
alert("太难了,还得继续坚持");
}
}
4. 三元表达式
- 又叫三元运算符,必须有三个操作数参与的运算。
- 操作符号:
? : - 表达式:在参与js程序时,都必须先计算出表达式结果,才能参与后续程序。
- 由于三元表达式具备了一些选择的效果,所以也是一种条件分支语句。
console.log(true ? 1 : 0); 1
console.log(false ? 1 : 0); 0
//用if语句代替三元表达式
var a = true;
if (a) {
console.log(1);
} else {
console.log(0);
}
- 三元表达式语法
- boolean_expression ? true_value : false_value;
- boolean_expression:布尔表达式,表达式在参与三元运算中必须求得一个布尔类型的值,要么是 true, 要么是 false,结果作为判断依据,
判断到底去:前面的值还是后面的值。 - true_value:布尔表达式的值为真时,三元表达式的结果。
- false_value:布尔表达式的值为假时,三元表达式的结果。
- 作用:根据布尔表达式的结果,如果为真,三元表达式结果就是真值,如果为假,三元表达式结果就是假值。
- 三元表达式优点
- 虽然if语句可以模拟三元表达式,但是三元表达式有自己的优点:
二选一的情况下,三元表达式结构更加简单。- 三元表达式作为一个表达式参与程序时必须运算出结果才能参与,可以利用这个特点,将二选一结果赋值给一 个变量。
遇到给一个变量根据条件二选一赋值的情况,可以使用三元表达式。
var a = 5;
//再定义一个变量b
var b;
if (a >= 5) {
b = 1;
} else {
b = 0;
}
// 给变量赋值,根据条件二选一时,使用三元表达式更简单
var a = 4;
var b = a >= 5 ? 1 : 0;
console.log(b);
5、switch 语句
- 开关语句允许一个程序求一个表达式的值,并且尝试去匹配表达式的值到一个case标签。 如果匹配成功,这个程序执行相关的语句。
switch (表达式) {
case 值1:
结构体1;
break;
case 值2:
结构体2;
break;
default:
结构体n;
break;
switch 语句结构解析
-
表达式:
- 会求出一个具体的值,将这个值去与{}内部的case后面的值进行对比、匹配,
- 如果值相等表示匹配成功。匹配相等时,方式是进行全等于匹配,不止值要相等,数据类型也要相等。
-
case:
- 示例的意思,作为关键字后面必须跟一个空格,书写匹配的值。
-
case后面的结构体:
- 每个case匹配成功之后要执行的语句。
-
break:
- 用于打断结构体,直接跳出程序,模拟跳楼现象。
-
default:
- 相当于if语句中的else,否则的情况,如果前面的case都不匹配,执行default后面的语句。
// 用户输入
var xingzuo = prompt("请输入您的星座","白羊座");
// 进行匹配
switch (xingzuo) {
case "白羊座":
alert("运势持续在线,将会是忙而充实的一天。");
break;
case "金牛座":
alert("你或许需要付出更多的努力,才能实现自己的大志。");
break;
case "双子座":
alert("你的脾气比较大,容易把负面情绪波及到最亲近的人。");
break;
case "巨蟹座":
alert("人际关系会给你带来一些便利,善加把握会得到很多。");
break;
default:
alert("对不起,数据库不全,不能找到您的星座");
break;
}
// 用 if 语句书写
if (xingzuo === "白羊座") {
alert("运势持续在线,将会是忙而充实的一天。");
} else if (xingzuo === "金牛座") {
alert("你或许需要付出更多的努力,才能实现自己的大志。");
} else if (xingzuo === "双子座") {
alert("你的脾气比较大,容易把负面情绪波及到最亲近的人。");
} else if (xingzuo === "巨蟹座") {
alert("人际关系会给你带来一些便利,善加把握会得到很多。");
} else {
alert("对不起,数据库不全,不能找到您的星座");
}
注意事项
- default可以不写,相当于if语句没有else。
- break关键字:根据结构需要有时必须在每个case后面都要写,为了模拟跳楼现象,如果不写 break,对应的 case 后面的语句执行之后,不会跳出结构体,会继续想下执行其他case 的后面 的语句,直到遇到一个 break。
- 可以利用 break 不写的情况制作一些特殊的案例
// 案例2: 输出对应月份的天数
var month = parseInt(prompt("请输入一个月份的数字","1"));
// 输出对应的天数
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("这个月有31天");
break;
case 2:
alert("这个月有28天或29天");
break;
default:
alert("这个月有30天");
}
条件分支语句总结:
if语句:最常用的语句,所有的判断情况都能够书写。三元表达式:多用于给变量赋值根据条件二选一的情况。switch语句:多用于给一个表达式去匹配多种固定值可能性的情况。
循环语句
1、for 循环
- for循环是一种前测试循环语句,在反复执行一段代码之前,都要先测试入口条件,如果条 件为真,可以继续循环,如果条件为假,必须跳出循环不再执行。
- 是一种反复执行一段代码直到测试条件为假时停止。
// 32. 请用循环计算出 1+2+3+4+5+...+100 的值
var a = parseInt(prompt('请输入一个数字n'));
var sum = 0;
// 循环变量初始化语句:var i = 1; (表达式1)
// 循环条件:i <= 100; (表达式2)
// 改变循环变量值的语句:i++ (表达式3)
for (var i = 1; i <= 100; i++) {
sum += n; // 循环体
}
console.log(sum);
//语法
for (;;) {
}
//呆板的语法:
for(定义循环变量;变量的最大值或最小值;步长){
循环体;
}
//这种解释只能涵盖 for 循环的一部分特殊结构,不能表示所有的 for 循环实现的情况。
- for循环执行过程
应该掌握 for 循环运行的一个轨迹、路径,自己去推导 for 循环运行的过程。
for 循环执行过程:遇到 for 循环,立即执行 1 位置的语句,执行完毕后立即执行 2 位置的语句,2 位置会强制得到一个 true 或 false的结果,
如果为 true 表示入口条件为真,下一步执行 3 位置的语句,
如果为 false 表示入口条件为假,不再往下执行,直接跳出循环执行后面的 5 位置的语句。
如果能够执行到 3 位置,3 是一个结构体必须执行完毕,
再执行 4 位置的语句,执行完毕后再执行 2 位置的语句,回到了判断真假,
如果为 true,继续执行 3,再执行 4......直到 2 位置得到一个 false 的结果,循环结束跳出执行 5。
注意事项
- 小括号内部必须有两个分号。
- for 循环 {} 后面不需要加分号。
// for 循环呆板语法
for (var i = 1; i <= 100; i++) {
console.log("小明今年" + i + "岁了");
}
console.log("小明百岁了");
console.log(i);
- 如果2位置语句不写,相当于没有设置入口条件,或者条件永远为真,没法限制什么时候停止循环 了,出现死循环。
// 注意:②位置如果为空,或者,②条件设置的不合理,也会出现死循环
for (var i = 1;;i++) {
console.log(i);
}
for (var i = 1;i>0;i++) {
console.log(i);
}
- 3 位置是循环的结构体,每次进入循环都要执行完后,才能执行语句 4,3 位置的语句是可以人 为自定义的,甚至可以书写 if 语句。
// ①②③④位置的条件可以随意设置
for (var i = 1; i < 10; i++) {
console.log(i);
}
所以输出结果为1 2 3 4 5 6 7 8 9
//①位置拿出来
var i = 1;
for (console.log("haha");i < 10;i++) {
console.log(i);
}
所以输出结果为 haha 1 2 3 4 5 6 7 8 9
//④位置拿出来
var i = 1;
for (console.log("haha");i < 10;) {
console.log(i);
i++
}
所以输出结果为 haha 1 2 3 4 5 6 7 8 9
//浏览器从上至下解析
var i = 1;
for (console.log("haha");i < 10;) {
console.log(i);
i++;
}
所以输出结果为 haha 1 2 3 4 5 6 7 8 9
//浏览器从上至下解析
var i = 1;
for (console.log("haha");i < 10;console.log("heihei")) {
console.log(i);
i++;
}
所以输出结果为 haha
07_for 循环.html:29 1
07_for 循环.html:28 heihei
07_for 循环.html:29 2
07_for 循环.html:28 heihei
07_for 循环.html:29 3
07_for 循环.html:28 heihei
07_for 循环.html:29 4
07_for 循环.html:28 heihei
07_for 循环.html:29 5
07_for 循环.html:28 heihei
07_for 循环.html:29 6
07_for 循环.html:28 heihei
07_for 循环.html:29 7
07_for 循环.html:28 heihei
07_for 循环.html:29 8
07_for 循环.html:28 heihei
07_for 循环.html:29 9
07_for 循环.html:28 heihei
- for 循环嵌套 if 语句:表示既要能够执行循环,还要满足 if 语句的条件。
// for 内部可以嵌套 if 语句
for (var i = 1; i <= 30; i+=4) {
if (i % 3 == 0) {
console.log(i);
}
}
所以输出结果为 9 21
- for 循环嵌套 for 循环:外层循环执行一次,内层循环作为外层 3 位置的结构体,必须执行完所有的内层循环,才能进入外层循环下一次的 4。
// for 循环内部嵌套 for 循环
for (var i = 1; i <= 4 ; i++) {
for (var j = 5; j <= 8 ; j++) {
console.log(i,j);
}
}
所以输出结果:1 5
07_for 循环.html:43 1 6
07_for 循环.html:43 1 7
07_for 循环.html:43 1 8
07_for 循环.html:43 2 5
07_for 循环.html:43 2 6
07_for 循环.html:43 2 7
07_for 循环.html:43 2 8
07_for 循环.html:43 3 5
07_for 循环.html:43 3 6
07_for 循环.html:43 3 7
07_for 循环.html:43 3 8
07_for 循环.html:43 4 5
07_for 循环.html:43 4 6
07_for 循环.html:43 4 7
07_for 循环.html:43 4 8
- 循环内的变量是全局变量,必须避免循环嵌套时起相同的变量名,内层和外层变量名必须不同,常用的变量名 i,j,k。
2、do while 循环
- dowhile循环是一种后测试循环语句,会先执行一次结构体,执行完后才会去判断入口条件, 如果条件为真能够继续下一次循环,如果条件为假跳出循环。
do{
结构体;
}while(条件表达式);
do: 做什么。后面是每次循环的循环体。
while:当......时候。
先执行一次循环体,然后当条件表达式为真时可以继续循环。
注意事项
- 如果循环中需要循环变量参与,循环变量必须定义在循环外面,否则会被重置。
- 循环变量自加的过程需要写在{}循环体内部。
- 如果将循环变量写在结构体内,i的初始值每次都会被重置,容易出现死循环。
// 输出1到10之间的数字
var i = 1;
do {
i++;
console.log(i);
} while (i <= 10);
- 变量自加过程写在输出语句前面和后面,结果是不同的。
- dowhile循环即便条件第一次测试就为假,也会执行一次结构体。
- 至少会执行一次循环体。
// 判断条件第一次就为假时,结构也会执行一次结构体
do {
i++;
console.log(i);
} while (i <= 0);
3、while 循环
- while循环是一种前测试循环语句,在执行循环体之前都要测试入口条件,条件为真继续执 行,条件为假直接跳出循环。
- 当条件表达式为真时,执行循环体,如果为假,跳出循环。
while(条件表达式){
循环体;
}
// 输出1到10之间的数字
var i = 1;
while (i <= 10) {
i++;
console.log(i);
}
注意
- 如果需要循环变量参与,必须定义在循环外部,避免被重置。
4、break语句
- 我已经找到我要的答案了,我不需要进行更多的循环了!
- break语句的作用可以立即停止当前的for、dowhile、while循环。
- 根据一些条件设置break位置,直到循环能够执行到break语句立即停止执行,跳出循环。
案例:找1-30之间,判断有没有能够被5整除的数
// 找一下 1- 50之间有没有能够被 5 整除的数字
// 找到一个这样的数字,就说明存在,所以不需要往后面继续验证了
for (var i = 1; i <= 50 ;i++) {
if (i % 5 == 0) {
console.log(i);
break;
}
}
// break 只能打断本层的循环
for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
console.log(i,j);
// // 补充打断条件
if (j >= 2) {
break;
}
}
}
// 如果想终止外层循环,需要给外层循环添加一个名字
waiceng : for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
console.log(i,j);
// 补充打断条件
if (j >= 2) {
break waiceng;
}
}
}
- break如果没有特殊指示,只能停止自己所在的那一层循环,并不能终止外部循环。`
- 如果想停止外层循环,可以给外层循环添加一个标签名label,在内层循环的break关键字后面空格加一个 label 名。`
// break 只能打断本层的循环
for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
console.log(i,j);
// // 补充打断条件
if (j >= 2) {
break;
}
}
}
// 如果想终止外层循环,需要给外层循环添加一个名字
waiceng : for (var i = 1 ; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
console.log(i,j);
// 补充打断条件
if (j >= 2) {
break waiceng;
}
}
}
5、continue语句
- 这个答案不是我想要的,赶紧试试下一个吧!
- 遇到continue表示当前的一次循环数据不是我们想要的,会立即停止当前次的循环,立即
进入下一次循环。
案例:找 1-30 之间,输出不是 5 的倍数的数字
// 找到 1-30 之间不是 5 的倍数的数字进行输出
for (var i = 1; i <= 30 ; i++) {
// 排除 5 的倍数
if (i % 5 == 0) {
// 说明是 5 的倍数,不要往下进行输出
continue;
}
// 能够执行到这里,说明不是 5 的倍数
console.log(i);
}
// continue 只能进入自己的循环的下一次
for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
// // 补充打断这一次条件
if (j % 2 == 0) {
continue;
}
console.log(i,j);
}
}
/ continue 要控制外层循环,需要给外层循环添加标签名
waiceng : for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
// 补充打断这一次条件
if (j % 2 == 0) {
continue waiceng;
}
console.log(i,j);
}
}
注意事项
- 要根据特殊条件设置continue的位置。
- continue如果没有特殊指示只能进入自己的下一次循环,不能立即停止外层循环的这一次进入下一次。
- 控制外层循环的方式与break一样,都是添加外层的标签名。
// continue 只能进入自己的循环的下一次
for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
// // 补充打断这一次条件
if (j % 2 == 0) {
continue;
}
console.log(i,j);
}
}
/ continue 要控制外层循环,需要给外层循环添加标签名
waiceng : for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 4; j++) {
// 补充打断这一次条件
if (j % 2 == 0) {
continue waiceng;
}
console.log(i,j);
}
}
总结
break 和 continue 这两个语句的出现可以帮助我们大量的优化代码,减少了计算机的计算次数。
穷举思想
- 实际案例中,可能需要找到一些有规律的数据,但是计算机没办法自动智能筛选所要的数 据,只能程序员自己书写一段代码,让计算机根据代码去进行筛选。
- 穷举思想:是一种解决问题的方法,将所有的需要数据所在的范围内所有的数据都一一列 举出来,再根据规律的条件对所有这些数据进行筛选,这种方式就是穷举法。
- 穷:穷尽,举:列举
穷举思想制作方法
- for循环: 外层使用for循环进行一一列举。
- if语句:内层用if语句进行判断,筛选需要的数据,如果满足条件就操作数据,如果不满足条件跳过看下一次循环的数据。
案例
请在控制台输出 6 的所有约数。
- a%b=0,a叫做b的倍数,b叫做a的约数。
- 约数也叫作因数。
- 从可能性中一一列举,筛选。
- 一个数的约数只能是小于等于自己的数。
案例思路
6 的约数可能性有1-6 之间。
看 1,是 6 的约数,输出
看 2,是 6 的约数,输出
看 3,是 6 的约数,输出
看 4,不是 6 的约数,跳过
看 5,不是 6 的约数,跳过
看 6,是 6 的约数,输出
// 输出 6 的所有约数
// 外层需要列举 1-6 之间的数字
for (var i = 1; i <= 6; i++) {
// 内层判断是否是 6 的约数
if (6 % i == 0) {
console.log(i + "是 6 的一个约数");
}
}
// 进阶:让用户随意输入一个正数,给用户输出这个数字所有的约数
var n = parseInt(prompt("请输入一个正整数"));
// 穷举思想,外层一一列举可能性,内层判断
for (var i = 1; i <= n; i++) {
// 内层判断 i 是否是 n 的约数
if (n % i == 0) {
console.log(i + "是" + n + "的一个约数");
}
}
累加器
- 有时候需要的不是每个数据是什么,需要得到所有数据的加和,必须想办法将所有的数据 的和存起来,就用到了 累加器。
- 累加器本质就是变量。
- 实现累加的效果,就是利用循环,每次循环就将新的数据加到原始的变量中去,赋值过程是一个加等于赋值。
案例:求 1-10 之间所有数字的和。
// 累加器,本质就是变量
var sum = 0;
// 循环累加所有的数字
for (var i = 1; i <= 10; i++) {
// 将每一次的数据 i 要累加到 n 中去
sum += i; //sum = sum + i
}
// 循环结束后就可以使用最终的累加结果
console.log(sum);
注意事项
- 累加器必须定义在循环外面的前面,如果定义在循环内部,每次循环都会将累加器重置, 不能实现累加功能。
- 累加器的初始值必须设置,而且必须设置为0,不会影响累加结果。
- 使用最终累加结果时,必须在for循环结束后的外面,如果写在循环内部,循环没结束,并不是最终需要的值。
累乘器
- 累积一些数据的乘积。与累加器非常类似。
案例:求 1 到 10 的累乘的乘积,也叫作 10!,阶乘。
10! = 10 * 9 * 8 * 7 * 6 *5 * 4 * 3 * 2 *1
// 求 10 的阶乘
// 累乘器,初始值必须是 1
var mul = 1;
for (var i = 10 ; i >= 1 ; i--) {
//将每次进来的i累乘到mul变量中
mul *= i;
}
// 循环结束后使用累乘结果
console.log(mul);
注意事项
- 累乘器必须定义在循环外部前面。
- 累乘器的初始值必须是1,1乘以任何数都等于本身。
- 累乘器最终结果必须在for循环结束后使用。
水仙花案例
水仙花数是一种特殊的三位数,它的特点就是,每个数位的三次方和,等于它本身。 请编程找出来。
// 穷举思想,列举所有的三位数
for (var i = 100 ; i <= 999 ; i++) {
// i 的三个数位的三次方的和,等于 i 自己
// 找到个位、十位、百位的数字
var ge = i % 10,
shi = parseInt(i / 10) % 10,
bai = parseInt(i / 100);
// 计算三个数位的三次方的和
var sum = ge * ge * ge + shi * shi * shi + bai * bai * bai ;
// 判断 sum 是否等于 i 自己,如果是,就是水仙花数,需要输出
if (sum == i) {
console.log(i);
}
}