1. 笔耕屋首页
  2. 学习

JavaScript运算符与分支语句

霍欣标 • • 学习

赋值运算符是对变量进行赋值的运算符。= 将等号右边的值赋给左边，要求左边必须是一个容器。

赋值运算

  <script>
    num = 1
    num = num + 1

    num += 1 //上行代码的缩写形式

    console.log(num);
  </script>

一元运算符

众多的Javascript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。

一元运算符就是正负号

自增——++让变量的值+ 1

自减———-- 让变量的值- 1

经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了。

前置自增：

  <script>
    let i = 1
    ++i
    console.log(i)
  </script>

后置自增：

  <script>
    let i = 1
    i++
    console.log(i);
  </script>

其作用相当于 num += 1

前置自增和后置自增单独使用没有区别。，后面i++后置自增会使用相对较多，并且都是单独使用。

自增运算符的用法

前置自增和后置自增如果参与运算就有区别（难点，但是了解即可）。

前置自增先自加再使用（记忆口诀：++在前 先加）

  <script>
    let i = 1
    console.log(++i + 1);
  </script>

后置自增：先使用再自加（记忆口诀：++在后 后加）

  <script>
    let i = 1
    console.log(i++ + 1);
  </script>
  <script>
    let i = 1
    console.log(i++ + ++i + i);
  </script>

比较运算符

使用场景是比较两个数据大小、是否相等。

> 左边是否大于右边

> 左边是否小于右边

>= 左边是否大于或等于右边

＜= 左边是否小于或等于右边

== 左右两边值是否相等

=== 左右两边是否类型和值都相等

!== 左右两边是否不全等

比较结果为boolean类型，即只会得到true或 false

对比：

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等，强烈推荐使用===

  <script>
    console.log(3 > 5)  //false
    console.log(3 >= 3) //true
    console.log(2 == 2) //true
    console.log(2 == '2') // 字符串隐式转换数字类型，结果相等 true
    console.log(2 === '2') // 全等类型判断，更加严格，结果是错误的 false
    console.log(NaN === NaN) // Nan 不等于任何人，包括它自己 false
    console.log(2 !== '2') //true
  </script>

字符串比较，是比较的字符对应的ASCII码.

JavaScript运算符与分支语句
  <script>
    console.log(`-----------------------`)
    console.log('a' < 'b') // 97 < 98 true
    console.log('aa' < 'ab') // 还是 97 < 98，先比较第一个，再比较第二个 true
    console.log('aa' < 'aac') // a = a；a = a；没有 < c，后者大 true
    console.log(`-----------------------`)
  </script>

字符串比较，是比较的字符对应的ASCII码，从左往右依次比较，如果第一位一样再比较第二位，以此类推。比较的少，了解即可。

逻辑运算符

如果判断一个变量 num 是否大于5且小于10，5 < num < 10 是二元运算符，就用逻辑运算符用来解决多重条件判断。

  <script>
    let num = +prompt('请输入数字：')
    console.log(num > 5 && num < 10)
  </script>
运算符名称日常读法特点口诀
&&逻辑与并且两边都为真，结果才为真一假则假
||逻辑或或者两边至少有一个为真，结果就为真一真则真
!逻辑非取反true变false false变true真变假，假变真
<script>
    //逻辑与 一假则假
    console.log(true && true)  // true
    console.log(3 < 5 && 3 > 2) // true
    console.log(false && true) // false
    console.log(3 < 5 && 3 < 2) // false

    //逻辑或 一真则真
    console.log(true || true)  // true
    console.log(false || true) // true
    console.log(false || false) // false

    //逻辑非 取反
    console.log(!true) // false
    console.log(!false) // true
  </script>

练习：判断一个数是4的倍数，且不是100的倍数

需用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true，否则弹出 false 

  <script>
    let num = +prompt('请输入一个数字:')
    alert(num % 4 === 0 && num % 100 !== 0)

    // 2008是满足条件的，2000结果是错的
  </script>

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算数运算符先* / % 后+ -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先&&后||
7赋值运算符=
8逗号运算符,

综合练习

  <script>
    let a = 3 > 5 && 2 < 7 && 3 == 4  // a = false
    console.log(a)

    let b = 3 <= 4 || 3 > 1 || 3 != 2 // b = true
    console.log(b)

    let c = 2 === "2"                 // c = false
    console.log(c)

    let d = !c || b && a              // d = true
    console.log(d)
  </script>

表达式和语句

表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果，可以写在赋值语句的右侧。

num = 3 + 4 ；num++ ；num = 7

语句是一段可以执行的代码。

alert()弹出对话框；

console.log()控制台打印输出语句；

for和break 等语句就不能被用于赋值；

分支语句

程序有三大流程控制语句，掌握了流程控制，就能写出“思考”的程序。

程序三大流程控制语句：

顺序结构：从上往下执行；

分支结构：根据条件选择执行代码；

循环结构：某段代码被重复执行；

if语句

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

  <script>
    // 根据对错条件判断
    if (true) {
      console.log(`执行语句`)
    }

    // 2不大于5，是错的，所以不执行
    if (2 > 5) {
      console.log('执行语句')
    }

    // 除了零，所有的数字都为真，包含小数、复数和整数
    if (2) {
      console.log('执行语句')
    }

    // 除了 '' 空，所有的字符串都为真
    if ('霍欣标') {
      console.log('执行语句')
    }
  </script>

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

练习

用户输入考试成绩，如果分数大于80，则提示恭喜可以入营。

  <script>
    let score = +prompt('请输入成绩：')
    if (score >= 80) {
      alert('已入营')
    }
  </script>

双分支if语句

用户输入，用户名：xinbiao，密码：123456，则提示登录成功，否则提示登录失败。

  <script>
    let uname = prompt('请输入用户名：')
    let pwd = prompt('请输入密码：')

    if (uname === 'xinbiao' && pwd === "123456") {
      alert('登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>

判断闰年案例

让用户输入年份，判断这一年是闰年还是平年并弹出对应的警示框.

分析：

①：能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
②：需要逻辑运算符

  <script>
    // 2000年是闰年，199年是平年
    let year = +prompt('请输年份：')

    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}年是闰年`)
    } else {
      alert(`${year}年是平年`)
    }
  </script>

多分支if语法

适合于有多个结果的时候，结合案例学习多分支if语句，比如：学习成绩可以分为：优、良、中、差。

  <script>
    let score = +prompt('请输入成绩：')
    if (score >= 90) {
      alert('成绩非常优秀，你是我的骄傲')
    } else if (score >= 80) {
      alert('成绩良好，再接再厉')
    } else if (score >= 70) {
      alert('成绩还好，你要加油哦')
    } else if (score >= 60) {
      alert('成绩及格，很危险')
    } else {
      alert('成绩不及格，完犊子了')
    }
  </script>

先判断条件1，满足就执行{} 里面代码，其他不执行。条件1若不满足就不执行，向下继续判断。

以上条件都不满足，就是执行else里的代码（可以写N个条件）。

三元运算符

其实三元运算符的写法是比if双分支更简单的，?与:配合使用，一般用来取值。

  <script>
    // 条件 ? 满足执行 ：不满足执行
    let sum = 3 < 5 ? 3 : 5
    console.log(sum)

    let num = +prompt('请输入数字：')
    num > 5 ? alert('真的') : alert('假的')
  </script>

案例：判断2个数的最大值

  <script>
    let num2 = +prompt('请输入数字：')
    let num1 = +prompt('请输入数字：')
    num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)
  </script>

数字补0案例

用户输入1个数，如果数字小于10，则前面进行补0，比如09，03等。

  <script>
    let num = prompt('请输入一个数字：')
    num = num < 10 ? 0 + num : num
    document.write(num)
  </script>

switch 语句

此语句是找到跟( )里数据全等的case值，并执行里面对应的代码，若没有全等===的则执行default里的代码。

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

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

  <script>
    // switch()里面值与case后面的值一定是全等才能执行该层代码
    let num = +prompt('请选择数字：')
    switch (num) {
      case 1:
        console.log('您选择是1')
        break // 退出switch
      case 2:
        console.log('您选择是2')
        break // 退出switch
      case 3:
        console.log('您选择是3')
        break // 退出switch
      case 4:
        console.log('您选择是4')
        break // 退出switch
      default:
        console.log('没有符合条件的值');
    }
  </script>

简单计算器

用户输入2个数字，然后输入+ - * /任何一个，可以计算结果。

  <script>
    let num1 = +prompt('请输入数字：')
    let num2 = +prompt('请输入数字：')
    let sp = prompt('请输入 + - * /')
    switch (sp) {
      case '+':
        alert(`两个数的加法操作是${num1 + num2}`)
        break
      case '-':
        alert(`两个数的加法操作是${num1 - num2}`)
        break
      case '*':
        alert(`两个数的加法操作是${num1 * num2}`)
        break
      case '/':
        alert(`两个数的加法操作是${num1 / num2}`)
        break
      default: alert('你干啥呢，请输入+ - * /')
    }
  </script>

switch和if的区别

都能实现多分支选择，大部分情况下可以互换。

区别：

switch..case语句通常处理case为比较确定值的情况，而if..else语句更加灵活，通常用于范围判断>= <=某个范围;

switch语句进行判断后直接执行到程序的语句，效率更高，而if..else语句有几种判断条件，就得判断多少次

switch一定要注意必须是===全等，一定注意数据类型，同时注意break否则会有穿透效果

结论：

当分支比较少时，if..else语句执行效率高。

当分支比较多时，switch语句执行效率高，而且结构更清晰。

循环语句

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug。

① 浏览器打开调试界面

② 按F12打开开发者工具

③ 点到sources一栏

④ 选择代码文件

JavaScript运算符与分支语句

while循环

while循环就是在满足条件期间，重复执行某些代码，跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码。

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出。

  <script>
    let i = 1
    while (i <= 10) {
      document.write('我要循环十次<br>')
      i++
    }
  </script>

while 循环三要素

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

① 有变量起始值

②有终止条件（没有终止条件，循环会一直执行，造成死循环）

③ 变量要有变化量（用自增或者自减）

While 练习

需求：使用while循环，页面中打印，可以添加换行效果:

页面输出1-100

  <script>
    let end = +prompt('请写出输出最大值：')
    let i = 1
    while (i <= end) {
      document.write(`这是第${i}<br>`)
      i++
    }
  </script>

计算从1加到100的总和并输出

  <script>
    let i = 1
    let sum = 0 // 累加的变量
    while (i <= 100) {
      sum = sum + i
      i++
    }
    document.write(sum) // 5050
  </script>

计算1-100之间的所有偶数和

  <script>
    let i = 1
    let sum = 0 // 累加的变量
    while (i <= 100) {
      if (i % 2 === 0) {
        // 筛选偶数
        sum = sum + i
      }
      i++
    }
    document.write(sum) //2550
  </script>

循环退出

break退出循环；continue结束本次循环，继续下次循环。

  <script>
    let i = 1
    while (i <= 5) {
      if (i === 3) {
        break //退出循环
      }
      console.log(`我要吃第${i}个包子`)
      i++
    }
  </script>
  <script>
    let i = 1
    while (i <= 5) {
      if (i === 3) {
        i++ //下面代码不执行了，那i++要写在前面
        continue //退出本次循环
      }
      console.log(`我要吃第${i}个包子`)
      i++
    }
  </script>

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候。

break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用。

页面弹框案例

需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框。

  <script>
    while (true) {
      let str = prompt('你爱我吗？')
      if (str === '爱') {
        break //退出循环
      }
    }
  </script>

综合案例

需求：用户可以选择存钱、取钱、查看余额和退出功能。

①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗
③：提前准备一个金额预先存储一个数额
④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
⑤：输入不同的值，可以使用switch来执行不同的操作

  <script>
    // 给账户一个固定余额
    let money = 100

    while (true) {
      let re = +prompt(`
      请您选择操作：
      1. 存钱
      2. 取钱
      3. 查看余额
      4. 退出
      `)
      if (re === 4) {
        break
      }
      switch (re) {
        case 1:
          let cun = +prompt('请输入存款金额')
          money = money + cun
          break
        case 2:
          let qu = +prompt('请输入取款金额')
          money = money - qu
          break
        case 3:
          alert(`您的银行余额是${money}`)
          break
      }
    }
  </script>

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/72.html

霍欣标的头像霍欣标
0
上一篇 2024-07-02 04:46
下一篇 2024-07-12 16:10

相关推荐

博主人懒，应管局要求暂不开启站内私信和评论功能，如需帮助请发邮件。

邮箱账号：1969600480@qq.com