AI智能
改变未来

javascript之流程控制语句(2)


 javascript基础知识及变量(1)

 javascript之流程控制语句(2)

 javascript循环(3)

 javascript数组 (4)

 javascript函数(5)

javascript作用域(6)

运算符

运算符也被称为操作符,是用来实现赋值,比较和执行算数运算等功能的符号。

javascript常见的运算符

  • 算数运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

算数运算符

用来进行两个变量或值的算数运算

[code]<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的运算顺序中,先计算乘除,再计算加减,有小括号先计算小括号

思考问题

如何判断一个数是否能被整除

[code]余数为0 说明这个数能被整除。

表达式

简单而言,由数字 运算符 标识符组成的式子便叫 表达式

返回值

表达式最终都有一个结果返回给我们,这个结果便叫做 返回值

[code]     var  num = 1 + 1

上述代码中,这样的式子便叫做表达式,右边的值计算完毕后有一个返回值,这个返回值赋值给左边的num

一元运算符

一元运算符分为前置型和后置型,主要让变量实行自增或自减的操作,必须和变量搭配使用

前置型运算符

前置自增运算符:先自加 再进行运算

[code]<script>//前置型运算符 先自增(自减) 再进行运算var num = 10;++num;console.log(\'num的值:\', num) //11var num2 = ++num + 5;console.log(\'num2的值:\', num2) //17</script>

前置自减运算符

[code]<script>//前置自减运算符var num = 20;--num;console.log(\'num的值:\', num); //19var num2 = --num + 5;console.log(\'num2的值\', num2); //23</script>

后置自增运算符

[code]<script>//后置型自增运算符  先原值运算,再自加var num = 2;num++;console.log(\'num的值:\', num); //3var num2 = num++ + 2;console.log(\'num2的值:\', num2) //5var num3 = num++ + 1;console.log(\'num3的值:\', num3) //5</script>

后置自减运算符

[code]<script>//后置自减运算符 进行原值计算 再自增var num = 6;num--;console.log(\'num的值:\', num); //5var num2 = num-- + 1;console.log(\'num2的值为:\', num2); //6var num3 = num-- + 1;console.log(\'num3的值:\', num3); //5</script>

练习

[code]<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+12console.log(\'f的值:\', f) //22</script>

一元运算符总结

  • 一元运算符是为了简化代码操作,主要是为了使变量实现自增或自减操作
  • 单独使用时没有任何区别
  • 前置自增运算符和前置自减运算符:先自增(自减),再运算
  • 后置自增运算符和后置自减运算符:先原值运算,再自增(自减)
  • 实际开发过程中,使用后置运算符较多

比较运算符

比较运算符(关系运算符)是指两个数据进行比较时所使用的运算符,比较运算符会返回一个Boolean值,作为比较运算的结果

[code]<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><script>//比较运算符 是用来进行两个数据的比较所使用的运算符 得出的结果为布尔值console.log(5 > 3) //trueconsole.log(6 < 7) //trueconsole.log(6 >= 5); //true 解析:因为6大于5  所以正确console.log(7 <= 8); //true 解析:因为7小于8 所以正确console.log(8 == \'8\') //true 解析:比较值而不比较数据类型console.log(8 != 9); //trueconsole.log(8 !== 8) //falseconsole.log(8===\"8\") //false 解析:===要求数据类型和值都相等</script></head>

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符,其结果也是布尔值,在后面的实际开发中,常用于多个条件的判断。

[code]<script defer=\"defer\">/**         逻辑运算符:是用来比较布尔值运算的运算符,其结果也是布尔值,开发中常用于多重条件的判断*/console.log(5 > 3 && 3 < 5); //trueconsole.log(5 < 3 && 3 < 7); //falseconsole.log(5 < 7 || 5 < 3); //trueconsole.log(5 < 7 && 5 < 3) //falseconsole.log(!true) //falseconsole.log(!false) //true</script>

总结

  • &&:两边都为true,其最终结果才为true。两边只要有一侧为false,其最终结果为false
  • || :两边都有false,其最终结果为false,两边只有一侧为true,其最终结果也为true
  • !:取反 例如:!true的结果为false

小练习

[code]<script>var num = 7;var str = \"我爱你,亲爱的中国\"console.log(num > 5 && num <= str.length) //trueconsole.log(num < 5 && num <= str.length) //falseconsole.log(!(str.length > 11)) //trueconsole.log(!(num > 5 || str.length == num)) //fase</script>

短路效果

当有多个表达式(值)的时候,左边的表达式值能确定结果的话,就不再运行右边表达式的值的运算

逻辑中断(逻辑与)

语法

[code]<script>console.log(234 && 456); //456console.log(0 && 440) //0console.log(\'\' && 254 && 546); //\"\"</script>

逻辑中断(逻辑或)

语法:表达式1 || 表达式2

  • 表达式1为真的话 则返回表达式1的值
  • 表达式1如果为假的话,返回表达式2的值 (可以跟逻辑与相比较记忆)
[code]<script>console.log(234 || 456); //234console.log(0 || 440) // 440console.log(\'\' || 254 || 546); //254</script>

赋值运算符

[code] 数据赋值给变量的运算符,简称赋值运算符

[code]<script>var num = 20;num += 5;console.log(num); //25var num2 = 6;num2 *= 6;console.log(num2) //36var num4 = 20;num4 %= 4;console.log(num4) //0</script>

运算符顺序

  • 一元运算符中的!的优先级很高
  • 逻辑与比逻辑或等级要高

练习1

[code]<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

[code]<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 != 2console.log(b);/*解析:b= 3 <= 4 || 3 > 1 || 3 != 2b= 3 <= 4 || 3 > 1 || trueb= 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语句

语法

[code]if(条件表达式) {//执行的语句}

解释说明:条件表达式为真,就执行语句,条件表达式为假,则不执行语句

[code]<!DOCTYPE html><script>if (true) {alert(\"Hello\")}if(false) { //条件语句为false  则不执行alert(\"你好啊 我的朋友\")}</script>

if双分支语句

语法

[code]    if(条件表达式) {//执行的语句}else {//执行的语句}

注意事项

  • if和else里面的语句,最终只能执行一个。
  • else后面没有条件表达式,只有{}

网吧案例

[code]    要求:弹出一个输入框,用户输入自己的年龄,如果大于等于18岁,提示可以进入网吧,如果小于18,则提示用户不能进入网吧

思路

  • 弹出输入框,把用户输入的年龄保存为变量
  • 利用if语句进行判断,根据不同的年龄执行不同的语句
[code]<script>var userName = Number(prompt(\"请输入年龄\")); //Number():将字符串类型转换成Number类型if (userName >= 18) {alert(\"恭喜你,可以进入网吧\")} else {alert(\"对不起,你不能进入网吧\")}</script>

案例:判断闰年和平年(利用if双分语句)

[code]提示:能被4整除且不能整除100的为闰年(如2004年就是闰年,1901年不是闰年)或者能够被 400 整除的就是闰年

步骤

1.弹出输入框,用户输入自己出生的年份

2.把用户输入的年份保存成变量,根据不同的条件而弹出闰年平年

[code]    <script>var userName = Number(prompt(\"请输入月份\"));if (userName % 4 == 0 && userName % 100 != 0 || userName % 400 == 0) {alert(\"闰年\")} else {alert(\'平年\')}</script>

if多分支语句

执行流程

语法:适用于多重条件的判断

[code]if(条件表达式1) {语句1;}else if(条件表达式2) {语句2;}else if(条件表达式3) {语句3;.....}else {//以上代码不成立执行此处代码}

注意事项

  • 利用多个条件表达式而执行不同的语句,最终得到不同的结果,是个多选一的过程
  • else if后面可以跟上条件表达式 else后面没有条件表达式

    成绩案例

[code]<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的值

[code]<script>var mum = 6;var result = mum < 7 ? \'正确\' : \"不正确\";alert(result)</script>

案例:补0

要求:必须使用三元表达式

思路

  • 弹出一个输入框,用户输入0~59之间的数字
  • 0~9之间的数字前面补0,大于10的数字不做任何操作
  • 用变量接受一个返回值,输出(程序内部处理)
[code]<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,否则程序会一直执行下去。
[code]<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效率较高
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » javascript之流程控制语句(2)