JavaScript基础之运算符,表达式及语句详解

最新推荐文章于 2023-12-03 11:37:03 发布

码少女壮士

最新推荐文章于 2023-12-03 11:37:03 发布

阅读量1.5k

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_40630195/article/details/121754060

版权

JavaScript基础02

运算符

算数运算符

数学运算符也叫算数运算符,包括加(+)、减(-)、乘(*)、除(/)、取余(%)（求模）。

()可以提升优先级,其优先级与数学中计算的优先级相同,先乘除后加减,括号优先算

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
    <script>
        console.log(4 / 2)//输出2
        console.log(4 % 2)//输出0
        console.log(2 % 4)//输出2
        console.log(5 % 8)//输出5
    </script>
</body>

</html>

赋值运算符

=将等号右边的值赋予给等号左边,要求左边必须是一个容器

+=将该符号右边的值与左边的值相加后赋予左边的值

-=将该符号右边的值与左边的值相见后赋予左边的值

/=将该符号左边的值除以右边的值后赋予左边的值

%=将该符号左边的值对右边的值取余后后赋予左边的值

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 两个变量的 把i加到 sum 里面去
        let i = 1
        let sum = 0
        // sum = sum + i
        sum += i
        let num1 = 10
        num1 /= 2
        console.log(num1); //输出5
    </script>
</body>

</html>

一元运算符

一元运算符能够使变量做自增或自减运算或取反!

定义一个变量num,num++,++num为自增,num–,--num为自减

前置自增:++num先自增再使用

后置自增:num++先使用再自增

一般开发中使用后置自增较多

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 前置自增
        // let i = 1
        // 先自加 再使用
        // console.log(++i + 2)  // 4
        // 后置自增
        let i = 1
        // 先使用 后自加
        console.log(i++ + 2) // 输出为3
        console.log(i)//输出为2,已经做自增了
    </script>
</body>

</html>

比较运算符

> ： 左边是否大于右边

<： 左边是否小于右边

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

<=： 左边是否小于或等于右边

==： 左右两边是否相等

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

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

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

比较运算符实际上是比较字符对应ASCII码

NAN不等于任何值,包括它本身

尽量不要比较小数,因为小数有精度问题

不同类型之间比较会发生隐式转换成number类型再比较

所以在开发中,如果进行准确比较我们更喜欢===或者!==

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        console.log(3 > 5) // 输出false
        console.log(5 >= 5) // 输出 true
        // console.log(5 = 5)
        console.log(5 == 5)//输出true
        // == 只要值一样就是true  不管数据类型
        console.log(5 == '5')//输出true
        console.log(5 == 'pink')//输出false
        // === 以后判断要用  ===  开发常用   要求值和数据类型都一样
        console.log(5 === 5)//输出true
        console.log(5 === '5')//输出false
        // 特殊情况
        console.log('pink' > 'red')//输出true
        console.log('pink' > 'pin')//输出false
        console.log(1 === NaN)//输出false
        console.log(NaN === NaN)//输出false
        console.log(0.1 + 0.2 === 0.3)//输出false
        console.log(0.1 + 0.2)//输出0.30000000004

        console.log(3 > '2')
    </script>
</body>

</html>

逻辑运算符

逻辑运算符使用

请添加图片描述

逻辑运算符里的短路

请添加图片描述

运算符优先级

请添加图片描述

语句

表达式和语句

表达式是一组代码的集合,js解释器会将其计算为一个结果,

语句是js整句或命令,比如if语句,for循环语句

表达式 :3 + 4

语句 :

alert() 弹出对话框 ,if语句,for语句,switch语句

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

分支语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

有的时候要根据条件选择执行代码，这种就叫分支结构

某段代码被重复执行，就叫循环结构

请添加图片描述

if分支语句

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

单分支

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script>
    //弹出框,搜集用户信息,转换为数字类型
    let score = prompt('输入您的高考成绩') * 1
    //如果分数大于等于700,则弹框...
    if (score >= 700) {
      alert('恭喜您考入清华大学')
    }
  </script>
</body>

</html>

双分支

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //弹出框,搜集用户信息,转换为数字类型
    let score = prompt('输入您的高考成绩') * 1
    //如果分数大于等于700,则弹框...
    if (score >= 700) {
      alert('恭喜您考入清华大学')
    }
    否则弹框...
    else {
       alert('很可惜,您落榜了.')
    }
  </script>
</body>

</html>

多分支

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 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(`夜深了，头发还有吗？`)

        }
        // 12 - 18   下午
        // 我们输入的时间 要大于12 并且小于 18 算下午
        // time >12 && time < 18
    </script>
</body>

</html>

三元运算符

语法: 请添加图片描述

一般用来取值,可以将双分支语句代码简化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // console.log(true ? 1 : 2)
        // console.log(false ? 1 : 2)

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

        // } else {
        //      alert('第二个')
        // }
			 //以上语句可简化为以下一居
        // 3 > 5 ? alert('第一个') : alert('第二个')
        let num1 = 40
        let num2 = 30
        // num1 > num2 ? console.log(num1) : console.log(num2)
			 //需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等
        // let re = num1 > num2 ? num1 : num2
        let re = num1 > num2 ? num1 : num2
        console.log(String('0' + num1))

        console.log(re)
        // let re = 3 + 5
    </script>
</body>

</html>

swich语句

语法

请添加图片描述

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

switch case一般需要配合break关键字使用没有break会造成case穿透,当运行至break会使循环直接结束.

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 1. 用户输入数字   还有一次 运算符
        let num1 = +prompt('请您输入第一个数:')
        let num2 = +prompt('请您输入第二个数:')
        let sp = prompt('请您输入+ - * / 运算')
        // 2. 根据不同的运算符计算不同的结果 switch
        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>
</body>

</html>

循环语句

浏览器调试方法

请添加图片描述

while循环

while循环语法

请添加图片描述

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码

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

循环需要具备三要素：

变量起始值

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

变量变化量（用自增或者自减）

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 循环必须有3要素
        // 变量的起始值
        let i = 1
        // 终止条件
        while (i <= 3) {
            document.write(`月薪过万 <br>`)
            // 变量变化
            i++
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 1. 输出 1~100个数字
        // 起始值
        // let i = 1
        // // 终止条件
        // while (i <= 100) {
        //     document.write(` <p>是:${i} </p>`)
        //     // 变量变化
        //     i++
        // }

        // 2. 计算1~100 的累加和  1+2+3+.. + 100
        // let j = 1
        // let sum = 0
        // while (j <= 100) {
        //     // sum = sum + j
        //     sum += j
        //     j++
        // }
        // console.log(sum)  // 5050

        // 3. 求 1~100 之间的偶数累加和
        let i = 1
        let sum = 0
        while (i <= 100) {
            if (i % 2 === 0) {
                // 此时 i 一定是偶数
                sum = sum + i
            }
            // 不管你是偶数还是奇数我都要++
            i++
        }
        console.log(sum)
    </script>
</body>

</html>

循环退出

循环结束：

continue：结束本次循环，继续下次循环

break：跳出所在的循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        while (true) {
            let str = prompt('如果是我DJ，你还爱我吗?')
            if (str === '爱') {
                alert('我也爱你啊~~')
                break
            }
        }
    </script>
</body>

</html>

综合案例

页面弹框

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

分析：

①：循环条件永远为真，一直弹出对话框

②：循环的时候，重新让用户输入

③：如果用户输入的是：爱，则退出循环（break）

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script>
    //定义一个初始金额变量
    let money = 100

    //若用户不选择退出,则一直跳出弹框让用户进行操作
    while (1) {
      //定义一个变量获取用户想要的操作序号
      let enterNum = prompt(`请选择您的操作:
          1.取款
          2.存款
          3.查看余额
          4.退出`) * 1
      //如果选择4退出,则退出while循环
      if (enterNum == 4) {
        break//退出循环
      }
      switch (enterNum) {
        case 1: {
          let outMoney = prompt('请输入你要取的金额:') * 1
          //判断金额不能小于已有金额,如果小于则跳出警示框
          if (outMoney <= money) {
            money -= outMoney
          } else {
            alert(`您当前存款为${money}元,请输入小于它的取款金额`)
          }
          break
        }
        case 2: {
          let inMoney = prompt('请输入你要存的金额:') * 1
          money += inMoney
          break
        }
        case 3: {
          alert(`您当前存款为${money}元`)
          break
        }
      }
    }
  </script>
</body>

</html>