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

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

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

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

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

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

• 比較運(yùn)算符

• 邏輯運(yùn)算符

• 賦值運(yùn)算符

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

  //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)算里面會(huì)有問(wè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ù)來(lái)進(jìn)行相比較 是否相等

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

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

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

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

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

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

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

在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)算符  ++寫(xiě)在變量前面
        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é)果相同
        // 開(kāi)發(fā)時(shí)，大多數(shù)使用后置遞增/減，并且代碼獨(dú)占一行，例如：num++;或者num--
 </script>

1.3 比較運(yùn)算符

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

<script>
        // alert(3 >= 5);  //false
        // alert(2 <= 5);     //true
        //1. 我們程序員里面的等于符號(hào)是 == 默認(rèn)轉(zhuǎn)換數(shù)據(jù)類型 會(huì)把字符串型的數(shù)據(jù)轉(zhuǎn)換為數(shù)字型
        // 只要求值相對(duì)
        //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>

1.4 邏輯運(yùn)算符

概念：邏輯運(yùn)算符是用來(lái)進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值。后面開(kāi)發(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 = "我愛(ài)你~中國(guó)~";
        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

邏輯中斷很重要 它會(huì)影響我們程序運(yùn)行結(jié)果
        var num = 0;
        //alert(123 || num++);      //123  num++不會(huì)運(yùn)行
        //alert(num);                 // 0

1.5 賦值運(yùn)算符

  <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)先級(jí)

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

分支流程控制:

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

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

案例：

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

2.2 if else雙分支語(yǔ)句

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

案例：閏年

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

2.3 if else if語(yǔ)句（多選1）

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

案例：成績(jī)

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

2.4 三元表達(dá)式

<script>
        // 1. 有三元運(yùn)算符組成的式子我們稱為三元表達(dá)式
        // 2. 一元運(yùn)算符：++num   二元運(yùn)算符：  3 + 5    三元運(yùn)算符： ? :
        // 3. 語(yǔ)法結(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á)式是簡(jiǎn)化版的if else
    </script>

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

   <script>
        //  用戶輸入0~59之間的一個(gè)數(shù)字
        // 如果數(shù)字小于10，則在這個(gè)數(shù)字前面補(bǔ)0,（加0 拼接） 否則  不做操作
        // 用一個(gè)變量接受這個(gè)返回值，輸出
        var num = prompt('請(qǐng)輸入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 語(yǔ)句也是多分支語(yǔ)句，它用于基于不同的條件來(lái)執(zhí)行不同的代碼。當(dāng)要針對(duì)變量設(shè)置一系列的特定值的選項(xiàng)時(shí)，就可以使用 switch。

<script>
        //1. switch 語(yǔ)句也是多分支語(yǔ)句 也可以實(shí)現(xiàn)多選1
        // 2. 語(yǔ)法結(jié)構(gòu) switch 轉(zhuǎn)換、開(kāi)關(guān)    case小例子或者選項(xiàng)的意思   break 退出
        /*     switch (表達(dá)式) {
                case value1: 執(zhí)行語(yǔ)句1; break;
                case value2: 執(zhí)行語(yǔ)句2; break;
                case value3: 執(zhí)行語(yǔ)句3; break;
                default: 執(zhí)行最后的語(yǔ)句;
            } */
        // 3. 執(zhí)行思路  利用我們的表達(dá)式的值 和 case 后面的選項(xiàng)值相匹配 如果匹配上，就執(zhí)行該case 里面的語(yǔ)句  如果都沒(méi)有匹配上，那么執(zhí)行 default里面的語(yǔ)句
        switch (2) {
            case 1: alert('這是1'); break;
            case 2: alert('這是2'); break;  //這是2
            case 3: alert('這是3'); break;
            default: alert('沒(méi)有匹配結(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. 我們開(kāi)發(fā)里面 表達(dá)式我們經(jīng)常寫(xiě)成變量
        // 2. 我們num 的值 和 case 里面的值相匹配的時(shí)候是 全等   必須是值和數(shù)據(jù)類型一致才可以 num === 1

break 如果當(dāng)前的case里面沒(méi)有break 則不會(huì)退出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è)值取過(guò)來(lái)保存到變量中。
        // 將這個(gè)變量作為 switch 括號(hào)里面的表達(dá)式。
        // case 后面的值寫(xiě)幾個(gè)不同的水果名稱，注意一定要加引號(hào) ，因?yàn)楸仨毷侨绕ヅ洹?
        // 彈出不同價(jià)格即可。同樣注意每個(gè) case 之后加上 break ，以便退出 switch 語(yǔ)句。
        // 將 default 設(shè)置為沒(méi)有此水果。
        var fruit = prompt('請(qǐng)輸入水果名稱')
        switch (fruit) {
            case '蘋(píng)果':
                alert('蘋(píng)果的價(jià)格是 3.5/斤');
                break;
            case '榴蓮':
                alert('榴蓮的價(jià)格是 35/斤');
                break;
            default:
                alert('沒(méi)有此水果');
        }
    </script>

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

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

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

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

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

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

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