前端(JavaScript)------运算符及分支语句、循环语句

目录

(1)  if条件语句    

(2)  if else条件语句

(3)  if else if else条件语句

(4)  switch条件语句

(1)  while循环

(2)  do while循环

(3)  for循环

4.js运算符

(1)算数运算符

(2)赋值运算符

(3)比较运算符 

(4)布尔运算符

(5)三目运算符

Js运算符优先级


(1)  if条件语句    

先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。
  语法:

if(表达式){

            语句;

      }

           if (m === 3) {

                   console.log(“你居然猜到了m变量的值!”); 

                 }

//这个结构表示当表达式m===3为真的时候,执行if结构内部的语句,否则就不执行

ps:表达式必须放在小括号之中。执行语句必须放在大括号内。

pss:if条件语句最后不用加分号。

psss:执行语句如果只有一句,那么大括号可以不写。但是推荐所有情况都加上大括号


(2)  if else条件语句

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

if(表达式){

     语句1;

    }else{

       语句2;

   }

if ( xiaoHong === “cuteGirl”) {

                    console.log(“既然小红是个可爱的小女孩,那么奖励你一套花裙子吧”); 

             }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;

      }

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

if ( xiaoHong === “cuteGirl”) 
{
	console.log(“小红是个可爱的小女孩,那么奖励你一套花裙子吧”);	
}
else if ( xiaoHong === “sexyGirl”) 
{
	console.log(“小红是个性感的小女孩,那么奖励你一双高跟鞋吧”);
} 
else if ( xiaoHong === “goodJobGirl”) 
{
	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("小红是个可爱的小女孩,那么奖励你一套花裙子吧");};
		break;
	
	case "sexyGirl":{console.log("小红是个性感的小女孩,那么奖励你一双高跟鞋吧");};
		break;

	case "goodJobGirl":{console.log("小红是个爱工作的小女孩,那么奖励你一台笔记本吧"); };
		break;

	default:{console.log("小红…恩,继续努力的好好活下去吧!");};
}

ps:  case语句default语句中间的冒号不能省略,必须存在。

pss:  break语句表示此判断结束,也必须存在。否则一次判断结束会继续进行下一次判断,直到结束为止。


(1)  while循环

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

while (表达式) {

      语句;

  }
例:

var i = 0;

while(i < 100){

	console.log("i当前为:"+i);
	i++;

}

每次循环执行打印当前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:循环条件恒成立的循环被称为死循环。


(2)  do while循环

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

 do{

     语句;

  } while (表达式) ;
例:

var i = 0;

do{

	console.log("i当前为:"+i);

	i++;

} while(i < 100);	

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:完成后续操作,然后返回上一步,再一次检查循环条件。

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循环,尝试改写一下试试

快速遍历

  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);

  }

}

4.js运算符

   

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

(1)算数运算符

   加法运算符:x+y    减法运算符:x - y   乘法运算符:x * y    除法运算符:x / y   

  余数运算符:x % y  自增运算符(单目运算符):++x 或者 x++   

   自减运算符(单目运算符):--x 或者 x--  

(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)比较运算符 

  x==y  //判断是否相等(忽略变量类型)            x===y  //判断是否严格相等(计算变量类型)

  x!=y  //判断是否不相等(忽略变量类型)          x!==y  //判断是否严格不相等(计算变量类型)

  x<y  //判断是否小于                                            x<=y  //判断是否小于或者等于

  x>y  //判断是否大于                                            x>=y  //判断是否大于或者等于

psundefinednull与自身严格相等。

  var value1; var value2;

  console.log(value1===value2;);//true

(4)布尔运算符

逻辑运算符用于测定变量或值之间的逻辑。常见的布尔运算符有以下三种:

  非运算符(!)

  表达式的值为假的时候,运算结果为真 

  与运算符(&&)

  当运算符两端的表达式值均为真时,运算结果为真,否则为假

  或运算符(||)

  当运算符两端的表达式值有一个为真,运算结果为真,都为假时结果才假

运算符

描述

例子

&&

and

(x < 10 && y > 1) true

||

or

(x==5 || y==5) false

!

not

!(x==y) true

(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;

猜你喜欢

转载自blog.csdn.net/m0_58719994/article/details/121619800