欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS_循环语句和分支语句

程序员文章站 2022-06-22 16:10:22
...

1.分支语句

顺序结构的程序虽然能解决计算、输出等问题,但不能做判断再选择。对于要先做判断再选择的问题就要使用分支结构。

分支结构的执行是依据一定的条件选择执行路径,而不是严格按照语句出现的物理顺序。
分支结构的程序设计方法的关键在于构造合适的分支条件和分析程序流程,根据不同的程序流程选择适当的分支语句。
JS_循环语句和分支语句
JS_循环语句和分支语句
JS_循环语句和分支语句

分支语句通常有以下几种:

(1)if条件语句
(2)if else条件语句
(3)if else if else条件语句
(4)switch语句

(1)if条件语句
先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。

语法:if(表达式){
语句;
}

var age=20;
             var workAge=2;
             if(age>=18 && workAge>=2){
             console.log("您已经成年!");
             console.log("您的条件符合,过来面试!");
             }

ps:表达式必须放在小括号之中。执行语句必须放在大括号内。
pss:if条件语句最后不用加分号。
psss:执行语句如果只有一句,那么大括号可以不写。但是推荐所有情况都加上大括号。

(2)if else条件语句
if else语句可以认为是if语句的升级版本。判断表达式值的真伪,若结果为真则执行语句1,否则就执行语句2。

语法:if(表达式){
语句1;
}else{
语句2;
}

 var age=10;
             if(false){
                console.log("成年!");
                console.log("hello");
             }else{
                console.log("未成年");
             }

(3)if else if else条件语句
当我们需要对一个变量判断多次的时候,我们就可以使用此结构进行判断。可以认为if elseif else结构是多个if else结构的嵌套。

语法:if(表达式1){
语句1;
}else if(表达式2){
语句2;
}else if(表达式3){
语句3;
}else{
语句4;
}

ps:else语句不能单独存在,他总是向上匹配离他最近的if语句。

var  bmi=22;
                if(bmi>22.3&&bmi<22.9){
                console.log("健康");
                }else if(bmi<22.3){
                console.log("太瘦");
                }else{
                console.log("太胖");
                }

(4)switch条件语句
switch语句和if语句表达的含义基本相同。其实switch语句很像if else if else结构。

语法:switch(表达式){
case 结果1:{执行语句1};
break;
case 结果2:{执行语句2}; break; default:{执行语句3};
}

上面语法结构表达的含义是:
a.判断表达式值是否和结果1相等,如果相等就执行语句1,然后跳出switch结构。
b.否则判断表达式值是否和结果2相等,如果相等就执行语句2,然后跳出switch结构。
c.如果表达式的值与上述case中的结果都不相等,那么直接执行default中的语句,然后结束switch结构。

switch (xiaoHong) 
{
	case "cuteGirl":{console.log("小红是个可爱的小女孩,那么奖励你一套花裙子吧");};
		breakcase "sexyGirl":{console.log("小红是个性感的小女孩,那么奖励你一双高跟鞋吧")};
		breakcase "goodJobGirl":{console.log("小红是个爱工作的小女孩,那么奖励你一台笔记本吧")};
		breakdefault:{console.log("小红…恩,继续努力的好好活下去吧!")};
}

ps:case语句和default语句中间的冒号不能省略,必须存在。
pss:break语句表示此判断结束,也必须存在。否则一次判断结束会继续进行下一次判断,直到结束为止。

2.循环语句

在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句。
一组被重复执行的语句称之为循环体
能否继续重复的条件称之为循环的终止条件。
循环语句是由循环体及循环的终止条件两部分组成的。
JS_循环语句和分支语句
JS_循环语句和分支语句

循环结构通常有以下几种:

(1)while循环
(2)do while循环
(3)for 循环

(1)while循环
while循环包括一个循环条件和一段代码块。事先不知道要循环多少次,只要条件为真,就不断循环执行代码块,直到条件为假为止。

语法:while (表达式) {
语句;
}

例:

var i = 0;
while(i < 100){
	console.log("i当前为:"+i);
	i++;
}

JS_循环语句和分支语句

每次循环执行打印当前i所表示的值,直到循环100次后i=100时为止

while循环的注意事项:
(1)因为while循环是先判断循环条件的,因此while循环的最少执行次数为0。
(2)while循环之所以能结束,是因为每次循环执行的过程中都会改变循环变量。
(3)执行while循环之前,必须给循环变量设初值。
(4)和if条件语句一样,如果while循环体中只有一条语句,那么大括号可以不写。当然我不推荐。
(5)while循环结构末尾不需要加分号。

var i = 0;	//为循环变量设初值
while(i < 100){
	console.log("i当前为:"+i);
	//i++;
}

上述例子如果没有在循环体中改变循环变量的语句,那这个while循环就变成了一个无限循环。也叫死循环。

ps:循环条件恒成立的循环被称为死循环。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>while循环练习</title>
</head>
<body>
<script>
    /*
    1.打印1-100以内7的倍数的数
     var  i=1;
     while(i<=100){
     //判断当前的i是否是7的倍数
     if(i%7==0){
     console.log(i);
     }
     i++;
     }
     */
    /*
    2.打印1-100以内的偶数
     var  i=1;
     while(i<=100){
     if(i%2==0){
     console.log(i);
     }
     i++;
     }
     */
    /*
    3.打印1-100以内的偶数的和
        i=1  sum=0+1=1
        i=2  sum=1+2=3
     */
    var  i=1;
    var  sum=0;
    while(i<=100){
        if(i%2==0){
            sum+=i;//sum=sum+i;
        }
        i++;
    }
    console.log(sum);
</script>
</body>
</html>

(2)do while循环
do while循环和while循环结构基本相同。唯一不同的是do while循环会先将循环体执行一遍后在进行判断。

语法: do{
语句;
} while (表达式) ;

例:

var i = 0;
do{
	console.log("i当前为:"+i);
	i++;
} while(i < 100);	

JS_循环语句和分支语句

do while循环的注意事项:
(1)因为do while循环是先执行循环体,因此do while循环不管循环条件真假,最少执行次数为1。
(2)do while循环之所以能结束,是因为每次循环执行的过程中都会改变循环变量。
(3)如果循环体中只有一条语句,那么大括号可以不写。当然我不推荐。
(4)do while循环结构末尾必须加分号!
例:

var i = 0;
do{
	console.log("i当前为:"+i);
	i++;
} while(i < 100);

(3)for循环
for循环是循环中使用的较为广泛的一种循环结构。
for循环分两种,一种叫做标准for循环,一种叫做快速遍历。而我们通常意义上的for循环指的是标准for循环

语法: for(表达式1;表达式2;表达式3){
循环体;
}

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

上述代码的含义是:
a.首先执行表达式1,进行循环变量num的初始化
b.然后判断表达式2结果是否为真,如果为真,执行循环体。否则就跳出循环。
c.当表达式2结果为真,并且循环体执行完毕后,执行表达式3,然后重复步骤b。

for(表达式1; 表达式2; 表达式3) {
循环体;
}

表达式1:确定循环的初始值,只在循环开始时执行一次。

表达式2:检查循环条件,只要为真就进行后续操作。

表达式3:完成后续操作,然后返回上一步,再一次检查循环条件。
JS_循环语句和分支语句

for循环的注意事项:
(1)for循环表达式1可以不写。如果不写表达式1,则需要在循环结构外为循环变量赋初值。

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

(2)for循环表达式2可以不写。如果不写表达式2,则表示循环条件恒成立。(死循环)

for(var num = 0; ;num++){
	console.log(num);
}

(3)for循环表达式3可以不写。如果不写表达式3,则需要在循环结构内部为循环变量增加改变条件

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

ps:根据以上三点,其实for循环三个表达式都可以不写。但是括号中的分号不能省略!!

for; ;{
	console.log(“hello javascript!”);
}

ps:尝试解释一下上述循环结构表达的是什么意思。
pss:所有的for循环都能够改写成while循环,尝试改写一下试试

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>for循环练习</title>
</head>
<body>
<script>
    /*
    打印5行5列的矩形
     * * * * *
     * * * * *
     * * * * *
     * * * * *
     * * * * *
     for(var j=1;j<=5;j++){//外层循环控制行
         for(var i=1;i<=5;i++){//内存循环控制列
         document.write("*");
         }
     document.write("<br/>");
     }
     *
     * *
     * * *
     * * * *
     * * * * *
     for(var i=1;i<=5;i++){
     for(var j=1;j<=6-i;j++){
     document.write("*");
     }
     document.write("<br/>");
     }

         *
        ***
       *****
      *******
     *********
     var alt="";
     for(var i=1;i<=5;i++){//控制行
     var blank="";
     for(var j=1;j<=5-i;j++){//空白三角形
     blank+=" ";
     }
     var stars="";
     for(var m=1;m<=2*i-1;m++){
     stars+="*";
     }
     alt+=blank+stars+"\n";
     }
     console.log(alt);

     打印九九乘法表

     */

    for(var i=1;i<=9;i++){
       for(var j=1;j<=i;j++){
           document.write(j+"*"+i+"="+j*i+"&nbsp;");
       }
        document.write("<br/>");
    }
</script>
</body>
</html>

快速遍历

for循环快速遍历是一种快速浏览容器内元素的手段。快速遍历的最大特点是不管有多少个元素,一定都能循环一遍。

语法: for(var 变量名 in 容器){
循环体;
}

var arr = [1,2,3,4,5];
for(var num in arr){
	console.log(arr[num]);
}

上述代码的含义是:
创建一个局部变量num,然后从数组arr逐个取出每个元素下标赋值给num,并且打印这个元素的值。

循环的嵌套使用
循环和条件语句可以进行嵌套使用来进行更复杂的逻辑处理。
例子:

for(var i = 0;i<100;i++){
	if(i == 10){
		console.log(“我需要这个10);
	}
}
for(var i=0;i<10;i++){
	for(var j=0;j<10;j++){
		console.log(i*j);
	}
}

3.break和continue语句

break语句和continue语句都具有跳转作用,可以让代码不按原有的顺序执行。
break语句用于跳出代码块或循环,循环终止。
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环,循环不终止。

break实例

var i = 0;
while(i < 100){
	console.log(“i 当前为:”+i);
	i++;
	if(i === 10){//循环终止,只执行了10次
		break;
	}
}

循环执行到第10次的时候,
break执行,跳出整个while循环。

continue实例

var i = 0;
while(i < 100){
	console.log(“i 当前为:”+i);
	i++;
	if(i === 10){//循环继续,执行了100次
		continue;
	}
}

循环执行到第10次的时候,
continue执行,跳出当前次循环。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>breakcontinue</title>
</head>
<body>
<script>
    /*
    break  破坏  终止循环
    continue  继续  跳出本次循环,继续执行下一次循环

    var i=0;
    while(i<100){//i=9  10
        i++;//10  11
        if(i==10){
           continue;
        }
        console.log("i当前为:"+i);
    }*/
    /*
    50-200的第一个能被7整除的数

    for(var i=50;i<=200;i++){
        if(i%7==0){
            console.log(i);
            break;
        }
    }*/
    /*
    1-100之间求和,要求所以个位为3 的数跳过。    83  93/10
     var  sum=0;
     for(var i=1;i<=100;i++){
     if(i%10===3){
     continue;
     }
     sum+=i;
     }
     console.log(sum);
     */
    console.log('hello worlrd! \ good  sxt');
</script>
</body>
</html>

4.js运算符

js中有很多种类的运算符,不同的运算符拥有不同的作用。

(1)算数运算符(2)赋值运算符
(3)比较运算符
(4)布尔运算符
(5)三目运算符

(1)算数运算符:
加法运算符:x+y
减法运算符:x - y
乘法运算符:x * y
除法运算符:x / y
余数运算符:x % y
自增运算符:++x 或者 x++
自减运算符:–x 或者 x–

加法运算符
加法运算符(+)需要注意的地方是,它除了用于数值的相加,还能用于字符串的连接。

'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"
(1 - '1' ) // 0

单目运算符(自增自减运算符)
单目运算符只需要一个运算子即可计算,表示对自身进行增加或者减少。使用时需要注意:

a.单目运算符放在运算子之前,先改变运算子本身,在参与计算结果。

var i = 1;
console.log(++i);//2 

b.单目运算符放在运算子之后,先计算运算结果,语句执行完毕后在改变运算子本身。

var i = 1;
console.log(i++);//1

(2)赋值运算符:

x+=y			//相当于x= x+y
x-=y			//相当于x= x-y
x*=y			//相当于x= x*y
x/=y			//相当于x= x/y
x%=y			//相当于x= x%y

(3)比较运算符:
比较运算符比较两个值,然后返回一个布尔值,表示是否满足比较条件。javascript提供了8个比较运算符:

x==y			//判断是否相等(忽略变量类型)			
x===y		//判断是否严格相等(计算变量类型)
x!=y			//判断是否不相等(忽略变量类型)
x!==y			//判断是否严格不相等(计算变量类型)
x<y			//判断是否小于
x<=y			//判断是否小于或者等于
x>y			//判断是否大于
x>=y			//判断是否大于或者等于

ps:undefined和null与自身严格相等。
var value1; var value2;
console.log(value1===value2;);//true

(4)布尔运算符:
逻辑运算符用于测定变量或值之间的逻辑。常见的布尔运算符有以下三种:
非运算符(!)
表达式的值为假的时候,运算结果为真
与运算符(&&)
当运算符两端的表达式值均为真时,运算结果为真,否则为假
或运算符(||)
当运算符两端的表达式值有一个为真,运算结果为真,都为假时结果才假
给定 x=6 以及 y=3,下表解释了逻辑运算符
JS_循环语句和分支语句

(5)三目运算符:
三元条件运算符用问号(?)和冒号(:),分隔三个表达式。如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。
语法:表达式1?表达式2:表达式3;

var min = (a<b)?a:b;

Js运算符优先级

1、. [] {} 提取属性与函数调用

2、 delete new typof + - ! 一元运算符

3、 * / % 乘法、除法、求余

4、 + - 加法/连接、减法

5、>= <= > < 不等式运算符

6、=== !== 等式运算符

7、&& 逻辑与

8、|| 逻辑或

9、?: 三元运算符 int 1=0?true:false;

相关标签: javascript