JavaScript基础（2）

THER1881

于 2022-05-06 10:33:25 发布

阅读量857

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/thwr1881/article/details/124598703

版权

一、关系运算符（比较运算符）

1、关系运算的运算结果只有两种：true或false
即

45>25运算结果为true
45<25运算结果为flase

2、运算符：

运算符	作用
==	只比较值，不比较类型
===	全等，先比较类型，在比较值
！=	只比较值，不比较类型
！==	全不等
>=	大于等于
<=	小于等于
>	大于
<	小于

二、逻辑运算符：运算结果为逻辑值（true/false）

1、逻辑与（&&）：表达式1&&表达式2，只有两个值都为ture时，结果才会为true。

需注意&&运算的短路行为：当"表达式1"为flase时，不运算"表达式2"

演示：

2、逻辑或(||)：表达式1 || 表达式2 -->两个表达式中只要有一个为true，结果就为true

依旧需要注意||运算的短路现象：当’表达式1’为true时，不运算’表达式2’

3、逻辑非(!)：取反,true反是false，false的反是true.是单目运算符,必须放在运算对象的左边!表达式。

4、三者优先级顺序：！> && >||

三、赋值运算符（=）

1、格式：变量=表达式；var a=15

2、要求：
（1）’=‘的左边只能是变量，不能是常量或表达式
（2）优先级最低
3、复合赋值运算符：+=、-=、*=、/=等

例如：

var a = 5
a+=5等同于a=a+5
a*=3+4等同于a=a*(3+4)

四、位运算符：对数据的二进制进行运算

1、按位与(&):a&b相对应的二进制都为1时结果为1，否则结果为0

例如
var a=10,b=15
a&b=10
过程：
00001010
&00001111
————————
00001010
结果为10

2、按位或（|）：a|b相对应二进制有一位为1时结果为1，都为0时结果就为0

还是那个例子，数字不变：

a|b=15
过程如下：
00001010
|00001111
————————
00001111
结果就为15

3、按位异或（^）：a^b 相对应的二进进制相同为0，不同为1

还是刚刚的例子：
a^b=5
过程：
00001010
00001111
——————
00000101
结果为5

4、按位左移（<<):运算对象<<位置数，位移时高位（左边）移出的位舍弃，低位（右边）补0，对于正整数和五符合数，左移n位等于让运算对象乘以2的n次方。

举例： var = 2，b
b=a<<1 b=4
过程：
2的二进制为：00000010
左移一位后变成：00000100
最终结果就为4

5、按位右移（>>)：运算对象<< 位移位数，位移时低位（右边）移出舍弃，高位（左边）补0，对于正整数和无符号数，右移n位等于让运算对象除以2的n次方，总的来说，按位右移就是按位左移颠倒过去的运算符，在这就不演示了。

五、条件运算符（?😃：是一个三目运算符（参与运算对象有三个）

条件表达式：表达式1？表达式2：表达式3

触发结果：先运算“表达式1”，如果结果为true，则继续运算“表达式2”，并将“表达式2”：的结果作为最终的值。如果“表达式1”结果为false，则选择“表达式3”进行运算，并把“表达式3”的值作为整个条件表达式的值。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    
//从页面中输入一个数字判断是奇数还是偶数
var n = parseInt(prompt('请输入一个数字'))

var num = (n%2===0?'是偶数':'是奇数')
alert(num)
    </script>
</body>
</html>

在这段代码中就引用了条件表达式，当数字除以2取余等于0，则数字为偶数，如果取余不等于0，则为奇数，因为被2整除的为偶数，无法整除2的就是奇数。

效果如下：
在这里插入图片描述

六、流程控制

1、顺序结构，按照代码的先后顺序依次执行（就是我们平常用的最多的结构方式）
2、分支结构：又称为选择结构，是根据条件决定选择执行某个分支的代码。
3、循环结构：又称重复结构（迭代），是根据条件决定是否重复执行某段代码。

七，分支结构

1、if语句：条件语句，也称为条件语句，单分支语句，当满足某些条件时，就会进行设定好的处理

<script>
if(条件表达式1）{
      代码段
}
</script>

流程示意图如下：
在这里插入图片描述

2、if…else语句：

<script>
if（条件表达式）{
        代码段1
        }else{
        代码段2
        }
  </script>

流程示意图如下：
在这里插入图片描述

注意事项：1、else必须和if一起结合使用，不能单独使用
2、else后不能带表达式

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    
//示例：输入一个年份，判断它是闰年还是平年
var years = parseInt(prompt('请输入一个年份'))


var msg=''


if((years%4===0 && years%100!==0)|| (years%400===0)){
               msg=years+'年是闰年'
}else{
               msg = years+'是平年'
}
alert(msg)
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

这段代码中使用了if…else语句，当条件表达式为true时，就会判断此年份为闰年，如果为flase则运行代码段2，判断此年为平年。

3、多分支语句：

<script>
if(表达式1){
		
		  代码段1
		  
		}else if(表达式2){
		
		  代码段2
		  
		}else if(表达式3){
		
		  代码段3
		}
		...
		else{
		
		  代码段n
		  
		}
</script>

流程示意图如下：

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //示例：输入成绩，判断成绩的等级
        var pt = parseFloat(prompt('请输入成绩'))

        var mag = ''

        if(pt>=90){
            mag='A'
        }else if(pt>=80){
            mag='B'
        }else if(pt>=70){
            mag='C'
        }else if(pt>=60){
            mag='D'
        }else{
            mag='E'
        }
        alert(mag)
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

这段代码中使用了多分支语句，当判定结果为true时，选择if的结果，当结果为false是，将会向下寻找正确的语句，从而得出结果。

4、if结构的嵌套使用：

<script>
 //(1)在if子句中嵌套
		
		   if(表达式1){
		   
		     if(表达式2){
			    代码段1
			 }

		   }else{
		       代码段2
		   }
		   
		//(2)在else子句中嵌套
		
		   if(表达式1){
		   
		     代码段1
			 
		   }else {
		      
			  if(表达式2){
			  
			    代码段2
				
			  }else{
			  
			    代码段3
			  }
		   }
</script>

注意：a、在没有大括号({})时，if或else的控制范围(作用域)为其后的第一条语句
b、在没有大括号({})时，else总是和离它最近的if匹配

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if结构的嵌套使用</title>
</head>
<body>
    <script>
        //输入三个数，输出最大值和最小值
      var a = parseInt(prompt('请输入第一个整数'))
      var b = parseInt(prompt('请输入第二个整数'))
      var c = parseInt(prompt('请输入第三个整数'))

      var max,min
      
      if(a<=b){
          max=b
          min=a
      }else{
          max=a
          min=b
      }
      if(max<=c){
          max=c
      }
      if(min>=c){
          min=c
      }
      console.log('最大值=',max)
      console.log('最小值=',min)
    </script>

    
</body>
</html>

效果如下：
在这里插入图片描述

这段代码中使用了if结构的嵌套语句，使用这种语句最大好处就是可以设置多个表达式，并且针对不同情况进行不同的处理，同时还能使代码变得更简洁。

5、多分支选择结构
switch语句也是多分支语句，功能与if…else if语句类似，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。

<script>
 switch(表达式){
		
		   case 常量1：代码段1;break;
		   
		   case 常量2：代码段2;break;
		   
		   case 常量3：代码段3;break;
		   
		   ...
		   
		   case 常量n：代码段n;break;
		   
		   default: 代码段n+1;
		 
		}
</script>

（1）case后面必须是常量,该常量的类型必须和’表达式’的运算结果的类型一致
(2)case后面的常量不能重复
(3)default表示是所有case情况之外的
(4)switch–case必须和break结合使用,否则没有分支选择的效果

代码练习示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多分支选择结构</title>
</head>
<body>
  <script>
      //输入成绩判断成绩的等级

      var pt = parseFloat(prompt('请输入成绩'))
      var n = parseInt(pt/10)

      var msg = ''
      switch(n){
          case 10:
          case 9 : msg='A';break
          case 8 : msg='B';break
          case 7 : msg='C';break
          case 6 : msg='D';break
          default: msg='E';
      }
      alert('成绩等级为'+msg)
  </script>
</body>
</html>

效果如图：
在这里插入图片描述

THER1881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（2）

一、关系运算符（比较运算符）1、关系运算的运算结果只有两种：true或false即45>25运算结果为true45<25运算结果为flase2、运算符：运算符作用==只比较值，不比较类型===全等，先比较类型，在比较值！=只比较值，不比较类型！==全不等>=大于等于<=小于等于>大于<小于二、逻辑运算符：运算结果为逻辑值（true/false）1、逻辑与（&&am
复制链接

扫一扫