Web前端，JS基础之表达式、分支、循环语句

前言

持续学习总结输出中，今天分享的是Web前端，JS基础之表达式、分支、循环语句

表达式和语句

表达式：
是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句：
js 整句或命令，js 语句是以分号结束(可以省略) 比如: if语句 for 循环语句

区别:
表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

表达式 3 + 4
语句 alert()

弹出对话框其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

分支语句

程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
在这里插入图片描述

有的时候要根据条件选择执行代码，这种就叫分支结构
在这里插入图片描述

某段代码被重复执行，就叫循环结构
在这里插入图片描述

分支语句
分支语句可以让我们有选择性的执行想要的代码

If分支语句

if语句有三种使用:单分支、双分支、多分支

单分支:

<script>
//if(条件){
      
      
//满足条件要执行的代码
//}
//it里面的小括号都会给我们转换为 布尔型
// false 0 '' undefined null NaN
if(0){
      
      
console.log('真的')
}
</script>

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

双分支:

<script>
//if(条件){
      
      
//满足条件要执行的代码
//}else{
      
      
//不满足条件执行的代码
//}
// 例如：计算闰年.  能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
// 1 用户输入年份
let year = +prompt('请输入年份：')
// 2 执行分支语句
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      
      
    alert(`${ 
        year}年是闰年`)
} else {
      
      
    alert(`${ 
        year}年是平年`)
}
</script>

多分支:

<script>
//if (条件1){
      
      
//代码1
//}else if (条件2){
      
      
//代码2
//}else if (条件3){
      
      
//代码3
//}else{
      
      
//代码n
//}
// 例如：根据输入不同时间，输出不同的问候语  12点以前， 输出上午好  18点以前， 输出下午好 20点以前， 输出晚上好
// 1. 用户输入时间 等我们学api 自动获取时间
   let time = prompt('请输入小时：')
   // 2. 多分支判断
   if (time < 12) {
      
      
       document.write(`上午好`)
   } else if (time < 18) {
      
      
       document.write(`下午好`)
   } else if (time < 20) {
      
      
       document.write(`晚上好`)
   } else {
      
      
       document.write(`夜深了？`)
   }
   //上面的代码后期直接读取时间，做区间判断
</script>

先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n

三元运算符

其实是比 if 双分支更简单的写法，有时候也叫做三元表达式

符号:
? 与 : 配合使用

<script>
//条件  ? 满足条件执行的代码 :  不满足条件执行的代码 
// console.log(true ? 1 : 2)
// console.log(false ? 1 : 2)

// if (3 > 5) {
      
      
//     alert('第一个')

// } else {
      
      
//      alert('第二个')
// }

// 简写  简单的算法，复杂的就不适合了
 3 > 5 ? alert('第一个') : alert('第二个')

</script>

一般用来取值

例如：

<script>
// 3 > 5 ? alert('第一个') : alert('第二个')
 let num1 = 40
 let num2 = 30
 // num1 > num2 ? console.log(num1) : console.log(num2)

 // num1 > num2 ? num1 : num2
 let re = num1 > num2 ? num1 : num2

 console.log(re)
 // 结果：40
</script>

switch 语句

<script>
 switch (2) {
      
      
      case 1:
          alert(1)
          break
      case 2:
          alert(2)
          break
      case 3:
          alert(3)
          break
      default:
          alert('没有数据')

  }

</script>

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
例:数据若跟值2全等，则执行代码2

注意事项

switch case语句一般用于等值判断,不适合于区间判断

switch case一般需要配合break关键字使用没有break会造成case穿透

循环语句

1. 断点调试

浏览器打开调试界面

按F12打开开发者工具
点到sources一栏
选择代码文件

断点:在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

2. while循环

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while 循环注意事项:

<script>
 while (循环条件) {
      
      
   要重复执行的代码(循环条件)
  }

</script>

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。所以，循环需要具备三要素:

变量起始值

终止条件(没有终止条件，循环会一直执行，造成死循环)

变量变化量(用自增或者自减)

<script>
let i = 1
 while (i <= 3) {
      
      
   document.write('我会循环三次<br>')
   i++
  }

</script>

循环结束:

continue:结束本次循环，继续下次循环
break:跳出所在的循环

结束

在这里插入图片描述

最后分享一句话：

作为一个老好人可能自以为自己擅长让别人高兴，但是实际上，他们的真正特长在于让自己感到痛苦、可怜、力不从心。
《取悦症：不懂拒绝的老好人》

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！