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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374795.html

標籤：其他

上一篇：js預決議

下一篇：Javascript基礎思維導圖01

JavaScript基礎之運算子,運算式及陳述句詳解

JavaScript基礎02

運算子

算數運算子

賦值運算子

一元運算子

比較運算子

邏輯運算子

邏輯運算子使用

邏輯運算子里的短路

運算子優先級

陳述句

運算式和陳述句

分支陳述句

if分支陳述句

單分支

雙分支

多分支

三元運算子

swich陳述句

回圈陳述句

瀏覽器除錯方法

while回圈

while回圈語法

回圈退出

綜合案例