JS 语句(二)

198 阅读3分钟

这是我参与11月更文挑战的第 16 天,活动详情查看:2021最后一次更文挑战

续接上一篇语句的文章 JS 语句的定义 - 掘金 (juejin.cn)

if...else语句嵌套

if...else语句支持嵌套写法,也就是说,可以在if或else后面的语句块中继续编写if..else语句。

注意:嵌套层级越多,性能越差

如下示例代码所示:

 var score=95;
 if(score>90){
     console.log("优秀");
 }else{
     if(score>80){
         console.log("良好")
     }else{
         console.log("及格!")
     }
 }//优秀

上述示例代码分析如下图:

Us8qaQ.png


else...if 语句

else...if语句是在if语句的基础上,允许提供多个条件判断。

UsYXPH.png

如下代码展示了else...if 语句的用法:

 var score=65;
 if(score>90){
     console.log("优秀");
 }else if(score>80){   
         console.log("良好")
 }else{
         console.log("及格!")
 }//及格

上述示例代码流程分析如下图:

UsYjGd.png

else...if语句同样提供了两种以上的选择,但没有没有嵌套结构,所以性能更好


switch...case语句

switch..case语句是开关语句,但整体执行流程要比if..else语句复杂的多。具体参考下述流程图:

UyE9js.png

如下代码展示了switch...case语句的用法:

 var result = 3;
 ​
 switch (result) {
     case 0:
         console.log('数字0');
         break;
     case 1:
         console.log('数字1');
         break;
     default:
         console.log('以上结果无一满足');
 }//以上结果无一满足

上述示例代码流程图:

UyErUf.png

下图展示了switch...case语句的结果剖析图:

UyEHGF.png

注意事项:

  1. 条件表达式的值不移动式Boolean类型的,计算结果分别于case语句的值进行比较 。 条件表达式计算结果与case语句的值是全等比较(既要比较值,也要比较类型)
  2. 对应的语句块最后添加break 关键字——当执行对应的语句块后,停止继续执行
  3. default语句——类似于if...else语句中的else语句 。当以上所有case语句的值都不匹配时,默认执行default语句对应的语句块 。 default语句不是不需要使用break关键字,而是default默认一般被编写在最后


循环执行语句

概述:

循环语句是一系列反复执行到复合特定条件的语句。为了更好地理解循环语句,可以将JavaScript代 码想象成一条条的分支路径。循环语句就是代码路径中的一个回路,可以让一段代码重复执行。

UyVhSe.png


while语句

while语句是一个基本循环语句,语法结构与if语句很类似。

UyVxyj.png

如下代码展示了while语句的用法:

 /*var result =10 ;
 ​
 while (result=10){
     console.log('while循环语句执行');
 }
 console.log('while循环语句执行完毕')*//死循环
 ​
 var result =1 ;
 ​
 while (result<=10){
     console.log('while循环语句执行');
     result++;
 }
 console.log('while循环语句执行完毕')

上述两段代码分析图:

Uym2F0.png

注意:while语句在反复执行过程中至少有一次执行的值为false,否则会发生"死循环"


do...while语句

do..while语句也是一个基本循环语句,执行流程与while语句很类似。

Uynikt.png

 var result = 0;
 do {
     console.log('do...while语句');
     result++;
 }while(result<10)

Uy1khn.png

while语句 与do...while语句的区别是:

  • while先判断再执行,
  • do...while语句是先执行再判断,至少会输出一次结果。


for语句

for语句是一种最简洁的循环语句,其中包含三个重要部分:

  1. 初始化表达式:初始化一个计数器,在循环开始前计算初始状态。
  2. 条件判断表达式:判断给定的状态是否为true。如果条件为true,则执行语句块,否则跳出循环。
  3. 循环操作表达式:改变循环条件,修改计数器的值。

for语句的语法如下:

 for(初始化表达式;条件判断表达式;循环操作表达式)
     语句块
 }

while语句与for语句对比示例代码如下:

 //while 语句
 var v=0;
 while (v<10){
     console.log(v);
     v++;
 }
 console.log(v);
 
 //for语句
 for (var v=0;v<10;v++){
     console.log(v)
 }

对比结果如下

UyJDZ8.png

for语句的另一种写法:

 var v=0;
 for (;v<10;){
     console.log(v)
     v++;
 }

跳转语句

JavaScript中另一种语句就是跳转语句。从名称就可以看出,它使得JavaScript代码的执行可以从一 个位置到另一个位置。

跳转语句提供了break和continue两种,用于跳转当前的循环或开始下一次的循环等。

 /*  跳转语句
         作用 —— JavaScript代码从指定位置跳转到另一个指定的位置
         场景 —— 跳转语句只能用于循环执行结构,而不能用于条件判断结构
            *注意 switch...case语句中使用的break,并不是break的用法,而是switch语句的用法
         循环语句中的跳转语句:
             *break:表示结束整体循环
             *continue语句:表示结束本次循环
 */

break语句

break语句是中断语句,用于终止循环语句或开关语句。

break 语句是终止语句。该语句会立即跳出当前的循环语句,并且强制执行该循环语句之后的语句。目前,break 语句主要应用于循环语句或者 switch 语句。

  • 终止循环语句,例如while、do...while以及for语句等。

     for (var num1=0;num1<9;num1++) {
         if (num1 == 4 ){
             break;//循环执行到结果为4时,结束循环
         }
         console.log(num1);
     }
    
  • 终止开关语句(switch...case)

 var result = 3;
 ​
 switch (result) {
     case 0:
         console.log('数字0');
         break;
     case 1:
         console.log('数字1');
         break;
     default:
         console.log('以上结果无一满足');
 }

continue语句

continue语句是连续语句,用于重新开始while、do...while和for语句。**

continue 语句的作用是结束循环语句中的本次循环,并开始下一次的循环。目前,continue 语句主要应用于循环语句。

 for (var num2=0;num2<9;num2++) {
     if (num2 == 4 ){
         continue;
     }//循环到结果为4时跳出本次循环,执行下面的循环
     console.log(num2);
 }

使用语句打印图案案例

01 打印矩形

 for (var i=0;i<5;i++){
     console.log('*********');
 }

02 打印直角三角形(朝右)

 var stars = '*'
 for (var i=0;i<7;i++){
     console.log(stars);
     stars=stars+'**';
 }

03 打印直角三角形(朝左)

 var sum = 9;
 for (var x=8;x>=0;x--){
     if (x%2==0){//找到对应的空格数打印空格
         var space = '';
         for (var y=1;y<=x;y++){
             space = space + ' ';
         }
         var stars = '';
         for (var z=0;z<(sum - x);z++){//找到对应的星号
             stars = stars + '*';
         }
         console.log(space + stars);//将空格和星号进行合并
     }
 }