博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端零基础 JS 教学 第二天 02 - day关系运算符与流程控制循环详细讲解 for switch 等...
阅读量:5906 次
发布时间:2019-06-19

本文共 12209 字,大约阅读时间需要 40 分钟。

第一天js复习:

复习:	1、js简介  		答案:运行在客户端的语言 就是运行在浏览器中的脚本语言,逐行解释,编译语言有编译的过程		答案:发明人:布兰登·艾克	2、js运行原理		答案:js引擎也叫js解释器,转换成二进制,html靠的是排版引擎	3、js有三部分组成		答案:ECMAscript 做出了语法规范数据类型   BOM浏览器对象模型  DOM文档对象模型   很重要	4、js书写的三个位置		答案:行内  内部内嵌,外部 和css相同 	5、变量是什么		答案:变量就是一个盒子存储数据的,实际上是存放在内存区域中	6、变量的声明以及存储		答案:var 变量的声明 使用var num  =10; 声明变量且赋值,叫变量初始化	7、变量的命名规范		答案:不可以使用数字,可以使用$ 字母下划线 ,使用骆驼命名法	8、简单数据类型有哪些		答案:number boolean  String  null nudefined	9、常见的转义字符		答案:外双内单使用引号的时候  转义字符使用\ , 换行\n ,空格\b  tab\t	10、检测数据类型		答案: typeof  typeof null //object	11、数据类型转换、		答案:number  string  boolean			number 类型: Number()数值类型 parseFloat()取浮点 parseInt()取整函数			string 三个 toString()  num.toString()进制转换  String()转换为字符串, + 号转换			boolean :Boolean(1)  !! 1  boolean两种转换方式	12、一元运算符,++前置 和 ++ 后置		答案:一元运算符 !num  num++  ++num 自己进行参与运算的是一元		    :a + b 两个人进行运算是 二元运算符复制代码

小测试: var num = 1; console.log(num++ + 10 + num++);

num++ 是1 + 10 = 11;但是发生变化num++先值运算在自加1 所以变成2所以变成了 11 + 2 = 13 整体是 1 + 10 + 2 = 13复制代码

正课今天讲:

1、运算符下

2、流程控制上 分支结构

3、流程控制下 循环结构

学习目标

学习目标 	 	掌握关系运算符,逻辑运算符,赋值运算符以及运算符优先级	 	if...else 和 switch 分支语句	 	while/do  while/for 三种循环	 	break 和 continue 循环跳出语句	 	双重循环	应用	  能编写一个乘法口诀表复制代码

正课1、 关系运算符 (比较运算符)

概念:关系运算符,两个数据进行比较的运算符,会返回布尔值(true/false)作为比较运算符	运算符名称      说明		案例        结果			 <	     小于号             1 < 2       true	 >	     大于号             2 > 1       true	 >=	    大于等于            2 >= 2      true	 <=	    小于等于            3 <= 2      false	 ==	 等号(会转类型)         2 ==2       true	 !=	     不等号             3 != 2      true	 !==      不全等            2 !== '2'       true	 ====	  全等要求值和数据类型一致  2 === '2' false	 总结:符号		作用		用法=           赋值                 把右边给左边==          判断                 判断两边值是否相等===         全等                 判断两边值和数据类型是否相等复制代码

正课2、 逻辑运算符

概念:逻辑运算符,用来进行两个布尔值运算的,运算符,返回值也是布尔值逻辑运算符		说明			案例&&                   逻辑与简称 与  并且的意思    num1 && num2||                   逻辑或简称 或               num1 || num2!                   逻辑非简称 非               !num1 解答:与 或 非逻辑与 &&: 两边都是true 才返为true   否则返回false逻辑或 ||: 两边都为false 才返为false 否则都为true 只要有一个为真即为true逻辑非  !: 也叫做取反符号,用来取一个布尔值相反的值,如true 的相反是false,false的相反是truedemo: && 并且与    var  res = 2 > 1 && 3 < 5; //需要两边同时为真    console.log(res)  //true         var res = 2 > 1 && 3 < 1 // 两边只有有一个为假false 即为false    console.log(res) //falsedemo: || 或    var res = 2 > 1 || 3 < 5;//只要一个为真 即为true    console.log(res)//true        var res = 2 > 4 || 5 < 4; //只要同时不为真 即为false     console.log(res) //false;    demo: ! 非 取反    var res = !true;    console.log(res); //false    var res = !false;    console.log(res); //true      var res = !19;     console.log(res); //false        var res = !0; //零是false 所有才有非零即真的这一说,所以零取反是true     console.log(res) //true         var res = !''; //字符里面只有''是空所有取反是true    console.log(res) //true        测试:	var  num1 = 7;	var  str = '你好我爱你js';	var res1 = num1 > 5 && str.length >= num1;   //true	var res2 = num1 < 5 && str.length >= num1;  //false	var res3 = !(num1 < 10);    //false	var res4 = !(num1 < 10 && str.length == num1); //false复制代码

赋值运算符

var age =  10; //把10赋值给变量 age 赋值运算符   说明		案例 =		   直接赋值	 var usrName = '我是值';+= 、-=	 加减一个数后在赋值  var age = 10 age += 5 //15 age = age+5*=、/=、%= 乘、除、取模后再赋值  var age  = 2; age *=5 //10 age = age*5复制代码

运算符的优先级

1、() 优先级最高2、一元运算符++ -- !3、算数运算符 先 * / % 后 + - 4、关系运算符 > >= < <=5、相等运算符 ==  != === !==6、逻辑运算符先&& 后||7、赋值运算符规律 :先一元后二元先算数后关系逻辑运算符中 !非权重最高  其实是&&  最后||练习题:4 >= 6 || '人' !='外星人' && !(12*2 == 333) && true 答案:4>=6 false ||答案:人!='外星人' true &&答案:!(12*2 == 333) false 取反变成true &&答案:true 答案:最后为true 因为 先判断&& 最后是|| 有真为true 真var num = 10;5 == num / 2 && (2 + 2* num).toString() === '22';答案是true答案:5 == num / 2 等于5  true 答案:(2 + 2* num).toString() === '22'; 22转换成字符串类型 恒等于 22 字符类型 所以为true var a = 3 > 5 && 2 < 7 && 3 == 4;console.log(a); //false var b = 3 <= 4 || 3 > 1 || 3 !=2 ;console.log(b); //truevar c = 2 === '2';console.log(c);//false var d = !c || b && a;console.log(d); //true复制代码

流程控制 上 分支结构 重点

表达式	表达式由运算符构成,并且产生结果的语法结构	每个表达式都会产生一个值,他可以放在任何需要一个值的地方	语句	语句可以理解为一个行为循环语句和判断语句就是典型的语句	一个程序有很多个语句组成,一般情况下;分号分割一个一个语句复制代码

重点 概念:流程控制分、 顺序结构,分支结构,循环结构三种,代表三种代码执行的顺序

顺序结构:

概念:由上至下的执行代码就是顺序结构var userAge = prompt('请输入您的年龄');var userName = prompt('请输入您的姓名');alert('欢迎您' + userName + '年龄' + username)复制代码

分支结构

概念:由上到下执行代码过程中,根据不同的条件,执行不同的代码共有两种分支结构 if...else 和 switchif...else.. 语句if是如果//条件成立执行代码,否则什么也不做if(条件表达式){    //如果条件成立执行的代码语句}案例://如果年龄满18 就可以进入网吧需要一个判思路 :1、用户输入年龄2、判断是否满足183、满足可以去网吧4、不满足怎么办var userAge = Number(prompt('您的年龄大于18岁可以上网'));if(userAge >= 18){	alert('您今年' + userAge + '岁可以上网了');}alert('您今年' + userAge + '岁现在要好好学习');重点:if...else    如果...否则    只会选择一个进行执行    if(条件表达式){	如果条件成立执行的代码}else{	否则执行的代码}    思路:1、接收用户输入的姓名2、来判断是否中奖3、如果有则返回恭喜中奖4、否则返回没有中奖//判断一个人是中奖根据名字查询如果查询到了中奖,否则不中奖var userName = prompt('请输入名字')if(userName == '张三'){	alert('恭喜你中奖了');}else{	alert('你没有中奖');}案例://能整除4且不能整除100的为闰年(2004年就是闰年,1901年不是闰年);//能够被400 整除的就是润年思路:1、输入年份2、进行闰年判断3、打印出是否属于闰年,是闰年输出啥,不是输出啥// % == 0  var year = Number(prompt('请输入年份'));if(year % 4 == 0 && year % 100 !== 0 || year % 400 == 0){	alert(year + '是闰年');}else{	alert(year + '不是闰年');}重点:if...else..if 语法//适合于检查多重条件if(条件1表达式){	//如果条件1成立执行的代码}else if(条件2表达式){	//否则 如果 条件2成立执行的代码	注释:条件1不成立但是条件2成立}else if(条件3表达式){	//否则 如果条件3成立执行的代码	注释:条件1、2不成立但是条件3成立}else{	//上述条件都不成立执行的代码}案例:要求接受用户输入的分数,根据不同的分数输入出等级字符A,B,C,D,E1、90分含以上输出A2、80分含~90分不含输出B;3、70分含~80分不含输出C;4、60分含~70分不含输出D;5、60分不含输出E;思路:1、输入接受用户输入的值2、进行if..else..if 的判断3、弹出输入数字应得的分数var num = Number(prompt('请输入分数'));if(num >= 90){	alert('1您的得分是' + num + '恭喜您');}else if(num >= 80){	alert('2您的得分是' + num + '恭喜您');}else if(num >=70){	alert('3您的得分是' + num + '恭喜您');}else if(num >=60){	alert('4您的得分是' + num + '恭喜您');}else{	alert('5您的分数是' + num + '得到E')}复制代码

总结: if...else 小结

根据条件不同,有选择地执行,分支结构结束后,会继续执行后续的代码复制代码

三元表达式 ? :

语法 : 表达式1 ? 表达式 2: 表达式3如果表达式1 为真执行返回表达式2的值 表达式为假返回表达式3的值三元表达式就if...else 的简洁的写法var num = 3 > 5 ? 3 : 5;  console.log(num); // 5console.log(3 > 5 ? 3 +1 : 5 + 1); //6上面这样写也是可以的因为是返回他们的值	if(3 > 5){	console.log(3);}else{	console.log(5);}复制代码

switch case 结构

当要针对变量多种不通知执行不同的代码,就可以使用switch

switch 开关的意思 转换 case 案例

语法:使用结构表达式的值各个case 中的值进行相等比较

switch(变量){		case : value:		//表达式结果等于value 1时 要执行的代码		break;		case  : value:		//表达式结果等于value 2时 要执行的代码		break;		default:		//表达式结构不等于任何一个value 时要执行的代码	}	使用switch 小案例:var num = prompt('请输入喜爱的水果');switch(num){	case '苹果':		alert('您喜欢吃' + num);	break; //一定要添加break 不然会有穿透效果	case '香蕉':		alert('您喜欢吃' + num);	break;	case '草莓':		alert('您喜欢吃' + num);	break;	default:  //默认的上面都找不到		alert('没有你爱吃的' + num);	break;}执行顺序1、先从变量中获取一个值随后表达式的值会与结构中的每个case 值做比较2、如果存在匹配全等=== 即变量值 === value 值 则与该case关联的代码块会被执行,并且在遇到break 时停止,整个switch 代码执行结束3、如果所有的case的值都和表达之不匹配则执行default里的代码4、我们case后面的值通常都是一个常量细节:breack是跳出switch 的作用注意变量的字符类型复制代码

switch 与 if 对比

switch...case通常处理case为常量的情况,而if...else更加灵活有范围当只有分支比较少的时候if效率比switch高switch进行一次条件判断后直接执行到程序的条件语句而if..else有几种条件,就得判断多少次分支比较多是switch的效率比较高,而且结构更清晰复制代码

循环结构

循环:围着操场重复的跑圈就是循环js中的循环:一段代码重复的执行三种循环结构: while  do...while  for 三个关键: 计数器 判断条件 计数器自增重点学:for 循环 存在即合理复制代码

while 循环

//条件表达式为true 时重复执行循环体代码

//条件表达式为false退出循环

while(条件表达式){	//循环体代码}执行顺序:先执行条件表达式如果为false 则退出循环如果为true 则执行循环体代码,紧接着执行循环条件表达式,要是一直执行true 就会变成死循环案例: var num = 1;while( num <= 10){		/*console.log('您好');	num++; 这里是自增条件 	*/	console.log('您好'+ num++); //我这里吧自增条件放到打印的控制器里面	// console.log('hi~你好么么哒') 千万不要这么写会造成死循环}解答:1、var age = 1;while (age <= 18) {	console.log('哎呀每年都增加了'+ age +'岁啊')	age ++;}解答: while 循环 需要一个循环条件 age  < 18 然后输出循环体 然后需要循环条件 到多少案例:1、 用户输入一个年龄打印年龄  var userAge = prompt('年龄');  var age = 1; while(age <= userAge){	console.log('这个人多少'+age+'岁了');    age ++;      }  案例:2、    计算1~100之间所有数的和     思路:	1、需要2个变量 一个自增,还需要一个保存结果值的		var i = 1; //自增	var sum = 0; //保存结果的盒子	while(i <= 100){		sum =  sum + i;		//也可以简写 sun+=i;		i++;	}// 解答:代码从上面执行,i=1,1<=100执行下面sum 这句话 sum等于0  加1 赋值给sum 所以 sum 等于1 然后i++复制代码

while 总结

while 语句就是当条件满足时重复执行相同的代码无论是循环结构还是分支结构,在执行完毕后,都会执行后续代码;在循环体内部,需要修改有循环条件否则会造成死循环 重点是死循环造成了很不友好复制代码

我是:我想静静 看大家的反馈说少练习所以给大家一些练习题目,思路自己想,需要我解答的留言给我会在留言中解答:

练习题:1、打印100以内的奇数2、打印100以内的奇数的和复制代码

断点调试:断点调试教程

do...while 循环

语法:do{	//do是做	//循环体代码,条件表达式为true 时重复执行循环体代码 	//do...while 至少做一次}while(条件表达式)//计数器  计数器自增   判断条件//var  i = 1;  //计数器 // 计数器 计数器自增 判断条件   var i = 1; //计数器   do{  //1、do首先打印出 要好好理解js 然后 执行   	 console.log('要好好理解js'+i);   	 i++; //2、然后i++ 2 <= 5然后继续回到do 里面继续打印   } while(i <= 5)重点:区别do...while 与 while 至少do..while 至少会执行一次为什么这么说呢请看案例    var  i= 1;  do{  	console.log('学习时候要专注'+ i);  	// 这时候你就会发现 i>=5不满足判断条件但是也是会执行一次  	// 再次真香警告 很重要 判断三个条件  1、计数器 2、计数器自增 3、判断条件  	i++;  } while(i >= 5); 案例:    使用do...while循环:输出你喜欢我吗?(y/n):直到输出了y退出否则继续询问    思路:     1、用户输入 (y/n     2、判断是y退出循环不是一直循环使用do...whiledo{	var user = prompt('你喜欢我吗?你的答案是y与n');	// 只要用户输入的不是y就一直循环 要是满足条件就退出循环} while( user !== 'y');alert('我也喜欢你呢');复制代码

do...while小结

do...while循环和while循环非常像,二者经常可以相互替代,但do...while的特点是不管条件是否成立都执行一次do...while语句就会先执行一遍,后面才根据条件是否满足决定执行次数和while循环一样,在循环内部,需要修改循环条件,否则会造成死循环do{ 	// do先写 一个花括号 然后 while 然后是括号 }	while()复制代码

for循环

//for循环一般用来根据次数循环 for(初始化,条件表达式,自增表达式){	循环体}for(  1、 var i=0;  2、 i< 10;  4、 i++){             3、	console.log( i );}这里标注了1、2、3、4、看执行顺序for(var i = 1; i <= 10; i++){	console.log(i);	// 记住初始化 var i =1;在for 里面只会执行一次	// 先判断在执行 i< =10 执行 console.log(i); 然后在执行i++;	//可以通过断点进行查看执行顺序}执行顺序 	1、初始化	2、条件表达式 ->3循环体 ->4自增表达式	之后一直执行234 知道条件表达式为false才结束循环案例:    求1~100之间所有偶数的和    console.log(undefined+ 10) //打印出NaN 不是一个数字    // 不可以var sum;这样声明 因为会输出 undefined     	var sum = 0;	for(var i=0 ; i <= 100; i++){		if( i % 2 ==0){			sum+=i;			// sum = sum + i; 以后我尽量使用简写方式		}	}	console.log(sum);案例: 求输出一个人1到100岁  for(var i=1; i <= 100; i++){	if(i == 1){		console.log('这个人' + i + '岁出生了');	}else if(i == 100){		console.log('这个人' + i + '他死了');	}else{		console.log('这个人' + i + '岁了')	}}复制代码

双重for循环 重点

双重for 循环	for(外循环的初始化,外循环的条件,外循环的增量){		for(内循环的初始化,内循环的条件,内循环的增量){				需要执行的代码		}	}重点:双重for循环外面负责行 一行两行的行 外面执行一次里面执行相应的次数	for(var i = 1; i <= 3; i++){	// 外层 i = 1的时候执行一次 里面for执行三次 所有 一共执行了 9次	for(var j =1; j <=3; j++){		console.log('你好');	}}案例:	使用for 循环打印三个星星	var str = ''; //空字符串// 外层for 负责可以打印3行高 for(var i=1; i<=3; i++){	//str +='?'; //简写	// str = str + '?';	// 里面的for 负责的是 一行打印3个星星	for(var j=1; j<=3;j++){		str += '?';	}	str +='\n';}console.log(str);案例:    使用for 循环打印倒三角    	var str = '';	for(var i=1; i<=9;i++){		for(var j=1; j<= 10 - i; j++){			str+='?';		}		str+='\n';	}	console.log(str);	// 解答: 外层for 循环负责第一行里面的行 ,里面的for 负责一行里面有几个星星            //第二种算法    var str = '';    for(var i=1; i<=9; i++){    	for(var j=i; j<=9;j++){    		str+='?';    	}    	str +='\n';    }    console.log(str);// 解答: 从行数开始 i= 1;打印出9个,2打印出8个,3打印出7个,所以把内层for循环j从i开始计算     j的启始值从行数开始到9就是打印的个数// 解答:外层for 循环负责行数 里面for循环执行若干次   案例:    使用for 循环打印99乘法表var str = '';// 外层for 负责可以打印 i 行数for(var i=1; i<=9;i++){	// 里面的for 负责的是 一行 j 一行内的个数 	for(var j=1; j<=i; j++){		// 首先i等于1 j = 1  1<=1吗? 等于 输出 ,第二次输出		1<=2?小于输出然后j++然后j<=2小于等于 输出 		str +='?';			总结: 我的个数永远比行数小 ,谁管行数i 谁管理个数呢j 所以 j永远小于i	}	str +='\n';}console.log(str);打印99乘法表var str = '';for(var i=1; i<=9; i++){	for(var j=1; j<=i; j++){		// str +='?';		// 1 * 1 = 1;		str+= j + '*' + i + '=' + j*i + '\t';		//这里不要忘记str+=	}	str +='\n';}console.log(str);// 解答:我们的一行的个数永远比行数小 最核心语句 var j=1; j <= i; j++复制代码

练习题: 计算1-100之间能被三整除的数的和 使用for 循环

continue 与break 的区别

continue 跳出本次循环 概念:立即跳出本次循环继续下一次循环,比如吃苹果一共五个 吃到第三个苹果发现有虫子扔掉继续吃这是continue直到吃完五个苹果为止 案例:for(var i=1; i<=5;i++){	if( i== 2){		console.log('哎呀苹果里面有虫子不能吃了'+ i +'扔掉了');		continue;	}	console.log('我继续吃苹果'+i)}复制代码

break 退出整个循环

概念:理解跳出整个循环开始执行循环后面的代码,比如吃苹果一共五个 吃到第三个苹果发现有虫子后面的都不吃了这就是breakfor(var i=1; i<=5;i++){	if( i== 2){		console.log('哎呀苹果里面有虫子不能吃了'+ i +'扔掉了');		break;	}	console.log('我继续吃苹果'+i)}break 是退出整个for循环 跟switch 是相同的 复制代码

练习:

简易ATM机器 思路:里面现存有100块钱 如果存钱就用加现在有的钱 如果取钱就取现有的钱 查勘余额就显示余额 退出就退出循环

版本v1.

var num = 100;    	var resut =  Number(prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出'))    	switch (resut) {    		case 1:    			var num1 = Number(prompt('请输入您要存入的金额'));    			num += num1;    			alert('您存入的金额是' + num);    			break;    		case 2:    			var num2 = Number(prompt('请您输入您要取出的金额'));    			num -=num2;    			alert('您取出的金额是' + num);    			break;    		case 3:    			alert('您现在的余额是' + num);    			break;    		case 4:    			break;    		default:    			 alert('您输入的有误请重新输入');    			break;    	}补充:里面少了一个很重要的功能 看看看你们能否找到并且补充上,是今天学的一个循环,只能告诉你们这个多了代码除了敲理解外没有别的办法外物了加油! 复制代码

转载于:https://juejin.im/post/5c5bfe3a6fb9a04a027ace81

你可能感兴趣的文章
raspi-config Expand root partition to fill SD card 原理
查看>>
maven generating project in batch mode hang
查看>>
Excel与XML相互转换 - C# 简单实现方案
查看>>
远程通信的几种选择(RPC,Webservice,RMI,JMS的区别)
查看>>
基础二:javascript面向对象、创建对象、原型和继承总结(下)
查看>>
360. Sort Transformed Array
查看>>
docker使用流程
查看>>
一次解决OOM的经历
查看>>
JavaScript闭包
查看>>
樹莓派初始化安裝配置筆記
查看>>
TouchID本地身份验证
查看>>
android:launchMode小分析
查看>>
大转变,苹果或于明年推出使用 ARM 芯片的 Mac
查看>>
Docker 容器与主机时间同步
查看>>
爬虫基础-http请求的基础知识
查看>>
第十六章:数据绑定(三)
查看>>
antiX 17.4 发布,轻量级 Linux 发行版
查看>>
Java高并发秒杀Api-web 层
查看>>
全网互联之高速通道
查看>>
JVM GC杂谈之理论入门
查看>>