javascript之流程控制語句(2)

時間  2020-08-13
標籤 javascript 流程 控制 語句 欄目 JavaScript 简体版
原文   原文鏈接

運算符

運算符也被稱爲操做符，是用來實現賦值，比較和執行算數運算等功能的符號。

javascript常見的運算符

  • 算數運算符
  • 遞增和遞減運算符
  • 比較運算符
  • 邏輯運算符
  • 賦值運算符

算數運算符

用來進行兩個變量或值的算數運算 
<script>
        // 算數運算符包括加減乘除 取餘等等
        console.log(1 + 1);
        console.log(2 - 1);
        console.log(1 * 6);
        console.log(6 / 3);
        console.log(6 % 3);

        // 在算數運算符中 浮點數的精度會產生細微的差距，不要拿兩個浮點數相比較
        console.log(0.1 + 0.2);
        console.log(0.7 * 100);

        console.log(0.1 + 0.2 == 0.3)

    </script>

image.png

注意事項javascript

  • 在JS中，不能拿兩個浮點數進行比較
  • 在JS的運算順序中，先計算乘除，再計算加減，有小括號先計算小括號

思考問題

如何判斷一個數是否能被整除html

餘數爲0 說明這個數能被整除。

表達式

簡單而言，由數字 運算符 標識符組成的式子便叫 表達式

返回值

表達式最終都有一個結果返回給咱們，這個結果便叫作 返回值 
var  num = 1 + 1

上述代碼中，這樣的式子便叫作表達式，右邊的值計算完畢後有一個返回值，這個返回值賦值給左邊的numjava

一元運算符

一元運算符分爲前置型和後置型，主要讓變量實行自增或自減的操做，必須和變量搭配使用

前置型運算符

前置自增運算符：先自加 再進行運算c++

<script>
        //前置型運算符 先自增（自減） 再進行運算
        var num = 10;
        ++num;
        console.log('num的值：', num) //11

        var num2 = ++num + 5;
        console.log('num2的值：', num2) //17
    </script>

image.png

前置自減運算符ui

<script>
        //前置自減運算符  
        var num = 20;
        --num;
        console.log('num的值：', num); //19

        var num2 = --num + 5;
        console.log('num2的值', num2); //23
    </script>

image.png

後置自增運算符

<script>
        //後置型自增運算符  先原值運算，再自加
        var num = 2;
        num++;
        console.log('num的值：', num); //3

        var num2 = num++ + 2;
        console.log('num2的值：', num2) //5

        var num3 = num++ + 1;
        console.log('num3的值：', num3) //5
      
    </script>

image.png

後置自減運算符spa

<script>
        //後置自減運算符 進行原值計算 再自增
        var num = 6;
        num--;
        console.log('num的值:', num); //5

        var num2 = num-- + 1;
        console.log('num2的值爲:', num2); //6

        var num3 = num-- + 1;
        console.log('num3的值：', num3); //5
    </script>

image.png

練習

<script>
        //第一題
        var a = 5;
        ++a;
        var b = ++a + 6;
        console.log('b的值:', b); //13


        //第二題
        var c = 10;
        c++;
        var d = c++ + 2;
        console.log('d的值:', d); //13


        // 第三題
        var e = 10;
        var f = e++ + ++e; //首先e++是10 而後自增1 因而++e變成12  因此值爲22=10+12
        console.log('f的值:', f) //22
    </script>

image.png

一元運算符總結

  • 一元運算符是爲了簡化代碼操做，主要是爲了使變量實現自增或自減操做
  • 單獨使用時沒有任何區別
  • 前置自增運算符和前置自減運算符：先自增（自減），再運算
  • 後置自增運算符和後置自減運算符：先原值運算，再自增（自減）
  • 實際開發過程當中，使用後置運算符較多

比較運算符

比較運算符（關係運算符）是指兩個數據進行比較時所使用的運算符，比較運算符會返回一個Boolean值，做爲比較運算的結果

image.png

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //比較運算符 是用來進行兩個數據的比較所使用的運算符 得出的結果爲布爾值
        console.log(5 > 3) //true
        console.log(6 < 7) //true
        console.log(6 >= 5); //true 解析：由於6大於5  因此正確
        console.log(7 <= 8); //true 解析：由於7小於8 因此正確

        console.log(8 == '8') //true 解析：比較值而不比較數據類型
        console.log(8 != 9); //true
        console.log(8 !== 8) //false 
        console.log(8==="8") //false 解析：===要求數據類型和值都相等
    </script>
</head>

image.png

邏輯運算符

邏輯運算符是用來進行布爾值運算的運算符，其結果也是布爾值，在後面的實際開發中，經常使用於多個條件的判斷。 
<script defer="defer">
        /* 
         *         邏輯運算符：是用來比較布爾值運算的運算符，其結果也是布爾值，開發中經常使用於多重條件的判斷
         */
        console.log(5 > 3 && 3 < 5); //true 
        console.log(5 < 3 && 3 < 7); //false

        console.log(5 < 7 || 5 < 3); //true
        console.log(5 < 7 && 5 < 3) //false

        console.log(!true) //false
        console.log(!false) //true
    </script>

image.png

總結

  • &&：兩邊都爲true,其最終結果才爲true。兩邊只要有一側爲false,其最終結果爲false
  • || :兩邊都有false,其最終結果爲false,兩邊只有一側爲true,其最終結果也爲true
  • ！:取反 例如：！true的結果爲false

小練習

<script>
        var num = 7;
        var str = "我愛你，親愛的中國"
        console.log(num > 5 && num <= str.length) //true
        console.log(num < 5 && num <= str.length) //false

        console.log(!(str.length > 11)) //true
        console.log(!(num > 5 || str.length == num)) //fase
    </script>

image.png

短路效果

當有多個表達式（值）的時候，左邊的表達式值能肯定結果的話，就再也不運行右邊表達式的值的運算3d

邏輯中斷（邏輯與）

語法code

image.png

<script>
        console.log(234 && 456); //456
        console.log(0 && 440) //0
        console.log('' && 254 && 546); //""
    </script>

image.png

邏輯中斷（邏輯或）

語法：表達式1 || 表達式2htm

  • 表達式1爲真的話 則返回表達式1的值
  • 表達式1若是爲假的話，返回表達式2的值 （能夠跟邏輯與相比較記憶）
<script>
        console.log(234 || 456); //234
        console.log(0 || 440) // 440
        console.log('' || 254 || 546); //254
    </script>

image.png

賦值運算符

數據賦值給變量的運算符，簡稱賦值運算符

image.png

<script>
        var num = 20;
        num += 5;
        console.log(num); //25


        var num2 = 6;
        num2 *= 6;
        console.log(num2) //36

        var num4 = 20;
        num4 %= 4;
        console.log(num4) //0
    </script>

image.png

運算符順序

image.png

  • 一元運算符中的！的優先級很高
  • 邏輯與比邏輯或等級要高

練習1blog

<script>
        console.log(4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true)
            /* 
               解析： false ||true && true && true  
               結果：true
             */

        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22')
        /*

        * 解析：5==num/2&&(2+2*num).toString()==='22'
                5==num/2&&'22'==='22'
         結果：true

         */
    </script>

image.png

練習2

<script>
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a)
            /* 
            解析：a=false && true && false
            結果：a= false
             */



        var b = 3 <= 4 || 3 > 1 || 3 != 2
        console.log(b);
        /* 
            解析：b= 3 <= 4 || 3 > 1 || 3 != 2
                  b= 3 <= 4 || 3 > 1 || true
                  b= true || true || true
            結果：true
         */



        var c = 2 === "2"
        console.log(c);
        /* 
            解析：=== 用來比較數據類型和值是否相等  因此爲false
         */


        var d = !c || b && a;
        console.log(d)
            /* 解析： d = !c ||b && a;
                      d = true||b && a;
                      d = true||true && false;
                      d= true
               結果爲true

             */
    </script>

image.png

流程控制語句

簡單而言，就是控制咱們的代碼順序按照不一樣的結構順序執行。

流程控制主要有三種結構：順序結構 分支結構 循環結構

順序結構

在JS中，腳本執行的順序是從上往下的 這種執行順序叫作順序結構流程控制語句

分支結構

在代碼從上往下執行的過程當中，按照不一樣的條件，執行不一樣的路徑代碼，從而獲得不一樣的結果。

image.png

js中提供兩種分支結構

  • if語句
  • swith語句

if語句

語法

if(條件表達式) {
    //執行的語句
}

解釋說明：條件表達式爲真，就執行語句，條件表達式爲假，則不執行語句

image.png

<!DOCTYPE html>

    <script>
        if (true) {
            alert("Hello")
        }

        if(false) { //條件語句爲false  則不執行
            alert("你好啊 個人朋友")
        }
    </script>

image

if雙分支語句

image.png

語法

if(條件表達式) {
        //執行的語句
    }else {
        //執行的語句
    }

注意事項

  • if和else裏面的語句，最終只能執行一個。
  • else後面沒有條件表達式，只有{}

網吧案例

要求：彈出一個輸入框，用戶輸入本身的年齡，若是大於等於18歲，提示能夠進入網吧，若是小於18，則提示用戶不能進入網吧

思路

  • 彈出輸入框，把用戶輸入的年齡保存爲變量
  • 利用if語句進行判斷，根據不一樣的年齡執行不一樣的語句
<script>
        var userName = Number(prompt("請輸入年齡")); //Number（）:將字符串類型轉換成Number類型
        if (userName >= 18) {
            alert("恭喜你，能夠進入網吧")
        } else {
            alert("對不起，你不能進入網吧")
        }
    </script>

image

案例：判斷閏年和平年（利用if雙分語句）

提示：能被4整除且不能整除100的爲閏年（如2004年就是閏年，1901年不是閏年）或者可以被 400 整除的就是閏年

步驟

1.彈出輸入框，用戶輸入本身出生的年份

2.把用戶輸入的年份保存成變量，根據不一樣的條件而彈出閏年平年

<script>
        var userName = Number(prompt("請輸入月份"));
        if (userName % 4 == 0 && userName % 100 != 0 || userName % 400 == 0) {
            alert("閏年")

        } else {
        
            alert('平年')


        }
    </script>

image

if多分支語句

執行流程

語法：適用於多重條件的判斷

if(條件表達式1) {
    語句1；
}else if(條件表達式2) {
    語句2；
}else if(條件表達式3) {
    語句3；
    .....
}else {
    //以上代碼不成立執行此處代碼
}

注意事項

  • 利用多個條件表達式而執行不一樣的語句，最終獲得不一樣的結果，是個多選一的過程

  • else if後面能夠跟上條件表達式 else後面沒有條件表達式

    成績案例

image.png

<script>
        var source = Number(prompt("請輸入分數"))
        if (source >= 90) {
            alert('A')
        } else if (source >= 80) {
            alert('B')
        } else if (source >= 70) {
            alert('C')
        } else if (source >= 60) {
            alert("D")
        } else {
            alert('E')
        }
    </script>

image

三元表達式

三元表達式能夠作一些簡單的條件判斷，由三元運算符組成的式子叫作三元表達式

語法

條件表達式？表達式1：表達式2 表達式1爲真，則返回表達式1的值，表達式1爲假 則返回表達式2的值

<script>
        var mum = 6;
        var result = mum < 7 ? '正確' : "不正確";
        alert(result)
    </script>

image.png

案例：補0

要求：必須使用三元表達式

思路

  • 彈出一個輸入框，用戶輸入0~59之間的數字
  • 0~9之間的數字前面補0，大於10的數字不作任何操做
  • 用變量接受一個返回值，輸出（程序內部處理）
<script>
        var userName = Number(prompt("請輸入1~59之間的數字"))

        var result = userName <= 9 ? '0' + userName : userName;
        alert(result)
    </script>

image

switch語句

switch語句屬於多分支語句，執行不一樣的條件語句獲得不一樣的結果，是多選一的過程。

注意事項

  • if多分支語句只要用於判斷，而switch語句主要適用於特定值匹配
  • switch：開關。 case：選項。 switch語句後面的值匹配上相對應case後面的值且是全等的關係，則執行case後面的語句
  • 匹配不上值，則執行default後面的語句
  • switch語句後面的表達式是變量。
  • 不要忘記寫break,不然會一直執行。

水果案例

要求：用戶輸入本身須要的水果，則屏幕彈出水果的價格是多少錢一斤

思路

  • 彈出一個輸入框，用戶須要本身的想要的水果
  • 把用戶輸入的值用變量的形式保存起來，當switch後面的條件表達式的值匹配上case後面的值，則彈出相對應的水果價格
  • 不要忘記break,不然程序會一直執行下去。
<script>
        var fruit = prompt('請輸入須要的水果');
        switch (fruit) {
            case "蘋果":
                alert("蘋果3.5/斤");
                break;
            case "香蕉":
                alert("香蕉5.5/斤");
                break;
            case "榴蓮":
                alert("榴蓮10.5/斤");
                break;
            default:
                alert("找不到此水果")
        }
    </script>

image

switch語句和if else if語句的區別

  • switch用於特定值匹配，而if else語句用於條件判斷
  • switch肯定值後直接執行到程序內部，而if語句還要依次判斷（執行效率稍低）
  • 分支比較少的狀況下，用if else效率較高
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程