Javascript的语句和运算以及一些补充内容

一.关于Javascript的语句

序言：

• 我们的 js 代码都是顺序执行的（从上到下）
• 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码.

1.程序语句：

程序=语句+数据结构+算法

2.条件语句：

定义： 根据条件确定哪些语句需要执行哪些语句不需要执行
a.条件语句：if
b.循环语句：for，while…

二.IF 条件分支结构（条件语句）

1.if 语句

• 通过一个 if 语句来决定代码执行与否

• 语法： if (条件) { 要执行的代码 }

• 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

  // 条件为 true 的时候执行 {} 里面的代码
  if (true) {
    alert('因为条件是 true，我会执行')
  }
  
  // 条件为 false 的时候不执行 {} 里面的代码
  if (false) {
  	alert('因为条件是 false，我不会执行')    
  }
  

2.if else 语句

• 通过 if 条件来决定，执行哪一个 {} 里面的代码

• 语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

• 两个 {} 内的代码一定有一个会执行

  // 条件为 true 的时候，会执行 if 后面的 {} 
  if (true) {
    alert('因为条件是 true，我会执行')
  } else {
    alert('因为条件是 true，我不会执行')
  }
  
  // 条件为 false 的时候，会执行 else 后面的 {}
  if (false) {
    alert('因为条件为 false，我不会执行')
  } else {
    alert('因为条件为 false，我会执行')
  }
  

3.if else if … 语句

• 可以通过 if 和 else if 来设置多个条件进行判断

• 语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }

• 会从头开始依次判断条件

  • 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
  • 如果第一个条件为 false，那么就会判断第二个条件，依次类推

• 多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

  // 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
  if (true) {
    alert('我是代码段1')
  } else if (false) {
  	alert('我是代码段2')           
  }
  
  // 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
  // 因为只要前面有一个条件满足了，就不会继续判断了
  if (true) {
    alert('我是代码段1')
  } else if (true) {
    alert('我是代码段2')
  }
  
  // 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
  // 只有前一个条件为 false 的时候才会继续向后判断
  if (false) {
    alert('我是代码段1')
  } else if (true) {
    alert('我是代码段2')
  }
  
  // 第一个条件为 false，第二个条件为 false，最终什么也不会发生
  // 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
  if (false) {
    alert('我是代码段1')
  } else if (false) {
    alert('我是代码段2')
  }
  

4.if else if … else 语句

• 和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

  // 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
  // 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
  // 只要前面有一个条件满足了，那么后面的就都不会执行了
  if (false) {
    alert('我是代码段1')
  } else if (false) {
    alert('我是代码段2')
  } else {
    alert('我是代码段3')
  }
  

eg：
下面展示一些 内联代码片。

// 以下展示一些案例

             求两个数最大值
             
求63.74两个数取最大值，并且打印输出到控制台:
   <script>                                  
        var m = 63
        var n = 74
        var max = m//存储最大值

        if(n > max){
            max = n
        }

        // if (m > n) {
        //     max = m
        // }else{
        //     max = n
        // }

        console.log('最大值是 ',max)
</script>



                 求三个数最大值

方法1.
           求53，42和64三个数的最大值，将最大值输出打印到控制台
           分析: 第一步： 定义三个变量存储三个值，再定义一个变量存储最大值
                 var m = 53
                 var n = 42
                 var z = 64

                 var max  //最大值
  
        var m = 53
        var n = 42
        var z = 64

        var max  //最大值

        //如果m大于n并且与大于z，最大值就是m
        if(m > n && m > z){
            max = m
        }else if(n > m && n > z){
            max = n
        }else{
            max = z
        }

        console.log('三个数最大值 ',max)
        

方法2：
           求53，42和64三个数的最大值，将最大值输出打印到控制台
           分析: 第一步： 定义三个变量存储三个值，再定义一个变量存储最大值
                 var m = 53
                 var n = 42
                 var z = 64

                 var max  //最大值

                 假设第1个数是最大值
                  max = m
                 将后面的数依次与max进行比较，如果比max大，则将赋值给max,
                 接着再进行后面数比较
                  if(n > max){
                      max = n
                  }
                  if(z > max){
                      max = z
                  }

        */
        var m = 53
        var n = 42
        var z = 64

        var max = m //最大值,  max: 153
        if(n > max){  // 42 > 153
            max = n
        }

        if(z > max){  // 64 > 153
            max = z 
        }

        console.log('三个数最大值 ',max)
 

三.SWITCH 条件分支结构（switch语句）

• 也是条件判断语句的一种

• 是对于某一个变量的判断

• 语法：

  switch (要判断的变量) {
    case 情况1:
      情况1要执行的代码
      break
    case 情况2:
      情况2要执行的代码
      break
    case 情况3:
      情况3要执行的代码
      break
    default:
      上述情况都不满足的时候执行的代码
  }
  

  • 要判断某一个变量 等于 某一个值得时候使用

• 例子🌰： 根据变量给出的数字显示是星期几

  var week = 2
  switch (week) {
    case 1:
      alert('星期一')
      break
    case 2:
      alert('星期二')
      break
    case 3:
      alert('星期三')
      break
    case 4:
      alert('星期四')
      break
    case 5:
      alert('星期五')
      break
    case 6:
      alert('星期六')
      break
    case 7:
      alert('星期日')
      break
    default:
      alert('请输入一个 1 ～ 7 之间的数字')
  }
  

注意：case具有穿透代码的效果

下面展示一些 内联代码片。

// 下面展示案例

输入年份和月份，显示该年当月的天数，
            
           分析: var year = 2021  //年份
                 var month = 11   //月份   
                 var day = ?     30天

                 1 ,3 ,5,  7, 8, 10,  12   ->  31天
                  4 ,6,     9,    11   ->  30天
                     闰年 2月  29天 平年 2 28天
        */
        var year = 2021  //年份
        var month = 12   //月份   
        var day  // ?天

        switch (month) {
            case 1:
                day = 31
                break;
            case 3:
                day = 31
                break;
            case 5:
                day = 31
                break;
            case 7:
                day = 31
                break;
            case 8:
                day = 31
                break;
            case 10:
                day = 31
                break;
            case 12:
                day = 31
                break;

            case 4:
                day = 30
                break;
            case 6:
                day = 30
                break;
            case 9:
                day = 30
                break;
            case 11:
                day = 30
                break;

            case 2:
                if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                    day = 29
                } else {
                    day = 28
                }
                break;

        }

        console.log(year,'年',month,'月是',day,'天');
        

对比case的简化代码效果：

下面展示一些 内联代码片

// 条件同上利用case穿透效果简化代码案例

 输入年份和月份，显示该年当月的天数， 利用case穿透简化代码
           分析: var year = 2021  //年份
                 var month = 11   //月份   
                 var day = ?     30天

                 1 ,3 ,5,  7, 8, 10,  12   ->  31天
                  4 ,6,     9,    11   ->  30天
                     闰年 2月  29天 平年 2 28天
        */
        var year = 2021  //年份
        var month = 4   //月份   
        var day  // ?天

        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                day = 31
                break

            case 4:
            case 6:
            case 9:
            case 11:
                day = 30
                break

            case 2:
                if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                    day = 29
                } else {
                    day = 28
                }
        }

        console.log(year,'年',month,'月是',day,'天');
        

能明显看出case的穿透效果具有很好的优化代码的作用(使代码能跟简洁明了，同时也减低了命名的压力）

四.三元运算（扩展）

• 三元运算，就是用 两个符号 组成一个语句

• 三元运算只是对 if else 语句的一个简写形式

• 语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

  var age = 18;
  age >= 18 ? alert('已经成年') : alert('没有成年')
  

eg：
下面展示一些 内联代码片。

// 用三元运算实现目的的案例

 求三个数34,56,27最大值，使用三元运算实现
          
        var m = 34
        var n = 56
        var k = 27
        var max

        if (m > n) {
            if (m > k) {
                max = m
            } else {
                max = k
            }
        } else {
            if (n > k) {
                max = n
            } else {
                max = k
            }
        }

        max = m > n ? (m > k ? m : k) : (n > k ? n : k)

        console.log('最大值是 ',max);

        // if (m > n && m > k) {
        //     max = m
        // }else if(n > k && n > m){
        //     max = n
        // }else{
        //     max = k
        // }

五.单步调试（补充）

1.作用：调试程序的错误和BUG
2.目的：方便理解程序的语句执行顺序和规律
3.步骤：

a.打开浏览器窗口找到source选项

b.选中html文件

c.打断点：开始和结束

d.点击按钮一步步执行即可