JavaScript基础知识（3）

于 2021-03-13 19:31:16 发布
阅读量180 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55689351/article/details/114757137
版权

JavaScript中的运算符

算术运算符 + 、-、*、/、%【求余/取模】、++【自增】、--【自减】

++【自增】、--【自减】运算的优先级高于+ 、-、*、/、%

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
		<script>
			window.onload=function(){
				//算术运算符 + 、-、*、/、%【求余/取模】、++【自增】、--【自减】
				var num1=10;
				var num2=3;
				/*
				alert(num1+"+"+num2+"="+(num1+num2));
				alert(num1+"-"+num2+"="+(num1-num2));
				alert(num1+"*"+num2+"="+(num1*num2));
				alert(num1+"/"+num2+"="+(num1/num2));
				alert(num1+"%"+num2+"="+(num1%num2));
				*/
			   //++【自增1】
			   //变量++ 【先用后加】
			   //alert(num1++); //10
			   //alert(num1);//11
			   //++变量 【先加后用】
			   //alert(++num1); //11
			   //alert(num1);//11
			   
			   //--【自减1】
			   //变量-- 【先用后减】
			   //alert(num1--); //10
			   //alert(num1);//9
			   //--变量 【先减后用】
			   alert(--num1); //9
			   alert(num1);//9
			}
		</script>
	</head>
	<body>
	</body>
</html>

比较运算符

==  [===]  !=  >  <  >=  <=

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
		<script>
			window.onload=function(){
				//比较运算符 ==  !=  >  <  >=  <=   [===] 
				//比较运算符的运算结果都是boolean值【treu/false】
				/*
				var num1=10;
				var num2=3;
				alert(num1+">"+num2+"="+(num1>num2));
				alert(num1+"<"+num2+"="+(num1<num2));
				alert(num1+">="+num2+"="+(num1>=num2));
				alert(num1+"<="+num2+"="+(num1<=num2));
				alert(num1+"=="+num2+"="+(num1==num2));
				alert(num1+"!="+num2+"="+(num1!=num2));
				*/
			    //=== 数据值与数据类型都判断 
				var test1=10; //number
				var test2="10"; //string
				alert(test1===test2); //false 因为数据类型不同
			}
		</script>
	</head>
	<body>
	</body>
</html>

逻辑运算符

 ||   &&  ！

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
		<script>
			window.onload=function(){
				//逻辑运算符 ||[逻辑或]   &&[逻辑与]  ！[非/求反]
				//||[逻辑或] 有一个true,结果就是true.
				//&&[逻辑与] 有一个false,结果就是false.
				var boo1=true;
				var boo2=false;
				//alert(boo1+"||"+boo2+"=="+(boo1||boo2));
				//alert(boo1+"&&"+boo2+"=="+(boo1&&boo2));
				//alert("!"+boo1+"=="+(!boo1));
			}
		</script>
	</head>
	<body>
	</body>
</html>

条件运算符

【(判断表达式) ? 数值1 : 数值2】  ()? :

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件运算符</title>
		<script>
			window.onload=function(){
				//条件运算符格式: (判断运算)? true时的运算 : false时的运算 
				var res=40;
				var jieguo=(res>=60)? "及格" : "不及格";
				alert(jieguo);
			}
		</script>
	</head>
	<body>
	</body>
</html>

 

typeof 操作符--检测变量的数据类型

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>typeof 操作符</title>
		<script>
			window.onload=function(){
				//typeof 操作符--判断变量的数据类型
				var num=100; //number
				var str="hello"; //string
				var boo=true; //boolean
				var arr1=[]; //object
				var arr2=new Array();  //object
				var user={}; //object
				var nulltest=null; //object
				var test; //undefined
				alert(typeof test);
			}
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript中的流程控制语句【语句】

  1. 顺序结构  自上往下一行一行逐行执行
  2. 选择结构  有选择的执行某一部分程序

 2.1if语句

  1. if(){}
  2. If(){}else{} -- 条件运算符
  3. If(){}else if(){}else if(){}...else{}
  4. If语句的嵌套    

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if语句</title>
		<script>
			window.onload=function(){
				/*
				//1.if(){} 当()中的结果为true时执行{}中的程序
				var num1=20;
				if(num1>11){
					alert("num1的数据值大于11");
				}
				//只认true
				*/
			   /*
			   //2.if(){}else{}---条件运算符
			   //当()中的结果为true是执行第一个{}中的程序
			   //当()中的结果为false是执行第二个{}中的程序
			   var num1=20;
			   if(num1>11){
			   	alert("num1的数据值大于11");
			   }else{
				alert("num1的数据值小于/等于11");   
			   }
			   //2选一
			   */
			   /*
			   //3.if(){}else if(){}else if(){}...else{}
			   //当第一个()中的结果为true执行第一个{}中的程序
			   //当第一个()中的结果为false执行第二个()中的判断
			   //当第二个()中的结果为true执行第二个{}中的程序
			   //当第二个()中的结果为false执行第三个()中的判断
			   //.....以此类推
			   //当所有()中的结果为false的时候，执行最后一个{}中的程序
			   var res=182;
			   if(res>0 && res<60){
				   alert("不及格--D");
			   }else if(res>=60 && res<70){
				   alert("及格--C");
			   }else if(res>=70 && res<90){
				   alert("良好--B");
			   }else if(res>=90 && res<=100){
				   alert("优秀--A");
			   }else{
				   alert("成绩有误");
			   }
			   //多选1
			   */
 //4.if语句的嵌套
			   var num1=-2;
			   if(num1>0){
			   		if(num1<60){  
			   			alert("不及格"); //true  true
			   		}else{
			   			alert("及格"); //true  false
			   		}
			   	}else{
			   		if(num1==0){  
			   			alert("0分");  //false  true
			   		}else{
			   			alert("没有负数");  //false  false
			   		}
			   	}
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.switch语句

switch(表达式 n){
case 常量值1:执行代码块1;  [break;]
     case 常量值2: 执行代码块2; [break;]

.......

case 常量值n:执行代码块n;  [break;]
default:
  表达式的结果与case后面常量值都不匹配；

}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配[相等]，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

注意:与case关联的执行代码块中有没有break 语句，会影响运行结果。

有break 语句中断执行，没有break 语句，消除与小case的匹配，直接执行与之关联的代码块。

例如：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>switch语句</title>
		<script>
			window.onload=function(){
				var num1=10;
				var num2=3;
				var op="-";
				switch(op){
					case "+":document.write("<h1>"+num1+"+"+num2+"="+(num1+num2)+"</h1>");break;
					case "-":document.write("<h1>"+num1+"-"+num2+"="+(num1-num2)+"</h1>");
					case "*":document.write("<h1>"+num1+"*"+num2+"="+(num1*num2)+"</h1>");break;
					case "/":document.write("<h1>"+num1+"/"+num2+"="+(num1/num2)+"</h1>");break;
					default:
						 document.write("<h1>没有指定的运算</h1>");break;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>
  1. 循环结构  一部分程序不断运行

3.1for循环  ---》for(in)

格式:

for(初始条件;判断条件;自增/自减量){

  需要被循环执行的程序；

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环</title>
		<script>
			window.onload=function(){
				//循环输出1--10的整数
				/*
				for(var i=1;i<=10;i++){
					document.write("<h1>i=="+i+"</h1>");
				}
				*/
			   //循环输出10--1的整数
			   for(var i=10;i>=1;i--){
			   	document.write("<h1>i=="+i+"</h1>");
			   }
			}
		</script>
	</head>
	<body>
	</body>
</html>

for(in)---1.循环遍历对象的属性/函数的名称

       2.遍历数组得到的下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环</title>
		<script>
			window.onload=function(){
			   //for(in)---1.循环遍历对象的属性/函数的名称
			   /*
			   var user={userid:1001,
						 username:"zhangsan",
						 userage:23,
						 getInfo:function(){}};
				var name=null; //保存属性/函数的名称
				for(name in user){
					document.write("<h1>"+name+"</h1>");
				}
				*/
				// 2.遍历数组得到的下标--遍历数组
				/*
				var array1=[1001,"zhangsan",23,"西安"];
				var index=null;
				//遍历数组
				for(index in array1){
					document.write("<h1>"+array1[index]+"</h1>");
				}
				*/
			    var array1=[1001,"zhangsan",23,"西安"];
				for(var i=0;i<array1.length;i++){
					document.write("<h1>"+array1[i]+"</h1>");
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.2while循环

格式:

while(判断条件){

需要被循环执行的程序；

}

  1. 没有初始条件【循环结构之外】，没有自增/自减量【循环体内】
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while循环</title>
		<script>
			window.onload=function(){
				//循环输出1--10的整数
				/*
				var i=1; //初始值
				while(i<=10){
					document.write("<h1>i=="+i+"</h1>");
					i++;
				}
				*/
			   //循环输出10--1的整数
			   /*
			   var i=10; //初始值
			   while(i>=1){
			   	document.write("<h1>i=="+i+"</h1>");
			   	i--;
			   }
			   */
			   //作业：使用while输出1--100的整数和 5050
			   //遍历数组
				var array1=[1001,"zhangsan",23,"西安"];
				var index=0;
				while(index<array1.length){
						document.write("<h1>"+array1[index]+"</h1>");
						index++;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.3do...while循环

格式:

do{

需要被循环执行的程序；

}while(判断条件)

1.没有初始条件【循环结构之外】，没有自增/自减量【循环体内】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>do...while循环</title>
		<script>
			window.onload=function(){
			   //循环输出1--10的整数
			   /*
				var i=1;
				do{
					document.write("<h1>i=="+i+"</h1>");
					i++;
				}while(i<=10);
				*/
			   //循环输出10--1的整数
			   /*
			   var i=10;
			   do{
			   	document.write("<h1>i=="+i+"</h1>");
			   	i--;
			   }while(i>=1);
			   */
			   //作业：使用do...while输出1--100的整数和 5050
			   //遍历数组
				var array1=[1001,"zhangsan",23,"西安"];
				var index=0;
				do{
					document.write("<h1>"+array1[index]+"</h1>");
					index++;
				}while(index<array1.length);
			}
		</script>
	</head>
	<body>
	</body>
</html>

for循环与while和do...while循环的区别？

for循环有初始条件和自增/自减量的书写位置，while和do...while循环没有有初始条件和自增/自减量的书写位置，while和do...while循环需要初始条件时需要在循环结构之外自己定义，自增/自减量需要在循环体内控制。

for循环在运行的时候需要明确循环的次数，while和do...while循环不需要明确循环的次数，达到条件自动结束。

while和do...while循环的区别？

while循环先判断后执行，do...while循环先执行后判断，判断条件为false时do...while循环比while循环多执行一次。

break 和 continue 语句

break--中断 【switch,循环语句中】

continue --继续 【结束本次循环，进入下一次】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>break 和 continue 语句</title>
		<script>
			window.onload=function(){
			  //break--中断 【switch,循环语句中】
			  /*
			  for(var i=1;i<=10;i++){
				  if(i==5){
					  break;
				  }
				  document.write("<h1>i=="+i+"</h1>");
			  }
			  */
			  //continue --继续 【结束本次，进入下一次】
			  for(var i=1;i<=10;i++){
			  		if(i==5){
			  			continue;
			  		}
			  		document.write("<h1>i=="+i+"</h1>");
			  }
			}
		</script>
	</head>
	<body>
	</body>
</html>

 

晚风yY
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值