JavaScript总结(3)

最新推荐文章于 2024-07-10 14:03:37 发布

WildKingxue

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/WildKingxue/article/details/120048423

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.JavaScript条件语句

脚本的威力体现在它们可以根据人们给出的各种条件做出决策，javascript使用条件语句来做判断

条件语句(conditianal statement)通过判断表达式的值来决定执行还是跳过某些语句，包括if语句和switch语句

在 JavaScript 中，我们可使用以下条件语句：

if语句：

if- 只有当指定条件为 true 时，使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

if..else嵌套语句

switch语句：

switch 语句 - 使用该语句来选择多个代码块之一来执行

1.if语句

if语句是最常见的条件语句。if语句的条件必须放在if后面的圆括号内，条件的求值结果永远是一个布尔值，即只能是true或false。花括号中的语句，不管它们有多少条，只有在给定条件的求值结果是true的情况下才会执行

格式： if(条件){执行代码}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if语句</title>
		<script type="text/javascript">
		var num=5;//赋值
			if(10>num){//判断值是否为true
				alert("小于");//如果为true，则执行代码
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.if...else 语句

格式： if(条件){执行代码1}else{执行代码2}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if else 语句</title>
		<script type="text/javascript">
			var h = new Date().getHours();//提取现在值
			if (h < 12) {//判断
				alert("早上好！");//为true时
			}else{
				alert("下午好！");//为false时
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.if...else if....else 语句

格式： if(条件1){执行代码1}else if(条件2){执行代码2}......

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件语句</title>
		<script type="text/javascript">
			var mon=new Date().getMonth();//取值
			h=mon+1;
				if (h >= 1 && h < 4) {//判断
					alert("春季");//为true时
				} else if (h >= 4 && h < 7) {//为false时，继续判断
					alert("夏季");//为true时
				} else if (h >= 7 && h < 10) {//为false时，继续判断
					alert("秋季");//为true时
				} else {
					alert("冬季");//为false时
				}
		</script>
	</head>
	<body>
	</body>
</html>

4.if..else嵌套语句

当在if/else语句中嵌套使用if语句时，必须注意确保else语句匹配正确的if语句

格式：

if(false){
				if(false){
					alert("true  true");
				}else{
						alert("true  false");
				}
			}else{
				if(true){
					alert("false  true  ");
				}else{
						alert("false  false  ");
				}
			}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if 嵌套</title>
		<script type="text/javascript">
			var h = new Date().getHours(); //提取现在的时间值
			var day = new Date().getDay(); //提取星期值
			if (day > 5) { //判断
				alert("周末"); //为true时
				if (h < 12) { //判断
					alert("早上好！"); //为true时
				} else {
					alert("下午好！"); //为false时
				}
			} else {
				alert("周内"); //为false时
				if (h < 12) { //判断
					alert("早上好！"); //为true时
				} else {
					alert("下午好！"); //为false时
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

第一个值

第二个值

5.switch 语句

当所有的分支都依赖于同一个表达式的值时，else if并不是最佳解决方案。

在这种情况下，重复计算多条if语句中的条件表达式是非常浪费的做法，而switch语句正适合处理这种情况

switch语句执行一个多路分支，首先计算expression的值，然后查找case子句的表达式是否和expression的值相同。如果找到匹配的case，那么将会执行这个case对应的代码块。如果找不到匹配的case，那么将会执行default标签中的代码块。如果没有default标签，switch语句将跳过它的所有代码块。

格式：

switch(条件) {

case 常量1: 执行代码块 1 ;[break;]

case 常量2: 执行代码块 2 ;[break;]

.....

case 常量n: 执行代码块 n ;[break;]

default: 剩下的

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>switch语句</title>
		<script type="text/javascript">
		var day=new Date().getDay();
			switch (day) {
				case 1:
					alert("今天星期一");
					break;
				case 2:
					alert("今天星期二");
					break;
				case 3:
					alert("今天星期三");
					break;
				case 4:
					alert("今天星期四");
					break;
				case 5:
					alert("今天星期五");
					break;
				case 6:
					alert("今天星期六");
					break;
				default:
					alert("今天星期天");
					break;
			}
		</script>
	</head>
	<body>
	</body>
</html>

使用switch语句时，要注意以下几点：

　　【1】由于每次执行switch语句时，并不是所有的case表达式都能执行到，因此，应该避免使用带有副作用的case表达式，比如函数调用表达式和赋值表达式，最安全的做法是在case表达式中使用常量表达式

　　【2】default标签一般都出现在switch的末尾，位于所有case标签之后，当然这是最合理也是最常用的写法，实际上，default标签可以放置在switch语句内的任何地方

　　【3】switch语句中，对每个case的匹配操作实际上是'==='恒等运算符比较，而不是'=='相等运算符比较，因此，表达式和case的匹配并不会做任何类型转换

二.JavaScript 循环

条件语句把javascript中的代码变成一条条的分支路径，而循环语句(looping statement)就是程序路径的一个回路，可以让一部分代码重复执行。

它们的工作原理几乎一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去。一旦给定条件的求值结果不再是true，循环也就到此为止。

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for...in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do...while - 同样当指定的条件为 true 时循环指定的代码块

1.for

for 循环是您在希望创建循环时常会用到的工具。

for语句提供了一种比while语句更加方便的循环控制结构，用for循环来重复执行一些代码的好处是循环控制结构更加清晰

格式：

for (语句 1; 语句 2; 语句 3){

被执行的代码块

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环语句</title>
		<script type="text/javascript">
			for (var i = 1; i <= 10; i++) {//循环【当i的值小于10时，则使i的值i++，再次循环】
				alert(i);//输出
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.for...in

for/in语句也使用for关键字，但它和常规的for循环是完全不同的一类循环

格式：for(var 变量 in 数组/对象){被执行的代码块}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for in语句</title>
		<script type="text/javascript">
			var obj = { //对象
				name: "zhnagsan",
				age: 23,
				address: "西安"
			};
			for (var myname in obj) {
				alert(myname); //输出对象中的属性
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.while

while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值

格式：

while(判断条件){

被循环执行的代码

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while 循环</title>
		<script type="text/javascript">
			var i = 1; // 初始条件
			while (i <= 10) {//判断
				alert(i);//输出代码
				i++;//递增
			}
		</script>
	</head>
	<body>
	</body>
</html>

4.do...while

do while语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次

格式：

do{

被循环执行的代码

}while(判断条件);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>do while语句</title>
		<script type="text/javascript">
			var i = 1; // 初始条件
			do {
				alert(i); //执行的代码
				i++; //递增
			} while (i <= 10) //判断
		</script>
	</head>
	<body>
	</body>
</html>

do/while循环和普通的while循环有两点语法方面不同：

　　【1】do/while循环要求必须使用关键字do来标识循环的开始，用while来标识循环的结尾并进入循环条件判断

　　【2】do/while循环用分号结尾。如果while循环体使用花括号括起来，则while循环也不用使用分号做结尾

三.JavaScript 跳转语句

跳转语句(jump statement)可以让解释器跳转到程序的其他部分继续执行，包括break、continue和return语句

1.break语句

单独使用break语句的作用是立即退出最内层的循环或switch语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>break</title>
		<script type="text/javascript">
			for (var i = 1; i <= 10; i++) {//初始值，判断，递增
				alert(i);//执行代码
				if (i == 5) {//当值为5时
					break;//终止
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.continue语句

continue语句和break语句非常类似，但它不是退出循环，而是转而执行下一次循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>continue</title>
		<script type="text/javascript">
			for (var i = 5; i >= 0; i--) {//初始值，判断，递减
				if (i == 2) {//当值为5时
					continue;//终止
				}
				alert(i);//执行代码
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.return语句

函数调用是一种表达式，而所有表达式都有值。函数中的return语句就是指定函数调用后的返回值

四. JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

1.JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>try catch</title>
		<script>
			var txt = "";
			function message() {
				try {
					adddlert("Welcome guest!");
				} catch (err) {
					txt = "本页有一个错误。\n\n";
					txt += "错误描述：" + err.message + "\n\n";
					txt += "点击确定继续。\n\n";
					alert(txt);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="查看消息" onclick="message()" />
	</body>
</html>

2.finally 语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>finally语句</title>
	</head>
	<body>
		<p>不管输入是否正确，输入框都会再输入后清空。</p>
		<p>请输入 5 ~ 10 之间的数字：</p>
		<input id="demo" type="text">
		<button type="button" onclick="myFunction()">点我</button>
		<p id="p01"></p>
		<script>
			function myFunction() {
				var message, x;
				message = document.getElementById("p01");
				message.innerHTML = "";
				x = document.getElementById("demo").value;
				try {
					if (x == "") throw "值是空的";
					if (isNaN(x)) throw "值不是一个数字";
					x = Number(x);
					if (x > 10) throw "太大";
					if (x < 5) throw "太小";
				} catch (err) {
					message.innerHTML = "错误: " + err + ".";
				} finally {
					document.getElementById("demo").value = "";
				}
			}
		</script>
	</body>
</html>

没有输出显示的是：值是空的

输出的不是数字显示：值不是一个数字

输出比5小的，显示的是：太小

输出比10大的，显示的是：太大

3.Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Throw 语句</title>
	</head>
	<body>
		<p>请输出一个 5 到 10 之间的数字:</p>
		<input id="demo" type="text">
		<button type="button" onclick="myFunction()">测试输入</button>
		<p id="message"></p>
		<script>
			function myFunction() {
				var message, x;
				message = document.getElementById("message");
				message.innerHTML = "";
				x = document.getElementById("demo").value;
				try {
					if (x == "") throw "值为空";
					if (isNaN(x)) throw "不是数字";
					x = Number(x);
					if (x < 5) throw "太小";
					if (x > 10) throw "太大";
				} catch (err) {
					message.innerHTML = "错误: " + err;
				}
			}
		</script>
	</body>
</html>

五.JavaScript 变量提升

1.JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量提升</title>
	</head>
	<body>
		<p id="demo"></p>
		<script>
			x = 5; // 变量 x 设置为 5
			elem = document.getElementById("demo"); // 查找元素 
			elem.innerHTML = x; // 在元素中显示 x
			var x; // 声明 x
		</script>
	</body>
</html>

2.JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初始值不会提升</title>
		
	</head>
	<body>
		<p id="demo"></p>
		
		<script type="text/javascript">
			var x = 5; // 初始化 x
			elem = document.getElementById("demo"); // 查找元素
			elem.innerHTML = x + " " + y;           // 显示 x 和 y
			var y = 7; // 初始化 y
		</script>
	</body>
</html>

六.javascript:void(0)

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接</title>
	</head>
	<body>
		<a href="#">空连接</a>
		<a href="javascript:void(0);">死链接</a>
	</body>
</html>

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

WildKingxue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript总结(3)

一.JavaScript条件语句脚本的威力体现在它们可以根据人们给出的各种条件做出决策，javascript使用条件语句来做判断条件语句(conditianal statement)通过判断表达式的值来决定执行还是跳过某些语句，包括if语句和switch语句在 JavaScript 中，我们可使用以下条件语句：if语句：if- 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句- 当条件为 true 时执行代码，当条件为 false 时执行其他代码if.
复制链接

扫一扫