JS-语句

尚硅谷JavaScript高级教程(javascript实战进阶)

个人认为Java或C++有一定基础学这个的基础知识很舒服。

JS-语句

1. 代码块

<script type="text/javascript">
			
			/*
			 * 我们的程序是由一条一条语句构成的
			 * 	语句是按照自上向下的顺序一条一条执行的
			 * 	在JS中可以使用{}来为语句进行分组,
			 * 		同一个{}中的语句我们称为是一组语句，
			 * 		它们要么都执行，要么都不执行，
			 * 		一个{}中的语句我们也称为叫一个代码块
			 * 		在代码块的后边就不用再编写;了
			 * 
			 * 	JS中的代码块，只具有分组的的作用，没有其他的用途
			 * 		代码块内容的内容，在外部是完全可见的
			 */
			{
				var a = 10;	
				alert("hello");
				console.log("你好");
				document.write("语句");
			}
		
			console.log("a = "+a);
		
</script>

2. 流程控制语句

2.1 条件判断语句

2.1.1 if语句

<script type="text/javascript">
			
			/*
			 * 流程控制语句
			 * 	- JS中的程序是从上到下一行一行执行的
			 * 	- 通过流程控制语句可以控制程序执行流程，
			 * 		使程序可以根据一定的条件来选择执行
			 *  - 语句的分类：
			 * 		1.条件判断语句
			 * 		2.条件分支语句
			 * 		3.循环语句
			 * 
			 * 
			 * 条件判断语句：
			 * 	- 使用条件判断语句可以在执行某个语句之前进行判断，
			 * 		如果条件成立才会执行语句，条件不成立则语句不执行。
			 *  - if语句
			 * 	- 语法一：
			 * 		if(条件表达式){
			 * 			语句...
			 * 		}
			 * 			
			 * 		if语句在执行时，会先对条件表达式进行求值判断，
			 * 		如果条件表达式的值为true，则执行if后的语句，
			 * 		如果条件表达式的值为false，则不会执行if后的语句。
			 * 			if语句只能控制紧随其后的那个语句,
			 * 				如果希望if语句可以控制多条语句，
			 * 				可以将这些语句统一放到代码块中
			 * 			if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
			 * 			
			 */
			
			var a = 25;
			
			if(a > 10 && a <= 20){
				alert("a大于10，并且 a小于等于20");
			}		
</script>

2.1.2 if(){}else{}语句

/*
			 * if语句
			 * 	语法二:
			 * 		if(条件表达式){
			 * 			语句...
			 * 		}else{
			 * 			语句...
			 * 		}
			 * 
			 * 	if...else...语句
			 * 		当该语句执行时，会先对if后的条件表达式进行求值判断，
			 * 			如果该值为true，则执行if后的语句
			 * 			如果该值为false，则执行else后的语句
			 * 
			 * 	语法三：
			 * 		if(条件表达式){
			 * 			语句...
			 * 		}else if(条件表达式){
			 * 			语句...
			 * 		}else if(条件表达式){
			 * 			语句...
			 * 		}else{
			 * 			语句...
			 * 		}
			 * 
			 * 		if...else if...else
			 * 			当该语句执行时，会从上到下依次对条件表达式进行求值判断
			 * 			如果值为true，则执行当前语句。
			 * 			如果值为false，则继续向下判断。
			 * 			如果所有的条件都不满足，则执行最后一个else后的语句
			 * 			该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
			 */
			
			var age = 50;
			
			/*if(age >= 60){
				alert("你已经退休了~~");
			}else{
				alert("你还没退休~~~");
			}*/
			
			age = 200;
			
			/*if(age > 100){
				alert("活着挺没意思的~~");
			}else if(age > 80){
				alert("你也老大不小的了~~");	
			}else if(age > 60){
				alert("你也退休了~~");
			}else if(age > 30){
				alert("你已经中年了~~");
			}else if(age > 17){
				alert("你已经成年了");
			}else{
				alert("你还是个小孩子~~");
			}*/
			
			age = 90;
			
			if(age > 17 && age <= 30){
				alert("你已经成年了");
			}else if(age > 30 && age <= 60){
				alert("你已经中年了");
			}else if(age > 60 && age <= 80){
				alert("你已经退休了");
			}else{
				alert("你岁数挺大的了~~");
			}
</script>

2.2 条件分支语句

<script type="text/javascript">
			/*
			 * 条件分支语句也叫switch语句
			 * 	语法：
			 * 		switch(条件表达式){
			 * 			case 表达式:
			 * 				语句...
			 * 				break;
			 *  		case 表达式:
			 * 				语句...
			 * 				break;
			 * 			default:
			 * 				语句...
			 * 				break;
			 * 		}
			 * 
			 * 	执行流程：
			 * 		switch...case..语句
			 * 		在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
			 * 			如果比较结果为true，则从当前case处开始执行代码。
			 * 				当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
			 * 				这样可以确保只会执行当前case后的语句，而不会执行其他的case
			 * 			如果比较结果为false，则继续向下比较
			 * 			如果所有的比较结果都为false，则只执行default后的语句
			 * 
			 * 	switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，
			 * 		同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
			 */
			
			//根据num的值，输出对应的中文
			
			var num = 3;
			
			/*if(num == 1){
				console.log("壹");
			}else if(num == 2){
				console.log("贰");
			}else if(num == 3){
				console.log("叁");
			}*/
			
			num = "hello";
			
			switch(num){
				case 1:
					console.log("壹");
					//使用break可以来退出switch语句
					break;
				case 2:
					console.log("贰");
					break;
				case 3:
					console.log("叁");
					break;
				default:
					console.log("非法数字~~");
					break;
			}
</script>

JS中switch的特例

对于成绩大于60分的，输出’合格’。低于60分的，输出’不合格’

switch(true){
    case score >= 60:
    console.log("合格");
    break;
    default:
    console.log("不合格");
    break;
}

2.3 循环语句

2.3.1 while和do…while

<script type="text/javascript">
			
			
			/*
			 * 向页面中输出连续的数字
			 */
			/*var n = 1;
			document.write(n++ +"<br />");*/
			
			/*
			 * 循环语句：
			 * 	通过循环语句可以反复的执行一段代码多次
			 * 
			 * while循环
			 * 	- 语法：
			 * 		while(条件表达式){
			 * 			语句...
			 * 		}
			 * 
			 * 	- while语句在执行时，
			 * 		先对条件表达式进行求值判断，
			 * 			如果值为true，则执行循环体，
			 * 				循环体执行完毕以后，继续对表达式进行判断
			 * 				如果为true，则继续执行循环体，以此类推
			 * 			如果值为false，则终止循环
			 * 
			 * do...while循环
			 * 	- 语法：
			 * 		do{
			 * 			语句...
			 * 		}while(条件表达式)
			 * 
			 * 	- 执行流程：
			 * 		do...while语句在执行时，会先执行循环体，
			 * 			循环体执行完毕以后，在对while后的条件表达式进行判断，
			 * 			如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
			 * 			如果结果为false，则终止循环
			 * 
			 * 		实际上这两个语句功能类似，不同的是while是先判断后执行，
			 * 			而do...while会先执行后判断，
			 * 		do...while可以保证循环体至少执行一次，
			 * 			而while不能
			 */
			var n = 1;
			
			//向这种将条件表达式写死为true的循环，叫做死循环
			//该循环不会停止，除非浏览器关闭，死循环在开发中慎用
			//可以使用break，来终止循环
			/*while(true){
				alert(n++);
				
				//判断n是否是10
				if(n == 10){
					//退出循环
					break;
				}
				
			}*/
			
			//创建一个循环，往往需要三个步骤
			
			//1.创初始化一个变量
			var i = 11;
			
			//2.在循环中设置一个条件表达式
			/*while(i <= 10){
				//3.定义一个更新表达式，每次更新初始化变量
				document.write(i++ +"<br />")
				
			}*/
			
			/*do{
				document.write(i++ +"<br />");
			}while(i <= 10);*/
			
			/*while(true){
				alert(1);
			}*/
			
</script>

2.3.2 if和while的结合

<script type="text/javascript">
			/*
			 * 	从键盘输入小明的期末成绩:
			 *	当成绩为100时，'奖励一辆BMW'
			 *	当成绩为[80-99]时，'奖励一台iphone15s'
			 *	当成绩为[60-80]时，'奖励一本参考书'
			 *	其他时，什么奖励也没有
			 */
			
			/*
			 * prompt()可以弹出一个提示框，该提示框中会带有一个文本框，
			 * 	用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
			 * 	该字符串将会作为提示框的提示文字
			 * 
			 * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
			 */
			//将prompt放入到一个循环中
			while(true){
				//score就是小明的期末成绩
				var score = prompt("请输入小明的期末成绩(0-100):");
				//判断用户输入的值是否合法
				if(score >= 0 && score <= 100){
					//满足该条件则证明用户的输入合法，退出循环
					break;
				}
				
				alert("请输入有效的分数！！！");
			}
			
			
			
			//判断值是否合法
			if(score > 100 || score < 0 || isNaN(score)){
				alert("拉出去毙了~~~");
			}else{
				//根据score的值来决定给小明什么奖励
				if(score == 100){
					//奖励一台宝马
					alert("宝马，拿去~~~");
				}else if(score >= 80){
					//奖励一个手机
					alert("手机，拿去玩~~~");
				}else if(score >= 60){
					//奖励一本参考书
					alert("参考书，拿去看~~~");
				}else{
					alert("棍子一根~~");
				}
			}
</script>

2.3.3 for循环

<script type="text/javascript">
        /*
         * for语句，也是一个循环语句，也称为for循环
         * 	在for循环中，为我们提供了专门的位置用来放三个表达式：
         * 		1.初始化表达式
         * 		2.条件表达式
         * 		3.更新表达式
         *
         *  for循环的语法：
         * 		for(①初始化表达式;②条件表达式;④更新表达式){
         * 			③语句...
         * 		}
         *
         * 		for循环的执行流程：
         * 			①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
         * 			②执行条件表达式，判断是否执行循环。
         * 				如果为true，则执行循环③
         * 				如果为false，终止循环
         * 			④执行更新表达式，更新表达式执行完毕继续重复②
         */

        //创建一个执行10次的while循环
        //初始化表达式
        /*var i = 0;
			
			//创建一个循环，定义条件表达式
			while(i < 10){
				//设置更新表达式
				alert(i++);
			}*/

        for (var i = 0; i < 10; i++) {
            alert(i);
        }

        /*
			 * for循环中的三个部分都可以省略，也可以写在外部
			 * 	如果在for循环中不写任何的表达式，只写两个;
			 * 	此时循环是一个死循环会一直执行下去，慎用
			 * 	for(;;){
					alert("hello");
				}
			 */
 </script>

2.3.4 质数练习

在页面中接收一个用户输入的数字，并判断该数是否是质数。 质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。

<script>
   		while (true) {
            var num = prompt("请输入一个大于1的整数：");
            if (num <= 1 || isNaN(num)) {
                alert("输入的值不合法！请重新输入！");
            } else {
                break;
            }
        }

        var flag = true; //循环开关

        //遍历2到数字本身-1
        for (var i = 2; i < num; i++) {
            if (num % i == 0) {
                flag = false;
            }
        }

        if (flag) {
            alert(num + "是质数！");
        } else {
            alert(num + "不是质数！");
        }
 </script>

2.3.5 break和continue

<script type="text/javascript">
			
			/*
			 * break关键字可以用来退出switch或循环语句
			 * 	不能在if语句中使用break和continue
			 * 	break关键字，会立即终止离他最近的那个循环语句
			 */
			
			/*for(var i=0 ; i<5 ; i++){
				console.log(i);
				
				if(i == 2){
					break;
				}
				
			}*/
			
			
			/*for(var i=0 ; i<5 ; i++){
				console.log("@外层循环"+i)
				for(var j=0 ; j<5; j++){
					break;
					console.log("内层循环:"+j);
				}
			}*/
			
			
			/*
			 * 可以为循环语句创建一个label，来标识当前的循环
			 * label:循环语句
			 * 使用break语句时，可以在break后跟着一个label，
			 * 	这样break将会结束指定的循环，而不是最近的
			 */
			
			/*outer:
			for(var i=0 ; i<5 ; i++){
				console.log("@外层循环"+i)
				for(var j=0 ; j<5; j++){
					break outer;
					console.log("内层循环:"+j);
				}
			}*/
			
			
			/*
			 * continue关键字可以用来跳过当次循环
			 * 	同样continue也是默认只会对离他最近的循环循环起作用
			 */
			/*for(var i=0 ; i<5 ; i++){
				
				if(i==2){
					continue;
				}
				
				console.log(i);
			}*/
			
			outer:
			for(var i=0 ; i<5 ; i++){
				
				for(var j=0 ; j<5 ; j++){
					
					continue;
					
					console.log("-->"+j);
					
				}
				
				console.log("@--->"+i);
			}
</script>

3. 质数练习题的优化

<script type="text/javascript">
			//测试如下的程序的性能
			//在程序执行前，开启计时器
			//console.time("计时器的名字")可以用来开启一个计时器
			//它需要一个字符串作为参数，这个字符串将会作为计时器的标识
			console.time("test");
			
			//打印2-100之间所有的数
			for(var i=2 ; i<=100000 ; i++){
				var flag = true;
				
				for(var j=2 ; j<=Math.sqrt(i) ; j++){
					if(i%j == 0){
						//如果进入判断则证明i不是质数,修改flag值为false
						flag = false;
						//一旦进入判断，则证明i不可能是质数了，此时循环再执行已经没有任何意义了
						//使用break来结束循环
						break;
						
						//不加break 215ms
						//加break 25ms
						//修改j<=后 2.6
					}
				}
				//如果是质数，则打印i的值
				if(flag){
					//console.log(i);
				}
			}
			
			//终止计时器
			//console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数
			console.timeEnd("test");
			
			/*
			 * 36
			 * 1 36
			 * 2 18
			 * 3 12
			 * 4 9
			 * 6 6
			 */
			
			//可以通过Math.sqrt()对一个数进行开方
			//var result = Math.sqrt(97);
			
			//console.log("result = "+result)
</script>

4. 思维导图