Javascript運(yùn)算符與流程控制語句怎么使用

本篇內(nèi)容主要講解“Javascript運(yùn)算符與流程控制語句怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Javascript運(yùn)算符與流程控制語句怎么使用”吧!

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、滄縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為滄縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

    1. 運(yùn)算符(操作符)

    「運(yùn)算符」是用于實(shí)現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號。常用運(yùn)算符分類如下

    • 算數(shù)運(yùn)算符

    • 遞增和遞減運(yùn)算符

    • 比較運(yùn)算符

    • 邏輯運(yùn)算符

    • 賦值運(yùn)算符

    1.1 算數(shù)運(yùn)算符

    運(yùn)算符描述案例
    +加10+20=30
    -減10-20=-10
    *乘10*20=200
    /除10/20=0.5
    %取余(取模)返回除法的余數(shù)9%2=1
      //alert(1 + 1);
        console.log(1 + 1);  //運(yùn)算符的左右兩側(cè)都要敲空格
        //alert(1 - 1);         //0
        //alert(1 * 1);         //1
        //alert(1 / 1);         //1

    1. % 取余（取模）

    //alert(4 % 2);           //0
 //alert(5 % 3);           //2
//alert(3 % 5);           //3  注意?。。。。。。。。?！

    2.浮點(diǎn)數(shù) 算數(shù)運(yùn)算里面會有問題

      var result = 0.1 + 0.2;    // 結(jié)果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);   // 結(jié)果不是 7，  而是：7.000000000000001

    浮點(diǎn)數(shù)值的最高精度是17位小數(shù)，但是在進(jìn)行算數(shù)運(yùn)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù),所以不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等!

    3. 我們不能直接拿浮點(diǎn)數(shù)來進(jìn)行相比較 是否相等

     var num = 0.1 + 0.2;
 alert(num == 0.3);          //false   要轉(zhuǎn)化為2進(jìn)制，精確度會有誤差

    • 表達(dá)式與返回值

      • 表達(dá)式：由數(shù)字、運(yùn)算符和變量組成的式子。

      • 返回值：每一個(gè)表達(dá)式經(jīng)過相應(yīng)的運(yùn)算之后，會有一個(gè)最終結(jié)果，稱為表達(dá)式的返回值

      // 是由數(shù)字、運(yùn)算符、變量等組成的式子 我們稱為表達(dá)式   1+1 // alert(1 + 1);  //2 就是返回值    //寫法    //1 + 1=2    // 在我們程序里面  2 = 1 + 1 把我們右邊表達(dá)式計(jì)算完畢把返回值給左邊    var num = 1 + 1;    // alert(num);  //2

    1.2 遞增和遞減運(yùn)算符

    如果需要反復(fù)給數(shù)字變量添加或減去1，可以使用遞增（ + + ）和遞減（ - - ）運(yùn)算符來完成。

    在javascript 中，遞增（ + + ）和遞減（ - - ）運(yùn)算符既可以放在變量前面，也可以放在變量后面。放在變量前面時(shí)，稱為前置遞增（ 遞減 ）運(yùn)算符，放在后面是后置遞增（ 遞減 ）運(yùn)算符

    注意：遞增和遞減運(yùn)算符必須配合變量使用。

    前置遞增運(yùn)算符使用口訣：先自加，后返回值

     <script>
        //1. 想要一個(gè)變量自己加1   num=num+1 比較麻煩
        var num = 1;
        num = num + 1; // ++num
        num = num + 1;
        //alert(num);  //3
        //2. 前置遞增運(yùn)算符  ++寫在變量前面
        var age = 20;
        ++age; //類似于 age = age + 1
        //alert(age);  //21
        // 3. 先加1 后返回值
        var p = 10;
        alert(++p + 10); //21
    </script>

    前置遞增運(yùn)算符使用口訣：先返回值原值 后自加1

     <script>
        var num = 10;
        num++; // num = num + 1  ++num
        // alert(num);         //11
        //1. 前置自增和后置自增如果單獨(dú)使用  效果是一樣的
        //2. 后置自增 口訣：先返回值原值  后自加1
        var age = 10;
        //alert(age++ + 10);   //20
        //alert(age);         //11
        //alert(age + 10);    //21
    </script>

    案例：

     <script>
        var a = 10;
        ++a; //++a = 11    a=11          ++a 是表達(dá)式
        var b = ++a + 2; // a=12    a++ = 12        前置：先自加，后返回值
        //alert(b);   //14  
        var c = 10;
        c++; //c++ = 11  c = 11
        var d = c++ + 2; //c++ = 11  c = 12      后置：先原值返回，后自加
        //alert(d);                 //13
        var e = 10;
        var f = e++ + ++e; // e++ =10  e=11  ++e=12
        console.log(f); //22
        // 后置自增  先表達(dá)式返回原值  后面變量再自加1
        // 前置自增  先自加，后運(yùn)算
        // 單獨(dú)使用 ，運(yùn)行結(jié)果相同
        // 開發(fā)時(shí)，大多數(shù)使用后置遞增/減，并且代碼獨(dú)占一行，例如：num++;或者num--
 </script>

    1.3 比較運(yùn)算符

    比較運(yùn)算符是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符，比較運(yùn)算符，會返回一個(gè)布爾值（true/false）作為比較運(yùn)算的結(jié)果。

    運(yùn)算符描述案例
    +加10+20=30
    -減10-20=-10
    *乘10*20=200
    /除10/20=0.5
    %取余(取模)返回除法的余數(shù)9%2=1
    <script>
        // alert(3 >= 5);  //false
        // alert(2 <= 5);     //true
        //1. 我們程序員里面的等于符號是 == 默認(rèn)轉(zhuǎn)換數(shù)據(jù)類型 會把字符串型的數(shù)據(jù)轉(zhuǎn)換為數(shù)字型
        // 只要求值相對
        //alert(3 == 5);                     //false
        //alert('pink老師' == '劉德華');       //false 
        //alert(18 == 18);                    //true
        //alert(18 == '18');                  //true
        //alert(18 != 18);                    //false   !=  不等于
        //2. 我們程序員里面有全等 一模一樣   要求兩側(cè)的值，還有數(shù)據(jù)類型完全一致才可以 true
        //alert(18 === 18);             //true
        //alert(18 === '18');           //false 
</script>
    符號作用用法
    =賦值把右邊給左邊
    ==判斷判斷兩邊值是否相等（注意此時(shí)有隱式轉(zhuǎn)換）
    ===全等判斷兩邊的值和數(shù)據(jù)類型是否完全相等

    1.4 邏輯運(yùn)算符

    概念：邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值。后面開發(fā)中經(jīng)常用于多個(gè)條件的判斷

     <script>
        // 1. 邏輯 與&&(and)  兩側(cè)都為true 結(jié)果才是true 只要一側(cè)結(jié)果為false  結(jié)果就為false
        //alert(3 > 5 && 3 > 2);   //false
        //alert(3 < 5 && 3 > 2);     //true
        // 2. 邏輯或|| （or）   兩側(cè)都為 false  結(jié)果才是假 false ,只要一側(cè)為true ,結(jié)果就是true
        //alert(3 > 5 || 3 > 2);    //true
        //alert(3 > 5 || 3 < 2);    //false
        //3. 邏輯非 ! (not)
        alert(!true); //false
    </script>

    練習(xí)：

       <script>
        var num = 7;
        var str = "我愛你~中國~";
        alert(num > 5 && str.length >= num); //true
        alert(num < 5 && str.length >= num); //false
        alert(!(num < 10)); //false
        alert(!(num < 10 || str.length == num)); //false
    </script>

    短路運(yùn)算（邏輯中斷）:（js API）

    當(dāng)有多個(gè)表達(dá)式（值）時(shí),左邊的表達(dá)式值可以確定結(jié)果時(shí),就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值;

      3. 邏輯與短路運(yùn)算  如果表達(dá)式1 結(jié)果為真 則返回表達(dá)式2  如果表達(dá)式1為假 那么返回表達(dá)式1
        alert(123 && 456);              //456   除了0之外，所有的數(shù)字都為真
        alert(0 && 456);                // 0
        alert(0 && 1 + 2 && 456 * 56789); // 0
        alert('' && 1 + 2 && 456 * 56789); // ''
        如果有空的或者否定的為假 其余是真的    :  0  ''  null undefined  NaN
     4. 邏輯或短路運(yùn)算  如果表達(dá)式1 結(jié)果為真 則返回的是表達(dá)式1 如果表達(dá)式1 結(jié)果為假 則返回表達(dá)式2
        alert(123 || 456); // 123
        alert(123 || 456 || 456 + 123); // 123
        alert(0 || 456 || 456 + 123); // 456
    邏輯中斷很重要 它會影響我們程序運(yùn)行結(jié)果
        var num = 0;
        //alert(123 || num++);      //123  num++不會運(yùn)行
        //alert(num);                 // 0

    1.5 賦值運(yùn)算符

    運(yùn)算符描述案例
    =直接賦值var userName = 'fan'
    += -=加減一個(gè)數(shù)后 再賦值var age=5; age+=5
    *= /= %=乘、除、取模后再賦值var age=5; age*=5
      <script>
        var num = 10;
        // num = num + 1;   //num++
        // num = num + 2        //num+=2;
        var num = 10;
        num += 5;
        // alert(num);   //15
        var num = 10;
        num -= 5;
        // alert(num);   //5
        var age = 2;
        age *= 3;
        // alert(age);     //6
        var age = 6;
        age /= 3;
        // alert(age);     //2
        var age = 4;
        age %= 2;
        // alert(age);     //0
    </script>

    1.6 運(yùn)算符優(yōu)先級

    優(yōu)先級運(yùn)算符順序
    1小括號()
    2一元運(yùn)算符! ++ --
    3算數(shù)運(yùn)算符先* / % 后+ -
    4關(guān)系運(yùn)算符> >= < <=
    5相等運(yùn)算符== != === !==
    6邏輯運(yùn)算符先&& 后||
    7賦值運(yùn)算符=
    8逗號運(yùn)算符,
      <script>
        //  一元運(yùn)算符：++num   !num     二元運(yùn)算符： 2 + 3
        // 練習(xí)1
        console.log(4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true) //true
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
        console.log('-------------------');
        // 練習(xí)2
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a); //false
        var b = 3 <= 4 || 3 > 1 || 3 != 2;
        console.log(b); //true
        var c = 2 === "2";
        console.log(c); //false
        var d = !c || b && a;
        console.log(d); //true
    </script>

    2. 流程控制

    「流程控制」在一個(gè)程序執(zhí)行的過程中，各條代碼的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的。很多時(shí)候我們要通過控制代碼的執(zhí)行順序來實(shí)現(xiàn)我們要完成的功能。流程控制主要有三種結(jié)構(gòu)，分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，代表三種代碼執(zhí)行的順序。

    分支流程控制:

    2.1 if 的語法結(jié)構(gòu)

    if (條件表達(dá)式) {
            //執(zhí)行語句
        }
        2. 執(zhí)行思路 如果
        if 里面的條件表達(dá)式結(jié)果為真 true 則執(zhí)行大括號里面的 執(zhí)行語句
        如果if 條件表達(dá)式結(jié)果為假 則不執(zhí)行大括號里面的語句 則執(zhí)行if 語句后面的代碼
        3. 體驗(yàn)代碼：
        if (3 < 5) {
            alert('沙漠駱駝');
        }

    案例：

      <script>
        // 彈出 prompt 輸入框，用戶輸入年齡， 程序把這個(gè)值取過來保存到變量中
        // 使用 if 語句來判斷年齡，如果年齡大于18 就執(zhí)行 if 大括號里面的輸出語句
        var age = prompt('請輸入年齡');
        if (age >= 18) {
            alert('可以進(jìn)入網(wǎng)吧')
        }
    </script>

    2.2 if else雙分支語句

    <script>
        // 1. 語法結(jié)構(gòu)  if 如果  else 否則
        // if (條件表達(dá)式) {
        //     // 執(zhí)行語句1
        // } else {
        //     // 執(zhí)行語句2 
        // }
        // 2. 執(zhí)行思路 如果表達(dá)式結(jié)果為真 那么執(zhí)行語句1  否則  執(zhí)行語句2
        // 3. 代碼驗(yàn)證
        var age = prompt('請輸入您的年齡:');
        if (age >= 18) {
            alert('我想帶你去網(wǎng)吧偷耳機(jī)');
        } else {
            alert('滾， 回家做作業(yè)去');
        }
        // 5. if里面的語句1 和 else 里面的語句2 最終只能有一個(gè)語句執(zhí)行  2選1
        // 6.  else 后面直接跟大括號
    </script>

    案例：閏年

      //  算法：能被4整除且不能整除100的為閏年（如2004年就是閏年，1901年不是閏年）或者能夠被 400 整除的就是閏年
        // 彈出prompt 輸入框，讓用戶輸入年份，把這個(gè)值取過來保存到變量中
        // 使用 if 語句來判斷是否是閏年，如果是閏年，就執(zhí)行 if 大括號里面的輸出語句，否則就執(zhí)行 else里面的輸出語句
        // 一定要注意里面的且 &&  還有或者 || 的寫法，同時(shí)注意判斷整除的方法是取余為 0
         var year = prompt("請輸入要檢測的年份：")
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert(year + '是閏年')
        } else {
            alert(year + '是平年')
        }

    2.3 if else if語句（多選1）

    <script>
        // 1. 多分支語句   就是利用多個(gè)條件來選擇不同的語句執(zhí)行 得到不同的結(jié)果  多選1 的過程
        // 2. 是多分支語句
        // 3. 語法規(guī)范if else if語句
        if (條件表達(dá)式1) {
            //語句1;
        } else if (條件表達(dá)式2) {
            //語句2;
        } else if (條件表達(dá)式3) {
            //語句3;
        } else {
            //最后語句;
        }
        // 4. 執(zhí)行思路
        // 如果條件表達(dá)式1 滿足就執(zhí)行 語句1 執(zhí)行完畢后，退出整個(gè)if 分支語句  
        // 如果條件表達(dá)式1 不滿足，則判斷條件表達(dá)式2  滿足的話，執(zhí)行語句2 以此類推
        // 如果上面的所有條件表達(dá)式都不成立，則執(zhí)行else 里面的語句
        // 5. 注意點(diǎn)
        // (1) 多分支語句還是多選1 最后只能有一個(gè)語句執(zhí)行
        // (2) else if 里面的條件理論上是可以任意多個(gè)的
        // (3) else if 中間有個(gè)空格了
    </script>

    案例：成績

    <script>
        //  偽代碼       按照從大到小判斷的思路
        // 彈出prompt輸入框，讓用戶輸入分?jǐn)?shù)（score），把這個(gè)值取過來保存到變量中
        // 使用多分支 if else if 語句來分別判斷輸出不同的值
        var score = prompt('請輸入分?jǐn)?shù)：');
        if (score >= 90) {
            alert('A');
        } else if (score >= 80) {      //不用寫:90>score>=80 能運(yùn)行下面，一定是小于90的
            alert('B');
        } else if (score >= 70) {
            alert('C');
        } else if (score >= 60) {
            alert('D');
        } else {
            alert('E');      //要帶引號，不然以為是一個(gè)變量，就要聲明了
        }
    </script>

    2.4 三元表達(dá)式

    <script>
        // 1. 有三元運(yùn)算符組成的式子我們稱為三元表達(dá)式
        // 2. 一元運(yùn)算符：++num   二元運(yùn)算符：  3 + 5    三元運(yùn)算符： ? :
        // 3. 語法結(jié)構(gòu) 
        // 條件表達(dá)式 ？ 表達(dá)式1 ： 表達(dá)式2
        // 4. 執(zhí)行思路
        // 如果條件表達(dá)式結(jié)果為真 則 返回 表達(dá)式1 的值 如果條件表達(dá)式結(jié)果為假 則返回 表達(dá)式2 的值
        // 5. 代碼體驗(yàn)
        var num = 10;
        var result = num > 8 ? '是的' : '不是' // 我們知道表達(dá)式是有返回值的,賦值給result 
        console.log(result); //是的
        //等價(jià)于：
        var num = 10;
        if (num > 5) {
            alert('是的');
        } else {
            alert('不是的');
        }
        // 三元表達(dá)式是簡化版的if else
    </script>

    案例: 數(shù)字補(bǔ)0

       <script>
        //  用戶輸入0~59之間的一個(gè)數(shù)字
        // 如果數(shù)字小于10，則在這個(gè)數(shù)字前面補(bǔ)0,（加0 拼接） 否則  不做操作
        // 用一個(gè)變量接受這個(gè)返回值，輸出
        var num = prompt('請輸入0~59之間的一個(gè)數(shù)字？')
            //三元表達(dá)式： 表達(dá)式？ 表達(dá)式1： 表達(dá)式2；
        var result = num < 10 ? '0' + num : num; //字符型的0   把返回值賦值給一個(gè)變量
        alert(result);
    </script>

    2.5 switch分支流程控制

    switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼。當(dāng)要針對變量設(shè)置一系列的特定值的選項(xiàng)時(shí)，就可以使用 switch。

    <script>
        //1. switch 語句也是多分支語句 也可以實(shí)現(xiàn)多選1
        // 2. 語法結(jié)構(gòu) switch 轉(zhuǎn)換、開關(guān)    case小例子或者選項(xiàng)的意思   break 退出
        /*     switch (表達(dá)式) {
                case value1: 執(zhí)行語句1; break;
                case value2: 執(zhí)行語句2; break;
                case value3: 執(zhí)行語句3; break;
                default: 執(zhí)行最后的語句;
            } */
        // 3. 執(zhí)行思路  利用我們的表達(dá)式的值 和 case 后面的選項(xiàng)值相匹配 如果匹配上，就執(zhí)行該case 里面的語句  如果都沒有匹配上，那么執(zhí)行 default里面的語句
        switch (2) {
            case 1: alert('這是1'); break;
            case 2: alert('這是2'); break;  //這是2
            case 3: alert('這是3'); break;
            default: alert('沒有匹配結(jié)果');
        }
    </script>

    注意事項(xiàng)：

    var num=1;
        switch(num){
            case 1: console.log(1);break; //1
            case 2: console.log(2);break;
            case 3: console.log(3);break;
        }
        // 1. 我們開發(fā)里面 表達(dá)式我們經(jīng)常寫成變量
        // 2. 我們num 的值 和 case 里面的值相匹配的時(shí)候是 全等   必須是值和數(shù)據(jù)類型一致才可以 num === 1

    break 如果當(dāng)前的case里面沒有break 則不會退出switch 是繼續(xù)執(zhí)行下一個(gè)case

      var num=1;
        switch(num){
            case 1: console.log(1);//1
            case 2: console.log(2);//2
            case 3: console.log(3);//3
        }

    案例：查詢水果案例

    <script>
        //  彈出 prompt 輸入框，讓用戶輸入水果名稱，把這個(gè)值取過來保存到變量中。
        // 將這個(gè)變量作為 switch 括號里面的表達(dá)式。
        // case 后面的值寫幾個(gè)不同的水果名稱，注意一定要加引號 ，因?yàn)楸仨毷侨绕ヅ洹?
        // 彈出不同價(jià)格即可。同樣注意每個(gè) case 之后加上 break ，以便退出 switch 語句。
        // 將 default 設(shè)置為沒有此水果。
        var fruit = prompt('請輸入水果名稱')
        switch (fruit) {
            case '蘋果':
                alert('蘋果的價(jià)格是 3.5/斤');
                break;
            case '榴蓮':
                alert('榴蓮的價(jià)格是 35/斤');
                break;
            default:
                alert('沒有此水果');
        }
    </script>

    switch 語句和 if else if區(qū)別：

    1. 一般情況下，它們兩個(gè)語句可以相互替換

    2. switch...case 語句通常處理case為比較確定值的情況，而if...else...語句更加靈活，常用于范圍判斷(大于、等于某個(gè)范圍)

    3. switch 語句進(jìn)行條件判斷后直接執(zhí)行到程序的條件語句，效率更高。而if..else 語句有幾種條件，就得判斷多少次。

    4. 當(dāng)分支比較少時(shí)，if...else語句的執(zhí)行效率比switch語句高。

    5. 當(dāng)分支比較多時(shí)，switch語句的執(zhí)行效率比較高，而且結(jié)構(gòu)更清晰。

    到此，相信大家對“Javascript運(yùn)算符與流程控制語句怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

    當(dāng)前名稱：Javascript運(yùn)算符與流程控制語句怎么使用
    URL標(biāo)題：http://muchs.cn/article36/jejpsg.html

    成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營銷型網(wǎng)站建設(shè)、商城網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站營銷、標(biāo)簽優(yōu)化

    廣告

    聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

    網(wǎng)站優(yōu)化排名