运算符
运算符也被称为操作符,是用来实现赋值,比拟和执行算数运算等性能的符号。
javascript常见的运算符
- 算数运算符
- 递增和递加运算符
- 比拟运算符
- 逻辑运算符
- 赋值运算符
算数运算符
用来进行两个变量或值的算数运算
<script> // 算数运算符包含加减乘除 取余等等 console.log(1 + 1); console.log(2 - 1); console.log(1 * 6); console.log(6 / 3); console.log(6 % 3); // 在算数运算符中 浮点数的精度会产生轻微的差距,不要拿两个浮点数相比拟 console.log(0.1 + 0.2); console.log(0.7 * 100); console.log(0.1 + 0.2 == 0.3) </script>
注意事项
- 在JS中,不能拿两个浮点数进行比拟
- 在JS的运算程序中,先计算乘除,再计算加减,有小括号先计算小括号
思考问题
如何判断一个数是否能被整除
余数为0 阐明这个数能被整除。
表达式
简略而言,由数字 运算符 标识符组成的式子便叫 表达式
返回值
表达式最终都有一个后果返回给咱们,这个后果便叫做 返回值
var num = 1 + 1
上述代码中,这样的式子便叫做表达式,左边的值计算结束后有一个返回值,这个返回值赋值给右边的num
一元运算符
一元运算符分为前置型和后置型,次要让变量履行自增或自减的操作,必须和变量搭配应用
前置型运算符
前置自增运算符:先自加 再进行运算
<script> //前置型运算符 先自增(自减) 再进行运算 var num = 10; ++num; console.log('num的值:', num) //11 var num2 = ++num + 5; console.log('num2的值:', num2) //17 </script>
前置自减运算符
<script> //前置自减运算符 var num = 20; --num; console.log('num的值:', num); //19 var num2 = --num + 5; console.log('num2的值', num2); //23 </script>
后置自增运算符
<script> //后置型自增运算符 先原值运算,再自加 var num = 2; num++; console.log('num的值:', num); //3 var num2 = num++ + 2; console.log('num2的值:', num2) //5 var num3 = num++ + 1; console.log('num3的值:', num3) //5 </script>
后置自减运算符
<script> //后置自减运算符 进行原值计算 再自增 var num = 6; num--; console.log('num的值:', num); //5 var num2 = num-- + 1; console.log('num2的值为:', num2); //6 var num3 = num-- + 1; console.log('num3的值:', num3); //5 </script>
练习
<script> //第一题 var a = 5; ++a; var b = ++a + 6; console.log('b的值:', b); //13 //第二题 var c = 10; c++; var d = c++ + 2; console.log('d的值:', d); //13 // 第三题 var e = 10; var f = e++ + ++e; //首先e++是10 而后自增1 于是++e变成12 所以值为22=10+12 console.log('f的值:', f) //22 </script>
一元运算符总结
- 一元运算符是为了简化代码操作,次要是为了使变量实现自增或自减操作
- 独自应用时没有任何区别
- 前置自增运算符和前置自减运算符:先自增(自减),再运算
- 后置自增运算符和后置自减运算符:先原值运算,再自增(自减)
- 理论开发过程中,应用后置运算符较多
比拟运算符
比拟运算符(关系运算符)是指两个数据进行比拟时所应用的运算符,比拟运算符会返回一个Boolean值,作为比拟运算的后果
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //比拟运算符 是用来进行两个数据的比拟所应用的运算符 得出的后果为布尔值 console.log(5 > 3) //true console.log(6 < 7) //true console.log(6 >= 5); //true 解析:因为6大于5 所以正确 console.log(7 <= 8); //true 解析:因为7小于8 所以正确 console.log(8 == '8') //true 解析:比拟值而不比拟数据类型 console.log(8 != 9); //true console.log(8 !== 8) //false console.log(8==="8") //false 解析:===要求数据类型和值都相等 </script></head>
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其后果也是布尔值,在前面的理论开发中,罕用于多个条件的判断。
<script defer="defer"> /* * 逻辑运算符:是用来比拟布尔值运算的运算符,其后果也是布尔值,开发中常用于多重条件的判断 */ console.log(5 > 3 && 3 < 5); //true console.log(5 < 3 && 3 < 7); //false console.log(5 < 7 || 5 < 3); //true console.log(5 < 7 && 5 < 3) //false console.log(!true) //false console.log(!false) //true </script>
总结
- &&:两边都为true,其最终后果才为true。两边只有有一侧为false,其最终后果为false
- || :两边都有false,其最终后果为false,两边只有一侧为true,其最终后果也为true
- !:取反 例如:!true的后果为false
小练习
<script> var num = 7; var str = "我爱你,敬爱的中国" console.log(num > 5 && num <= str.length) //true console.log(num < 5 && num <= str.length) //false console.log(!(str.length > 11)) //true console.log(!(num > 5 || str.length == num)) //fase </script>
短路成果
当有多个表达式(值)的时候,右边的表达式值能确定后果的话,就不再运行左边表达式的值的运算
逻辑中断(逻辑与)
语法
<script> console.log(234 && 456); //456 console.log(0 && 440) //0 console.log('' && 254 && 546); //"" </script>
逻辑中断(逻辑或)
语法:表达式1 || 表达式2
- 表达式1为真的话 则返回表达式1的值
- 表达式1如果为假的话,返回表达式2的值 (能够跟逻辑与相比拟记忆)
<script> console.log(234 || 456); //234 console.log(0 || 440) // 440 console.log('' || 254 || 546); //254 </script>
赋值运算符
数据赋值给变量的运算符,简称赋值运算符
<script> var num = 20; num += 5; console.log(num); //25 var num2 = 6; num2 *= 6; console.log(num2) //36 var num4 = 20; num4 %= 4; console.log(num4) //0 </script>
运算符程序
- 一元运算符中的!的优先级很高
- 逻辑与比逻辑或等级要高
练习1
<script> console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) /* 解析: false ||true && true && true 后果:true */ var num = 10; console.log(5 == num / 2 && (2 + 2 * num).toString() === '22') /* * 解析:5==num/2&&(2+2*num).toString()==='22' 5==num/2&&'22'==='22' 后果:true */ </script>
练习2
<script> var a = 3 > 5 && 2 < 7 && 3 == 4; console.log(a) /* 解析:a=false && true && false 后果:a= false */ var b = 3 <= 4 || 3 > 1 || 3 != 2 console.log(b); /* 解析:b= 3 <= 4 || 3 > 1 || 3 != 2 b= 3 <= 4 || 3 > 1 || true b= true || true || true 后果:true */ var c = 2 === "2" console.log(c); /* 解析:=== 用来比拟数据类型和值是否相等 所以为false */ var d = !c || b && a; console.log(d) /* 解析: d = !c ||b && a; d = true||b && a; d = true||true && false; d= true 后果为true */ </script>
流程管制语句
简略而言,就是管制咱们的代码程序依照不同的构造程序执行。
流程管制次要有三种构造:程序构造 分支构造 循环构造
程序构造
在JS中,脚本执行的程序是从上往下的 这种执行程序叫做程序构造流程管制语句
分支构造
在代码从上往下执行的过程中,依照不同的条件,执行不同的门路代码,从而失去不同的后果。
js中提供两种分支构造
- if语句
- swith语句
if语句
语法
if(条件表达式) { //执行的语句}
解释阐明:条件表达式为真,就执行语句,条件表达式为假,则不执行语句
<!DOCTYPE html> <script> if (true) { alert("Hello") } if(false) { //条件语句为false 则不执行 alert("你好啊 我的敌人") } </script>
if双分支语句
语法
if(条件表达式) { //执行的语句 }else { //执行的语句 }
注意事项
- if和else外面的语句,最终只能执行一个。
- else前面没有条件表达式,只有{}
网吧案例
要求:弹出一个输入框,用户输出本人的年龄,如果大于等于18岁,提醒能够进入网吧,如果小于18,则提醒用户不能进入网吧
思路
- 弹出输入框,把用户输出的年龄保留为变量
- 利用if语句进行判断,依据不同的年龄执行不同的语句
<script> var userName = Number(prompt("请输出年龄")); //Number():将字符串类型转换成Number类型 if (userName >= 18) { alert("祝贺你,能够进入网吧") } else { alert("对不起,你不能进入网吧") } </script>
案例:判断平年战争年(利用if双分语句)
提醒:能被4整除且不能整除100的为平年(如2004年就是平年,1901年不是平年)或者可能被 400 整除的就是平年
步骤
1.弹出输入框,用户输出本人出世的年份
2.把用户输出的年份保留成变量,依据不同的条件而弹出平年平年
<script> var userName = Number(prompt("请输出月份")); if (userName % 4 == 0 && userName % 100 != 0 || userName % 400 == 0) { alert("平年") } else { alert('平年') } </script>
if多分支语句
执行流程
语法:实用于多重条件的判断
if(条件表达式1) { 语句1;}else if(条件表达式2) { 语句2;}else if(条件表达式3) { 语句3; .....}else { //以上代码不成立执行此处代码}
注意事项
- 利用多个条件表达式而执行不同的语句,最终失去不同的后果,是个多选一的过程
else if前面能够跟上条件表达式 else前面没有条件表达式
问题案例
<script> var source = Number(prompt("请输出分数")) if (source >= 90) { alert('A') } else if (source >= 80) { alert('B') } else if (source >= 70) { alert('C') } else if (source >= 60) { alert("D") } else { alert('E') } </script>
三元表达式
三元表达式能够做一些简略的条件判断,由三元运算符组成的式子叫做三元表达式
语法
条件表达式?表达式1:表达式2 表达式1为真,则返回表达式1的值,表达式1为假 则返回表达式2的值
<script> var mum = 6; var result = mum < 7 ? '正确' : "不正确"; alert(result) </script>
案例:补0
要求:必须应用三元表达式
思路
- 弹出一个输入框,用户输出0~59之间的数字
- 0~9之间的数字后面补0,大于10的数字不做任何操作
- 用变量承受一个返回值,输入(程序外部解决)
<script> var userName = Number(prompt("请输出1~59之间的数字")) var result = userName <= 9 ? '0' + userName : userName; alert(result) </script>
switch语句
switch语句属于多分支语句,执行不同的条件语句失去不同的后果,是多选一的过程。
注意事项
- if多分支语句只有用于判断,而switch语句次要实用于特定值匹配
- switch:开关。 case:选项。 switch语句前面的值匹配上绝对应case前面的值且是全等的关系,则执行case前面的语句
- 匹配不上值,则执行default前面的语句
- switch语句前面的表达式是变量。
- 不要遗记写break,否则会始终执行。
水果案例
要求:用户输出本人须要的水果,则屏幕弹出水果的价格是多少钱一斤
思路
- 弹出一个输入框,用户须要本人的想要的水果
- 把用户输出的值用变量的模式保存起来,当switch前面的条件表达式的值匹配上case前面的值,则弹出绝对应的水果价格
- 不要遗记break,否则程序会始终执行上来。
<script> var fruit = prompt('请输出须要的水果'); switch (fruit) { case "苹果": alert("苹果3.5/斤"); break; case "香蕉": alert("香蕉5.5/斤"); break; case "榴莲": alert("榴莲10.5/斤"); break; default: alert("找不到此水果") } </script>
switch语句和if else if语句的区别
- switch用于特定值匹配,而if else语句用于条件判断
- switch确定值后间接执行到程序外部,而if语句还要顺次判断(执行效率稍低)
- 分支比拟少的状况下,用if else效率较高