js三元运算符_JavaScript前端基础学习十二(全,文末另附有css及js学习链接)

最新推荐文章于 2023-05-31 11:49:30 发布

weixin_39811842

最新推荐文章于 2023-05-31 11:49:30 发布

阅读量337

点赞数

文章标签： js三元运算符

JavaScript基础入门

一、上次课知识复习

1.1 题目

1.2 补充的题目

1.3 运算符的复习

二、条件分支语句

2.1 if……else……

2.2 switch case语句

2.3 三元运算符

三、循环语句

3.1 for循环语句

3.2 穷举思想

一、复习

1.1 测验题目

//第一步，用户输入两个数字

1.2 补充的题目

第1题：用户输入一个数字，然后判断这个数字能否被5、6整除的情况。

解决一个事情，如何判断a是否能被5整除？

a % 5 == 0

如果是真，那么就表示a能够被5整除。否则，不能的。

//用户输入一个数字，然后判断这个数字能否被5、6整除的情况

第2题：用户输入一个数字，然后再输入一个数字，判断两者的奇偶性是否相同。

解决一个事情，如果判断奇数还是偶数？

a % 2 == 0

结果是真，a就是偶数。

还有一种方法：

a / 2 == parseInt(a / 2)

结果是真，a就是偶数

方法1：

这个题目的目的，是为了让大家练习复杂的“与、或”逻辑

if(a % 2 == 0 && b % 2 == 0 || a % 2 != 0 && b % 2 != 0){
	alert("这两个数字的奇偶性相同");
}else{
	alert("这两个数字的奇偶性不同");
}

方法2：

如果a除以2的余数，等于b除以2的余数，那么两个数字同奇同偶

if(a % 2 == b % 2){
	alert("这两个数字的奇偶性相同");
}else{
	alert("这两个数字的奇偶性不同");
}

方法3：

我们发现，偶数+偶数结果是偶数。偶数+奇数结果是奇数，奇数加奇数结果是偶数。

所以，两个数字相加，如果得到偶数，那么这两个数字同奇同偶。

if((a + b) % 2 == 0){
	alert("这两个数字的奇偶性相同");
}else{
	alert("这两个数字的奇偶性不同");
}

方法越来越简单，告诉我们一个道理：

算法为王！

第3题：计算是否是闰年。

闰年判断规则：

如果这一年是100的整数倍，就是年份以00结尾的，那么除以400，整除就是闰年，有余数不是闰年；

如果这一年不是100的整数倍，那么除以4，整除就是闰年，有余数不是闰年。

方法1：

根据我们的题面的意思，分成两个大类；先判断是否是100的整数倍，然后分别进行判断。

伪代码：

if(这一年是100的整数倍){
 if(年份除以400能整除){
		alert("是闰年");
	}else{
		alert("不是闰年");
	}
}else{
 //这年不是100的整数倍
 if(年份除以4能整除){
		alert("是闰年");
	}else{
		alert("不是闰年");
	}
}

方法2：

利用巧妙算法，连续书写“与”、“非”逻辑

如果（年份是100的整数倍并且能被400整除）或者（不能被100整除且能被4整除的年份），就是闰年。

if(year % 100 == 0 && year % 400 == 0 || year % 100 != 0 && year % 4 == 0){
	alert("是闰年");
}else{
	alert("不是闰年");
}

这里可以用一个布尔公式：(a && b) || (a && c) 等价于 a && (b || c) 简化

第4题：年终奖的计算

某个公司要给员工发年终奖，为了奖励老员工，所以工作时间越长，发的越多，规则如下：

工作满0年发月薪的1倍月薪年终奖，如果月薪大于8000，那么就是发1.2倍

工作满1年发月薪的1.5倍月薪年终奖，如果月薪大于10000，那么就是发1.7倍

工作满2年，甚至更多发月薪的3倍月薪年终奖，如果月薪大于12000，那么就是发3.2倍

用JS编写程序，让用户输入工作了几年，可以输入0，然后输入月薪。然后算年终奖。

		if(year == 0){
			//工作0年的
			if(salary > 8000){
				xishu = 1.2;
			}else{
				xishu = 1.0;
			}
		}else if(year == 1){
			//工作1年的
			if(salary > 10000){
				xishu = 1.7;
			}else{
				xishu = 1.5;
			}
		}else{
			//工作2年的
			if(salary > 12000){
				xishu = 3.2;
			}else{
				xishu = 3;
			}
		}
        alert(xishu * salary);

1.3 运算符的复习

就不写为什么了，直接快速说答案：

1 + 2 * 6 % 3   // 1
false + true * null   // 0
6 + undefined  // NaN  只要undefined参与运算结果都是NaN
0 / 0    // NaN
6 / 0    // Infinity
Infinity - Infinity    // NaN

5 == "5"   // true
5 === "5"  // false === 全等会判断类型
5 != "5"  // false 
5 !== "5"  // true
"66" < "8"    // true 比较的是字符编码
66 < "8"     // false 字符串隐式转换成了数字
"66" < 8    // false
false == 0   // true
true == 1    // true
NaN == NaN   // false
NaN != NaN   // true
null == 0   //false , 因为null是一个对象，引用类型值，和基本类型值比，这个你着重记忆一下。
3 > 2 > 1  // false  不要这么写

false || true && !!!false    // true
false && 8   // false
3 && 4     // 4
"" && 6    // ""
6 && undefined   // undefined
null && undefined  // null
3 || 4    // 3
"" || 18  // 18

var a = 1;          
var b = a++;       //  ++在a后面，先把a的值拿出来计算，然后再自加，b=1，a=2
a += ++b;          // ++在b前面，会先把b进行自加，然后再把b拿来计算 b=2，a=2+2=4
console.log(a);    // 4
console.log(b);    // 2

下面这个很难：

var a = 3;                
console.log(a++ + a++);       //  7                
console.log(a);         // 5

var a = 3;
console.log(a++ + ++a);  // 8
console.log(a);           // 5

综合顺序：贴身的、数学、关系、逻辑、赋值

var a = 4;
1 && 2 + 3 * a++ % 5 || 6 > 7 == 8 / !false

解：原式 = 1 && 2 + 3 * a++ % 5 || 6 > 7 == 8 / !false

= 1 && 2 + 3 * 4 % 5 || 6 > 7 == 8 / true 先算贴身的

= 1 && 2 + 2 || 6 > 7 == 8 算数学的

= 1 && 4 || 6 > 7 == 8 算数学的

= 1 && 4 || false == 8 算关系的

= 1 && 4 || false 算关系的

= 4 || false 算逻辑的

= 4 算逻辑的

二、条件分支语句

条件分支语句，也叫作条件判断语句，就是根据某种条件执行某些语句，不执行某些语句。

JS中有三种语法是可以表示条件分支的

2.1 if……else……

条件分支的主力语法，这个主力语法能够书写所有的条件分支语句。也就是说，一会儿我们学switch case语句，switch case语句能干的，if else语句一定也能干。

上一篇已经讲过了，复习一下：

标准的完整结构：

if(){
 
}else if(){
 
}else if(){
 
}else{
 
}

else只能有一个，并且一定要放在最后。表示所有的分支都不满足的时候执行的事情。

可以没有else：

if(){
 
}else if(){
 
}else if(){
 
}

可以没有分支：

if(){
 
}

if(8 > 5){
	console.log("哈哈");
}
console.log("嘻嘻");   //这行语句不在if里，所以不管if成功没有，都执行

如果只有一行语句，那么就可以省略大括号(不推荐)：

if(8 > 15)
	console.log("哈哈");
console.log("嘻嘻");

var a = 4;
if(a < 8){
	a++;    //a变为5，然后跳楼，不会进行下面的a==5的比较了
}else if(a == 5){
	a++;
}
console.log(a);  //5

2.2 switch case语句

先来看一个简单的例子：

switch(xingzuo){
 case "白羊座" :
		alert("今天要注意调整自己的状态，有些人的睡眠质量比较差");
 break;
 case "金牛座" :
		alert("今天会在感情方面遇到一些小小的问题");
 break;
 case "双子座" :
		alert("要做好心理准备会在工作上被他人挑剔找茬，这是你避免不了的事情");
 break;
 case "巨蟹座":
		alert("工作上要打醒十二分精神，要不然很大可能会经常要返工哦");
 break;
 case "狮子座":
		alert("恋爱中的人今天的心有点摇摆不定，有人可能会有精神上的出轨");
 break;
 default :
		alert("对不起，我们没有收录你的星座运势！");
 break;
}

语法：

switch(待检测值){
 case 值1 :
		值1 与 待检测值 相同时做的事情
 break;
 case 值2 :
		值2 与 待检测值 相同时做的事情
 break;
 case 值3 :
		值3 与 待检测值 相同时做的事情
 break;
 default :
  默认要做的
 break;
}

switch case语句的哲学是什么？存在的意义，简化了if……else……的书写：

你会发现，下面的if语句的分支中，都是在判断xingzuo是不是和某一个字符串相等，显得臃肿：

		if(xingzuo == "白羊座"){
			alert("今天要注意调整自己的状态，有些人的睡眠质量比较差");
		}else if(xingzuo == "金牛座"){
			alert("今天会在感情方面遇到一些小小的问题");
		}else if(xingzuo == "双子座"){
			alert("要做好心理准备会在工作上被他人挑剔找茬，这是你避免不了的事情");
		}else if(xingzuo == "巨蟹座"){
			alert("工作上要打醒十二分精神，要不然很大可能会经常要返工哦");
		}else if(xingzuo == "狮子座"){
			alert("恋爱中的人今天的心有点摇摆不定，有人可能会有精神上的出轨");
		}else{
			alert("对不起，我们没有收录你的星座运势！");
		}

所以，这种要将变量依次和不同的值比较，区分情况的时候，用switch case语句。

比较一下：

我们经过测试，发现switch进行相同判断，底层是===的比较，连类型一起比较

	<script type="text/javascript">
		var a = "5";
		switch(a){
			case 5 :
				alert("哈哈");  //不会弹出！！因为类型不一样
				break;
		}
	</script>

如果不写break，那么switch语句就表现的非要有意思，除了执行这个case里面的语句之外，还将无条件的执行下面的case的语句，直到遇见一个break拦住它。

		var a = 5;
		switch(a){
			case 4:
				alert("我是4");   //没有通过验证，不执行
			case 5:
				alert("我是5");   //弹出
			case 6:                //无视这行case，直接直接这行case里面的语句
				alert("我是6");   //弹出， 
				break;             //挡住了，就不能继续往下运行了
			case 7:
				alert("我是7");
				break;
			default:
				alert("我是默认");
		}

//用户输入月份，告诉它这个月有几天

		switch(month){
 case 1:
 case 3:
 case 5:
 case 7:
 case 8:
 case 10:
 case 12:
				alert("这个月有31天");
 break;
 case 4:
 case 6:
 case 9:
 case 11:
				alert("这个月有30天");
				break;
 case 2:
				alert("这个月一般来说是28天，可能29天");
		}

初学者最最可爱的错误是：

		switch(month){
			case 1 || 3 || 5 || 7 || 8 || 10 || 12 :
				alert("这个月有31天");
				break;
			case 4 || 6 || 9 || 11 :
				alert("这个月有30天");
				break;
			default :
				alert("我是默认");
		}

这样写不行的！因为1 || 3 || 5 || 7叫做表达式，计算机一遇见表达式，就会计算求值

1 || 3 || 5 || 7 || 8 || 10 || 12

表达式的值是1，等价于case 1:

switch这个语句，就只能干这种事儿。就是把一个值，看情况得几，执行不同的事儿。

如果要在某一个范围内，做某件事儿，也行，不过不建议这么写。此时应该用if……else if……

		switch(true){
 case score < 60 :
				alert("不及格");
 break;
 case score < 75 :
				alert("及格");
 break;
 case score < 85 :
				alert("良好");
 break;
 case score <= 100 :
				alert("优秀");
 break;
 default :
				alert("你输入的成绩错误");
		}

2.3 三元运算符

? :是一组运算符，这是JS中唯一一个需要三个元素参加的运算符。

条件 ? val1 : val2

表达式的值，要看条件是true还是false。如果条件是true，那么表达式的值就是val1。如果条件是false，表达式的值就是val2。

简单的例子：

console.log(true ? 3 : 8);	//3
console.log(false ? 3 : 8);	//8

三元运算符，经常这么使用：

员工的年终奖倍数，跟月薪有关。月薪大于8000，系数就是1.2。否则是1。

var xishu = salary > 8000 ? 1.2 : 1;

等价于：

if(salary > 8000){
 xishu = 1.2;
}else{
 xishu = 1;
}

条件分支的语句一共有3种

if……else if…… （必须立即想到！这个东西无敌）

switch case （某一方面很擅长，体现在了代码的清晰度上）

三元运算符（赋值的时候，根据条件有两个可能的值，马上想到三元运算符）

三、循环语句

JS中流程控制的语句，就两个：条件分支、循环语句。靠这两种语句，就能完成所有的程序。

循环语句是一系列反复执行直到符合特定条件的命令。

循环语句能够解决大量的类似语句书写。

3.1 for循环语句

整体感知：

for(var i = 1 ; i <= 99 ; i++){
	console.log("第" + i + "次说我爱你");	
}

你就发现了，for循环就是一个壳子，让变量i依次、轮流的值为1、2、3、4、……99。

变量i我们称为循环变量，这个变量可以任意设置，我们习惯用i来表示循环变量

语法上，最最容易错误的，最后没有分号：

for(var i = 1 ; i <= 99 ; i++;){   ← 错误的写法
	console.log("第" + i + "次说我爱你");	
}

for循环的本质，必须搞清楚。

系统遇见了for循环结构，会立即执行语句①，此时声明了一个变量i，赋值为1。

系统会立即检测，是否满足②这个条件表达式，如果是真，则执行③；如果②是假，则跳出循环，执行语句⑤。

执行完③之后，系统会立即执行语句④，然后再次检测语句②，如果为真，则做③，如果为假，则做⑤；

执行完③之后，系统会立即执行语句④，……

for循环的本质，决定了一个事儿，就是你能否预测循环的结果。用20个题目训练这个知识点。

for(var i = 3 ; i < 11 ; i+=4){
	console.log(i);
}

for(var i = 4 ; i <= 16 ; i+=4){
	console.log(i);
}

for(var i = 4 ; i != 10 ; i+=2){
	console.log(i);
}

for(var i = 6 ; i < 4 ; i++){
	console.log(i);
}

for(var i = 2 ; i < 12 ; i+=3){
	i += 4;
	console.log(i);
}

for(var i = 1 ; i < 10 ; i++){
    //里面没有语句
}
console.log(i);

for(var i = 2 ; i < 30 ; i++){
	if(i % 5 == 0){
		console.log(i);
	}
}

for(var i = 2 ; i <= 26 ; i++){
	if(i % 2 == 0){
		i += 3;
	}else{
		i += 2;
	}
	console.log(i);
}

for(var i = 15 ; i > 2 ; i-=3){
	console.log(i);
}

当循环变量已经在外部定义了，并不需要在①号位上重新定义，写一个空的;

var i = 8;
for(; i<12;i++){
	console.log(i);
}

for(var m = 1 , n = 2 ; m + n < 12 ; m++){
	n++;
	console.log(m);
}

var i =1;
for(alert("你好");i<5;i++){
	console.log(i);
}
// 你好 1 2 3 4

3.2穷举思想

我们的for没有讲完，for里面有continue、break的小关键字，我们下节课讲。

我们初学者，最最关键的，就是掌握for循环的穷举思想。

比如，现在要寻找48的所有约数。

什么是约数： a ÷ b 没有余数，能整除。那么我们称a是b的倍数，称b是a的约数。

计算机是笨笨的，不能立即告诉你48能整除哪些数，所以，我们就要让计算机从1开始，一个一个实验。

我们试试1是不是48的约数

我们试试2是不是48的约数

我们试试3是不是48的约数

……

我们试试48是不是48的约数

把所有的可能性一一列出，然后筛选。全举法，举就是列举的意思。中文比较文绉绉，穷举法。

欲穷千里目，更上一层楼。

比如，我们现在要寻找水仙花数。水仙花数，是三位数，每个数位的立方和等于它本身。

比如153，因为13+53+33 = 1 + 125 + 27 = 153。所以153就是水仙花数。

寻找100~999的所有水仙花数。

穷举法，从100~999，一个一个试，

我们试试100是不是水仙花数

我们试试101是不是水仙花数

我们试试102是不是水仙花数

我们试试103是不是水仙花数

……

我们试试999是不是水仙花数

for循环，还有一个小应用，叫做累加器。

比如，我们现在想计算1+2+3+4+……100

var sum = 0;  //累加器
for(var i = 1 ; i <= 100 ; i++){
	sum = sum + i;
}
console.log(sum);

		var sum = 1;   //累乘器，累乘器的初值是1
		for(var i = 6 ; i >= 1 ; i--){
			sum = sum * i;
		}
		console.log(sum);

现在我们想计算一下48的约数的个数。注意，我们不关心它的约数是什么，我们只关心多少个。

当一个数字的约数个数，是2个，也就是只有1和它自己，我们称呼它为质数，也叫做素数。

2、3、5、7、11、13、17、19、23、29、31、37、41……

寻找1~100的所有质数

如上

链接等我基本做完就全部放上来...

此文章是原创，若是转载，请联系本人并表明出处,感谢阅读.

weixin_39811842

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js三元运算符_JavaScript前端基础学习十二(全,文末另附有css及js学习链接)

JavaScript基础入门目录一、上次课知识复习 1.1 题目 1.2 补充的题目 1.3 运算符的复习二、条件分支语句 2.1 if……else…… 2.2 switch case语句 2.3 三元运算符三、循环语句 3.1 for循环语句 3.2 穷举思想一、复习1.1 测验题目//第一步，用户输入两个数字1.2 补充的题目第1题：用户输入一个数字，然后判断这个数字能否被5、6整除的...
复制链接

扫一扫

js三元运算符_JavaScript前端基础学习十二(全,文末另附有css及js学习链接)

JavaScript基础入门

目录

一、上次课知识复习

1.1 题目

1.2 补充的题目

1.3 运算符的复习

二、条件分支语句

2.1 if……else……

2.2 switch case语句

2.3 三元运算符

三、循环语句

3.1 for循环语句

3.2 穷举思想

一、复习

1.1 测验题目

1.2 补充的题目

1.3 运算符的复习

二、条件分支语句

2.1 if……else……

2.2 switch case语句

2.3 三元运算符

三、循环语句

3.1 for循环语句

3.2穷举思想

如上

“相关推荐”对你有帮助么？