小白学js第四天

流程控制

//语法 

//第一种
 if(条件表达式) {
     执行语句
 }
 
//第二种： 
 if(条件表达式) {
     语句1   //如果条件表达式为true，则执行语句1
 } else {
     语句2   //如果条件表达式为false，则执行语句2
 }
 
 // 第三种
 if（条件表达式）{ //如果条件表达式为true，则执行语句1，//如果条件表达式为false，则判断else if内的条件表达式是否成立，成立则执行相应花括号内的代码，否则一直直接跳到下一个else if，反复判断，直到执行到else结束
     语句1      
 } else if （条件表达式）{
     语句2
 }else if （条件表达式）{
    语句 3
 }else if （条件表达式）{
     语句4
 }else if （条件表达式）{
     语句5
 }else if（条件表达式） {
     语句6
 }else {
     语句7
 }
 
 // 案例
// 判断一个数是偶数还是奇数
		// 
			// var num1 = 5;
			// if( num1 % 2 === 0) {
			// 	console.log('num1是偶数');
			// }else {
			// 	console.log('num1是奇数');
			// }

		// 分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
		var score = 55;
		if (score >= 90){
			console.log('A');
		}else if(score >= 80){
			console.log('B');
		}else if(score >= 70){
			console.log('c');
		}else if(score >= 60){
			console.log('D');
		}else {
			console.log('E');
		}

2.2.2 三元运算符

表达式1 ? 表达式2 : 表达式3
如果表达式1成立则返回表达式2的值否则返回表达式3的值
是对if……else语句的一种简化写法

//案例 
//是否年满18岁
        var age = 18;
		console.log(age >= 18 ? '成年' : '未成年' );
		
		
// 从两个数中找最大值
		 var num1 = 5 ;
		 var num2 = 3;
		 console.log(num1 > num2 ? num1 : num2);

2.2.3 swith 语句

语法格式

	
		switch (expression) {
  			case 常量1:
   				 语句;
   				 break;
  			case 常量2:
   				 语句;
   				 break;
  			case 常量3:
    				语句;
    				break;
  				…
 			case 常量n:
   				 语句;
    				break;
  			default:
    				语句;
    				break;
				}

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

案例

	//显示星期几
   	var day = 1;
   	switch(day) {
   		case 1 :
   			console.log("星期一");
   			break;
   		case 2 :
   			console.log("星期二");
   			break;
   		case 3 :
   			console.log("星期三");
   			break;
   		case 4 :
   			console.log("星期四");
   			break;
   		case 5 :
   			console.log("星期五");
   			break;
   		case 6 :
   			console.log("星期六");
   			break;
   		default: 
   			console.log("星期日");
   	}
   	
   			//素质教育（把分数变成ABCDE）千万不要写100个case哟
   	


   	var score = 100;
   	var num = parseInt(score / 10);
   	switch(num) {
   		case 10 :
   		case 9 :
   			console.log('A');
   			break;
   		case 8 :
   			console.log('B');
   			break;
   		case 7 :
   			console.log('C');
   			break;
   		case 6 :
   			console.log('D');
   			break;
   		default :
   			console.log('E');
   	}

2.4 Boolean的隐式转换结构

流程控制语句会把后面的值隐式转换成布尔类型
转换为true 非空字符串非0数字 true 任何对象
转换成false 空字符串 0 false null undefined

案例

var a = !!'123'; // true

2.3 循环结构

重复做一件事
注意事项：避免死循环

2.3.1 while 循环

语法

	    // 当循环条件为true时，执行循环体，
		// 当循环条件为false时，结束循环。
		while(循环条件) {
			//循环体
		}

案例

        //打印100以内的奇数
		
		
		var i = 0;
		while(i < 101){
			if(i % 2 !== 0) {
				console.log(i);
			}
			i++;
		}
        //打印100以内的奇数的和
		//
		//
		var oddNum = 1;
		var sum = 0;
		while(oddNum < 101){
			if( oddNum % 2 !== 0){
				sum += oddNum;
			}
			oddNum++;
		}
		console.log(sum);

2.3.2 do-while 循环

do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

语法

do {
  // 循环体;
} while (循环条件);

案例

    //求100以内所有3的倍数的和
		var num = 1;
		var sum = 0;
		do {
			if(num % 3 === 0){
				sum += num;
			}
			num++;
		}while(num < 101);
		console.log(sum);
		
		
		
	//使用do-while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为y则打印”我们形影不离“，若输入为n,则继续询问" 
	
	 do {
	 	 var msg = prompt('你爱我吗？','请输入yes or no');
	 } while(msg !== 'yes');
	 console.log('萨拉黑哟');
	</script>
	//prompt('参数1'， '参数2')； 参数1是提示的内容，参数2是输入文本框内提示的内容。

2.3.3 for循环

和whil以及 do-while的区别

一般在循环次数确定的时候使用
while和do-while一半在循环次数不确定的时候使用

语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

初始化表达式
判断表达式
自增表达式
循环体

案例

//打印1-100之间所有数
		//
		for(var i = 0; i <= 100; i++){
			console.log(i);
		}
//求1-100之间所有数的和
		//
		//
		var sum = 0;
		for( var i = 1; i <= 100; i++){
			sum += i;
		}
		console.log(sum);
	//同时求1-100之间所有偶数和奇数的和
		var oddSum = 0;
		var evenSum = 0;
		for( var i = 1; i <= 100; i++){
			if(i % 2 == 0){
				evenSum += i;
			}else {
				oddSum += i;
			}	
		}
		console.log(evenSum);
		console.log(oddSum);
// 打印正方形'
		var str = '';
		//控制行的输出
		for(var i = 0; i < 10; i++){
			//控制一行输出几个
			for(var j = 0; j < 10; j++){
				str += '* ';
			}
			str += '\n';
		}
		console.log(str);
		
// 打印直角三角形
	var str = '';
		//控制行的输出
		 for(var i = 0; i < 10; i++){
			//控制一行输出几个
			for(var j = i; j < 10; j++ ){
				str += '* ';
			}
			// 换行
		 	str += '\n';
		 }
		 console.log(str);
//	//  打印9*9乘法表
		
		var str = '';
		for( var i = 1; i <= 9; i++){
			for(var j = i; j <= 9; j++){
				str += i + '*' + j + '=' + i * j + '\t';
			}
			str += '\n';
		}
		console.log(str);

2.3.4 continue 和 break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
案例


       // 求整数1～ 100 的累加值， 但要求碰到个位为3的数则停止累加
        var sum = 0;
        for (var i = 0; i <= 100; i++) {
            if (i % 10 !== 3) {
                sum += i;
            } else {
                break;
            }
        }
        console.log(sum);
    //求整数1～ 100 的累加值， 但要求跳过所有个位为3的数
        var sum = 0;
        for (var i = 0; i <= 100; i++) {
            if (i % 10 === 3) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

debug

过去调试JavaScript的方式
- alert()
- console.log()
断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

调试步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点--> f5 --> f11

调试中的相关操作

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

posted @ 2019-05-11 15:33 小白学js 阅读(216) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小白学js

小白学js第四天

流程控制

目录

1 表达式和语句

1.1 表达式

1.2 语句

2 流程控制的三大结构

2.1 顺序结构

2.2 分支结构

2.2.1 if 语句

2.2.2 三元运算符

2.2.3 swith 语句

2.4 Boolean的隐式转换结构

2.3 循环结构

2.3.1 while 循环

2.3.2 do-while 循环

2.3.3 for循环

2.3.4 continue 和 break

debug

公告