本文详细介绍了JavaScript中的各种运算符，包括数字运算符、关系运算符、逻辑运算符和位运算符，并通过实例解释了它们的工作原理。此外，还深入探讨了流程控制语句，如if语句、switch语句、while循环等，提供了丰富的示例帮助理解。
目录
1.运算符
- 数字运算符
- 关系运算符（比较运算符）
> >= < <== == !=
=== 恒等 !== 不恒等
注意：关系运算的结果为布尔类型- 数字与数字比较
var r = 10 > 5; // r = true - 数字与字符串进行比较
首先会自动将字符串转换为数字再进行比较，如果转换成功，按照数字之间的比较进行运算，如果转换失败，会变成数字与NaN之间的转换，结果永远是False
et：
‘18’ > 5; //true
'18a' > 5; //false
'你好' > 5; //false - 字符串之间的比较，进行每位字符Unicode码的比较，当前位如果相同，就后移至下一位进行比较，当前位如果不同，直接出结果
et：
'10' > '5'; // false (字符串比较先比较1和5的unicode)
'ab' > 'ac'; //false
'张三丰' > '张无忌'; //false<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var r = "10" > "5"; console.log(r); var r2 = "张三丰" > "张无忌"; console.log(r2); </script> </head> <body> </body> </html> - == === / != !==
相等：==用于判断两个值是否相等，在比较时，会自动转换数据类型，只要值相等，结果就为true
et：
'10' == 10; //true
恒等：=== 用于判断两个变量的数据类型和值是否完全相等，不会进行数据类型转换，只有当操作数的数据类型保持一致，值相等，才为true
et：
'10' === 10; //false
'10' === '10' //true
不等：!= 在两端值不相等的情况下，返回为true
不恒等：!== 两个操作数中，数据类型与值只要有一个不相等，就返回true，否则是false
et：
'10' != 10; //false
'10' != '10'; //false
'10' !== 10; //true
'10' !== '10'; //false
- 数字与数字比较
- 逻辑运算符
进行多项比较，并将结果组合为单一的布尔值
&&：逻辑与 等同于 python and，左右为表达式，只有两个表达式结果都为真，逻辑与的结果才为真
||：逻辑或 等同于 python or ，只要一个条件为真，结果就为真
！：逻辑非 等同于 python not ，对现有条件的结果进行取反操作
1. 条件1 && 条件2逻辑与 条件1 条件2 结果 取值 true true true true false false false true false false false false 2. 条件1 || 条件2
逻辑或 条件1 条件2 结果 取值 true true true true false true false true true false false false 3. ！条件
直接取反
非真即假， 非假即真
练习：-
用户输入年份
var r = prompt('');
判断是否为闰年，并且在控制台输出结果<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 判断闰年 var input = prompt("请输入年份"); var res = input % 4 == 0 && input % 100 != 0 || input % 400 == 0; console.log(input + "是闰年吗？" + res); </script> </head> <body> </body> </html> -
用户输入一个字符
判断
是数字吗？结果
是中文吗？结果
是英文吗？结果<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var input = prompt("请输入一个字符"); var isNum = input >= 0 && input <= 9; console.log(input + "是数字吗？" + isNum); var isCHN = input >= "\u4e00" && input <= "\u9fa5"; console.log(input + "是中文吗？" + isCHN); var isCAPS = input >= 'A' && input <= 'Z'; var isSmal = input >= 'a' && input <= 'z'; var isEng = isCAPS || isSmal; console.log(input+"是英文吗？"+isEng); </script> </head> <body> </body> </html>
-
- 位运算符
程序中所有的数据在计算机中都是以二进制存储的， 位运算，就是对二进制位进行操作- 按位与：&
将整数转换为二进制形式，每一位都进行与操作（相同为1，不同则0）
3 & 5 ->1
011 & 101 ->001
注意：任何数字与1进行位与操作，结果为1时，表明操作数为奇数，结果为0，操作数为偶数，所以可以用来判断数字的奇偶
et：
3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000 - 按位或：| (一一则1)
3 | 5 -> 011 | 101 -> 111 - 按位异或：^ 两个数字的二进制位进行比较，相同则为0，不同则为1
3 ^ 5 -> 011 ^ 101 -> 110 ->6
注意：^ 操作可以在不借助第三方变量的情况下，交换两个变量的值
et：var a = 3,b = 5 //交换a，b的值 //1.普通做法 var c = a; a = b; b = c; //2. ^ a = a ^ b; -> a = 6; b = a ^ b; -> 6 ^ 5 -> 110 ^ 011 -> 011 -> 3 a = a ^ b; -> 6 ^ 3 -> 110 ^ 011 -> 101 -> 5
- 按位与：&
- 三目运算符
三目运算符，有三个操作数
类似：
单目运算符（一元运算符）++ -- ！typeof，只有一个操作的运算符
双目运算符（二元运算符）+ - * / % && || ，有两个操作数的运算符
语法：
条件表达式 ？表达式1 ：表达式2;
先判断条件表达式的结果，为真，执行表达式1：为假，执行表达式2
et：
var a = 150;
var res = a > 120? '偏胖，该减肥了' : '正好，不胖不瘦';
console.log(res);
练习1：
成绩判定
接收用户输入的分数 score
score < 60 不及格
60 <= score <= 80 及格
80 <= score <= 90 良好
score >= 90 优秀<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var score = prompt("请输入成绩"); var res = score >= 90 ? "优秀" : score >= 80 ? "良好" : score >= 60 ? "及格" : "不及格"; console.log("成绩"+score+"判定为"+res); </script> </head> <body> </body> </html>
练习2：
BMI 身体指数计算
要求从弹框接收用户的身高
要求从弹框接收用户的体重
bmi = 体重 / 身高 * 身高;
bmi < 18.5 偏瘦
bmi > 23.9 偏胖
介于二者之间，属于健康<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var height = prompt("请输入身高（m）"); var weight = prompt("请输入体重（kg）"); var bmi = weight / (height * height); // 保留小数点后两位 bmi = bmi.toFixed(2); var res = bmi >= 23.9 ? "偏胖" : bmi >= 18.5 ? "健康" : "偏瘦"; console.log("您的BMI为"+bmi+"属于"+res); </script> </head> <body> </body> </html>
2.流程控制语句
控制当前代码的执行顺序
流程语句结构：
- 顺序结构
- 分支结构（选择结构）
- 循环结构
- 顺序结构
按照代码书写顺序，从上到下执行 - 分支（选择）结构
- 作用
根据条件选择某一段代码执行 - if 结构
- if结构
语法：
if (条件){
//待执行的语句
//只有条件为真，才执行{}里的语句
}
注意：
1.if()后面的 {} 可以省略，省略之后，只控制该结构下的第一条语句
2.条件尽可能使布尔类型的
3.任何非0值都为真，0为假，以下情况，条件的结果都为假
if(0) {} if(0.0) {} if('') {} if(NaN) {} if(undefined) if(null)<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var score = prompt("请输入分数"); if(score >= 90){ console.log("当前成绩为优秀"); } // 省略{} if(score >= 80 && score < 90) console.log("当前成绩为良好"); console.log("普通语句"); // 以下条件结果都为假 console.log(Boolean(0)); console.log(Boolean(0.0)); console.log(Boolean('')); console.log(Boolean(NaN)); console.log(Boolean(undefined)); console.log(Boolean(null)); console.log(Boolean(100)); console.log(Boolean('a')); </script> </head> <body> </body> </html> - if - else 结构
语法：
if(条件){
//条件为真要执行的语句
}else {
//条件为假时执行的操作
}
et：
var age = prompt('请输入年龄');
if(age >= 18){
console.log('可以去网吧');
} else {
console.log('未成年禁止进入');
}
- 多重分支结构
if(条件){
//条件1为真时执行
} else if(条件2){
//条件1为假，条件2为真时执行
} else if(条件3){
//条件2为假，条件3为真时执行
}
...
else{
}
练习：- 判断成绩等级
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var score = prompt("请输入分数"); if(score >= 90){ console.log("优秀"); } else if(score >= 80){ console.log("良好"); } else if(score >= 60){ console.log("及格"); } else{ console.log("不及格"); } </script> </head> <body> </body> </html> - 日期计算器
用户输入，年，月，日，计算当日是该年的第几天
例如：
用户输入 2018 - 1 -15
输出，当天是2018年的第15天
用户输入 2018 - 2 -15
输出，当天是2018年的第31+15天
注意：
如果是闰年，2月为29天，总天数+1<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //接收用户输入的年 月 日 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var totalDays = 0; //判断闰年 var isRun = year % 4 == 0 && year % 100 != 0 || year % 400 == 0; //计算天数 if(month == 1){ totalDays = day; }else if(month == 2){ totalDays = 31 + day; }else if(month == 3){ totalDays = 31 + 28 + day; }else if(month == 4){ totalDays = 31 + 28 + 31 + day; } //如果当年是闰年，并且月份大于2，总天数进行+1 if(isRun && month >2){ //totalDays = totalDays + 1; totalDays += 1; } console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天"); </script> </head> <body> </body> </html>
- 判断成绩等级
- if结构
- switch 语句
在进行值判断时用的比较多
语法：switch(变量){ case 值1: //如果变量的值与case给出的值相等，就会执行：后面的代码段代码块; break; //跳出switch语句，不再向后进行匹配，可以省略 case 值2: 代码块; break case 值3: 代码块; break; ... default: 代码块; //所有case都匹配失败之后执行的默认语句 }
注意：- 变量与case 值的匹配，是用===恒等来判断，只有数据类型与值都相等才能匹配成功
- break 表示跳出switch判断，后面的判断语句不执行
- default 关键字用于在表达式不匹配前面给出的任何一种情形时，最终执行的操作
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //根据用户输入的数字判断星期几 var input = prompt('请输入0-6之间的整数'); switch(input){ case '0': console.log('星期天'); break; 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: alert('输入有误'); } </script> </head> <body> </body> </html>练习：
-
每周食谱，弹框输入1-7 表示星期几
星期一：今天是星期一，吃红烧肉
...
星期天：今天是星期天，吃红烧鱼
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var input = Number(prompt('今儿星期几')); switch(input){ case 1: console.log('星期'+input+':','今天是星期'+input,'吃红烧鱼'); break; case 2: console.log('星期'+input+':','今天是星期'+input,'吃猴子'); break; case 3: console.log('星期'+input+':','今天是星期'+input,'吃蟹子'); break; case 4: console.log('星期'+input+':','今天是星期'+input,'吃熊掌'); break; case 5: console.log('星期'+input+':','今天是星期'+input,'吃大象'); break; case 6: console.log('星期'+input+':','今天是星期'+input,'吃泥巴'); break; case 7: console.log('星期天:','今天是星期天','吃东京'); break; default: alert('没得吃'); } </script> </head> <body> </body> </html> -
改写日期计算器，用户输入
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //接收用户输入的年 月 日 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var totalDays = 0; //month [1,12] //匹配范围 [1,11] //month-1[0,11] -> 12个月 switch (month-1) { //月份按照倒序匹配，取值 1-11 //省略break，所有的代码语句都会执行 case 11 : totalDays += 30; case 10 : totalDays += 31; case 9 : totalDays += 30; case 8 : totalDays += 31; case 7 : totalDays += 31; case 6 : totalDays += 30; case 5 : totalDays += 31; case 4 : totalDays += 30; case 3 : totalDays += 31; case 2 : totalDays += 28; //判断闰年 if(year % 4 == 0 && year % 100 != 0 && year % 400 == 0) totalDays += 1; case 1 : totalDays += 31; } // 加当月的天数 totalDays += day; console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天"); //1. switch中的case，表示可以进行整月相加的部分1-11 //2. switch现在只匹配 1- 11月，将变量的范围调整在11月以内 month - 1 //3. 省略break之后，会从当前匹配到的case开始，依次执行后面所有case中的语句 //4. 当前月之前的整月部分累加之后，最后添加当前月的天数 </script> </head> <body> </body> </html>
-
- 作用
-
循环结构
-
作用
重复执行某段代码 -
循环三要素
循环变量
循环条件
循环体 -
while 循环
-
语法：
while（循环条件）{
循环体
}
et：重复输出100次'编程使我快乐' //1.定义循环变量 var i = 1; //表示循环次数 while(i <= 100){ console.log('编程使我快乐'); //更新循环变量 i++; } -
循环语句的执行流程
-
定义循环变量
-
判断循环条件
-
条件成立，执行循环体
-
更新循环变量
-
重复2 - 3 - 4 ...直到循环条件不成立，结束循环
练习：-
打印1-100之间的所有数字
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //输出1-100之间所有的数 var i = 1; while(i <= 100){ console.log(i); i ++; } </script> </head> <body> </body> </html> -
打印1-100之间所有是数字的和，然后求被3整数的所有数字
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //输出1-100之间所有的数 var i = 1; var sum = 0; while(i <= 100){ sum += i; i ++; } console.log(sum); var j = 1; while(j < 101){ //能否被3整除 if (j % 3 == 0){ console.log(j); } j ++; } </script> </head> <body> </body> </html>
-
-
-
-
do-while 循环
-
语法
do{
循环体
}while(循坏条件); -
执行流程
-
定义循环变量
-
执行循环体
-
更新循环变量
-
判断循环条件，条件成立，重复2-3-4，条件不成立，结束循环
-
-
while 与 do-while区别:
while循环先判断循环条件，为真才才执行循环体
do-while 循环不管条件是否成立，先执行循环体，后判断循环条件，即使循环条件不成立，也会执行一遍循环体
et：
var i = 101; do{ console.log(i); //更新循环变量 i ++; }while(i < 101);练习：
-
循环接收用户输入，并在控制台输出，直到用户输入'exit',结束循环
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //循环接受用户输入 prompt do{ var input = prompt('输入数据，exit表示退出'); if (input != 'exit'){ console.log(input); } }while(input != 'exit'); </script> </head> <body> </body> </html> -
改版日期计算器
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //改写日期计算器 //接收用户输入的年 月 日 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var totalDays = 0; var i = 1; //循环体中是month-1个月的天数累加 //month = 6 while(i < month){ //进行月份及天数区分 switch(i){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : totalDays += 31; break; case 4 : case 6 : case 9 : case 11 : totalDays += 30; break; case 2 : totalDays += 28; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { totalDays += 1; break; } } //更新循环变量 i ++; } //添加当月的天数 totalDays += day; console.log(year+"年"+month+"月"+day+"日"+"是当年的第"+totalDays+"天"); </script> </head> <body> </body> </html>
-
-
-
扫一扫
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
