参考网道文档:https://wangdoc.com/javascript/basic/grammar.html
语雀文档:https://www.yuque.com/docs/share/70dbde2d-1dd6-470a-8df6-c932b3e5590a?# 《JS流程控制与循环语句》
流程控制
JavaScript提供3种流程结构,不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序、选择、循环三种基本控制结构构造.
顺序结构
默认的流程结构。按照书写顺序从上至下执行每一条语句。
if 语句
if(条件表达式){
条件满足执行的语句;
}
特点:当条件表达式为真的时候就会执行{}中所有的代码, 并且只会执行一次
if(条件表达式){
条件成立执行的语句;
}else{
条件不成立执行的语句;
}
当条件满足就执行if后面{}中的代码,当条件不满足就执行else后面{}中的代码,并且两个{}只有一个会被执行, 并且只会被执行一次
if(条件表达式A){
条件A满足执行的语句;
}else if(条件表达式B){
条件B满足执行的语句;
}
... ...
else{
前面所有条件都不满足执行的语句;
}
- 从上至下的依次判断每一个条件表达式, 哪一个条件表达式满足, 就执行该条件表达式后面{}中的代码
- 如果前面所有的条件表达式都不满足, 就会执行else后面{}中的代码
- 并且众多的大括号只有一个会被执行, 并且只会执行一次
注意事项
对于非布尔类型的数据, 会先转换成布尔类型再判断
if(null){
if(1){
console.log("语句A");
}
console.log("语句B");
if/else
if/else
后面的大括号都可以略, 但是省略之后只有紧随其后的语句受到控制
if(false)
console.log("语句A");
console.log("语句B");
//“语句B”将不受if的控制
在JavaScript中分号(;)也是一条语句(空句)
if(false);{
console.log("语句A");
console.log("语句B");
}
//假如添加了分号; {}括号中的语句将不受if的影响
⚠️注意
- 条件满足后只有一句代码需要执行, 可以使用三目运算符
- 条件满足后有多句代码需要执行,就使用选择结构
问号冒号表达式
三目运算符又称问号冒号表达式
语法:condition ? exprIfTrue : exprIfFalse
function max(a,b){
return (a > b) ? a:b; // 最大值对比输出
}
选择结构
对给定的条件进行判断,再根据判断结果来决定执行哪一段代码。
选择结构1:if
的排序 江哥讲解
选项结构2:switch
都会对指定的条件进行判断,再根据判断结果来决定执行哪一段代码
Switch基本格式
必须在case 表达式内添加break
switch(条件表达式){
case 表达式:
语句1;
break;
case 表达式:
语句2;
break;
case 表达式n:
语句n;
break;
default:
语句n+1;
break;
}
语义说明:
- 计算条件表达式的值。逐个与case后面表达式的结果值比较;
- 当条件表达式的值与某个表达式的值全等
===
时, 执行其后的语句,并且不会再与其它case进行比较; - 如条件表达式的值与所有case后的表达式均不相同时,则执行
default
后的语句。
示例说明
var num = 2;
switch(num){
case 1:
console.log("壹");
break;
case 2:
console.log("贰"); // 输出贰
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字");
break;
}
switch 案例分析
case判断的是===
, 而不是==
let num = 123;
switch (num) {
case "123":
console.log("字符串123");
break;
case 123:
console.log("数值的123"); //结果为第二选择
break;
default:
console.log("Other");
break;
}
()
中可以是常量也可以是变量还可以是表达式
let num = 123;
switch (num) { // 变量
switch (123) { // 常量
switch (122 + 1) { // 表达式
case 123:
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
case后面可以是常量也可以是变量还可以是表达式
let num = 123;
switch (123) {
// case 123: // 常量
// case num: // 变量
case 100 + 23: // 变量
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
break
的作用是立即结束整个switch
语句 在switch语句中一旦case或者default被匹配,那么其它的case和default都会失效,但没有break的语句,一样会输出console.log中的数据
let num = 1;
switch (num) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
default:
console.log("Other");
break;
}
default不一定要写在最后 switch
中的default
无论放到什么位置, 都会在所有case都不匹配再执行
let num = 7;
switch (num) {
default:
console.log("Other");
break;
case 1:
console.log("1");
break;
default:
console.log("Other");
break;
case 2:
console.log("2");
break;
}
和if
/else
中的else
一样, default
也可以忽略
let num = 7;
switch (num) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
}
if 和 switch 选择
- 对区间进行判断, 那么建议使用
if
- 对几个固定的值的判断, 那么建议使用
switch
- 原则: 能用
if
就用if
历史遗留问题:每一个case需要添加break,是当初设计的问题,可以参考近来比较优美的swift swich写法。
循环结构
在给定条件成立的情况下,反复执行某一段代码。一般有三种类型
- while语句;
- do-while语句;
- for语句;
while的格式
while(条件表达式){
条件满足执行的语句;
}
var i=0;
while (i<5){
console.log('输出数字为 ' + i);
i++;
}
/* 输出结果 ↓
输出数字为 0
输出数字为 1
输出数字为 2
输出数字为 3
输出数字为 4
*/
while的特点: 满足条件表达式为真执行后面{}的代码,对if相比while会被执行多次,执行到不满足条件为止,缺失条件会陷入死循环。
var i=0;
while (i<10){
if (i % 2 === 1){
console.log('跳过')
i++; // 避免进入死循环
continue;
}
console.log('输出数字为 ' + i);
i++;
}
/* ↓ 输出结果
输出数字为 0
跳过
输出数字为 2
跳过
输出数字为 4
跳过
输出数字为 6
跳过
输出数字为 8
跳过
*/
死循环案例
不要轻易执行该案例,死机不负责
var i=0;
while (i<10){
if (i % 2 === 1){
console.log('跳过')
continue; // 满足条件会跳过下面的代码,条件永远为真,进入死循环
}
console.log('输出数字为 ' + i);
i++; // 增量表达式放在后面会进入死循环
}
书写循环结构的规则
- 先写上循环结构的代码
- 将需要重复执行的代码拷贝到{}中
- 再()中指定循环的结束条件
案例:任意数值计算7的倍数
// 将用户输入的数据转换为数值
let a = Number(prompt("请输入任意数字计算7的倍数"))
//计算器j
let count=0;
//判断数值大于等于0
while( 0 <= a ){
console.log(a);
a = a-7;
count++;
}
console.log( "共有" + count + "个'7'的倍");
do-while循环的格式
do{
需要重复执行的代码;
}while(条件表达式);
dowhile
循环的特点: 无论条件表达式是否为真, 循环体都会被执行一次
while和dowhile如何选择
- 大部分情况下
while
循环和dowhile
循环是可以互换的 - 如果循环体中的代码无论如何都需要先执行一次, 那么建议使用
do-while
循环,其它的情况都建议使用while
循环
for循环的格式
for循环的特点和while循环的特点一样, 只有条件表达式为真, 才会执行循环体
// 条件表达式、循环体、增量表达式「三者不断循环」
for(初始化表达式;条件表达式;循环后增量表达式){
需要重复执行的代码;
}
for(let num = 1;num <= 10;num++){
console.log("发射子弹" + num);
}
两种循环方式实现同一种需求
let a = Number(prompt("请输入任意数字计算7的倍数"))
let count=0;
while( 0 < a ){
console.log(a);
a = a-7;
count++;
}
console.log( "共有" + count + "个'7'的倍数");
let count=0;
for( let a = Number(prompt("请输入任意数字计算7的倍数"));0 < a; a = a-7){
console.log(a);
count++;
}
console.log( "共有" + count + "个'7'的倍数");
for 和 while 的选择
- 在
for
循环中"初始化表达式""条件表达式""循环后增量表达式"都可以不写 - 如果是
for
循环, 在循环结束之后可以让外界使用,也可以不让外界使用 - 在开发中由于
for循环
比while循环
要灵活,能用`for
循环就用for
循环
break 与 continue 语句
break
语句和continue
语句都具有跳转作用,可以让代码不按既有的顺序执行。
break
语句用于跳出代码块或循环。
var i = 0;
while(i < 10) {
if ( i === 5 ) break; // 将 break 换成 continue 则会进入死循环
console.log('i 当前为:' + i);
i++;
}
上面代码只会执行10次循环,一旦i
等于5,就会跳循环。
⚠️注意 continue
用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。若然增量表达式在continue
后面,只要符合条件增量表达则永远不会执行,进入死循环状态
var i=0;
while (i<10){
if (i % 2 === 1){
console.log('跳过')
i++; // 避免进入死循环
continue;
}
console.log('输出数字为 ' + i);
i++;
}
// 这样写法并不优雅,实际很少使用
建议采用for循环
for(let i = 0;i < 10;i++){
if(i % 2 === 1) continue;
console.log('输出数字为 ' + i)
}
/*
输出数字为 0
输出数字为 2
输出数字为 4
输出数字为 6
输出数字为 8
*/
如果存在多重循环,不带参数的break
语句和continue
语句都只针对最内层循环。
for(let i = 1;i < 10;i++){
if(i % 2 === 0) {
if(i === 4){
continue; // 跳出i=4的条件判断
}
console.log('这个为数字双数 ' + i)
continue
}
}
/*
这个为数字双数 2
这个为数字双数 6
这个为数字双数 8
*/
label(标签)
网道文档
MDN:label 使用指南
JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下。
label:
语句
在 for 循环中使用带标记的 break
var i, j;
loop1:
for (i = 0; i < 3; i++) { // 标签1
loop2:
for (j = 0; j < 3; j++) { // 标签2
if (i == 1 && j == 1) {
break loop1; // 符合条件,跳转到 loop 1
}
console.log("i = " + i + ", j = " + j);
}
}
// "i = 0, j = 0"
// "i = 0, j = 1"
// "i = 0, j = 2"
// "i = 1, j = 0"
在标记块中使用 break
foo: {
console.log('hello');
break foo;
console.log('world !');
}
// 'hello'
end.