Javascript基礎:運算符與流程控制詳解

Posted on by

1. 運算符(操作符)

「運算符」是用於實現賦值、比較和執行算數運算等功能的符號。常用運算符分類如下

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

1.1 算數運算符

運算符 描述 案例
+ 加 10+20=30
– 減 10-20=-10
* 乘 10*20=200
/ 除 10/20=0.5
% 取餘(取模) 返回除法的餘數9%2=1 
  //alert(1 + 1);
        console.log(1 + 1);  //運算符的左右兩側都要敲空格
        //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.浮點數 算數運算裡面會有問題

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

浮點數值的最高精度是17位小數，但是在進行算數運算時其精確度遠遠不如整數,所以不要直接判斷兩個浮點數是否相等!

3. 我們不能直接拿浮點數來進行相比較 是否相等

 var num = 0.1 + 0.2;
 alert(num == 0.3);          //false   要轉化為2進制，精確度會有誤差
  • 表達式與返回值
    • 表達式：由數字、運算符和變量組成的式子。
    • 返回值：每一個表達式經過相應的運算之後，會有一個最終結果，稱為表達式的返回值
  // 是由數字、運算符、變量等組成的式子 我們稱為表達式   1+1 // alert(1 + 1);  //2 就是返回值    //寫法    //1 + 1=2    // 在我們程序裡面  2 = 1 + 1 把我們右邊表達式計算完畢把返回值給左邊    var num = 1 + 1;    // alert(num);  //2

1.2 遞增和遞減運算符

如果需要反復給數字變量添加或減去1，可以使用遞增（ + + ）和遞減（ – – ）運算符來完成。

在javascript 中，遞增（ + + ）和遞減（ – – ）運算符既可以放在變量前面，也可以放在變量後面。放在變量前面時，稱為前置遞增（ 遞減 ）運算符，放在後面是後置遞增（ 遞減 ）運算符

註意：遞增和遞減運算符必須配合變量使用。

前置遞增運算符使用口訣：先自加，後返回值

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

前置遞增運算符使用口訣：先返回值原值 後自加1

 <script>
        var num = 10;
        num++; // num = num + 1  ++num
        // alert(num);         //11
        //1. 前置自增和後置自增如果單獨使用  效果是一樣的
        //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 是表達式
        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
        // 後置自增  先表達式返回原值  後面變量再自加1
        // 前置自增  先自加，後運算
        // 單獨使用 ，運行結果相同
        // 開發時，大多數使用後置遞增/減，並且代碼獨占一行，例如：num++;或者num--
 </script>

1.3 比較運算符

比較運算符是兩個數據進行比較時所使用的運算符，比較運算符，會返回一個佈爾值（true/false）作為比較運算的結果。

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

1.4 邏輯運算符

概念：邏輯運算符是用來進行佈爾值運算的運算符，其返回值也是佈爾值。後面開發中經常用於多個條件的判斷

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

練習：

   <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>

短路運算（邏輯中斷）:（js API）

當有多個表達式（值）時,左邊的表達式值可以確定結果時,就不再繼續運算右邊的表達式的值;

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

1.5 賦值運算符

運算符 描述 案例
= 直接賦值 var userName = ‘fan’
+= -= 加減一個數後 再賦值 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 運算符優先級

優先級 運算符 順序
1 小括號 ()
2 一元運算符 ! ++ —
3 算數運算符 先* / % 後+ –
4 關系運算符 > >= < <=
5 相等運算符 == != === !==
6 邏輯運算符 先&& 後||
7 賦值運算符 =
8 逗號運算符 , 
  <script>
        //  一元運算符：++num   !num     二元運算符： 2 + 3
        // 練習1
        console.log(4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true) //true
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
        console.log('-------------------');
        // 練習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. 流程控制

「流程控制」在一個程序執行的過程中，各條代碼的執行順序對程序的結果是有直接影響的。很多時候我們要通過控制代碼的執行順序來實現我們要完成的功能。流程控制主要有三種結構，分別是順序結構、分支結構和循環結構，代表三種代碼執行的順序。

分支流程控制:

2.1 if 的語法結構

        if (條件表達式) {
            //執行語句
        }
        2. 執行思路 如果
        if 裡面的條件表達式結果為真 true 則執行大括號裡面的 執行語句
        如果if 條件表達式結果為假 則不執行大括號裡面的語句 則執行if 語句後面的代碼
        3. 體驗代碼：
        if (3 < 5) {
            alert('沙漠駱駝');
        }

案例：

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

2.2 if else雙分支語句

<script>
        // 1. 語法結構  if 如果  else 否則
        // if (條件表達式) {
        //     // 執行語句1
        // } else {
        //     // 執行語句2 
        // }
        // 2. 執行思路 如果表達式結果為真 那麼執行語句1  否則  執行語句2
        // 3. 代碼驗證
        var age = prompt('請輸入您的年齡:');
        if (age >= 18) {
            alert('我想帶你去網吧偷耳機');
        } else {
            alert('滾， 回傢做作業去');
        }
        // 5. if裡面的語句1 和 else 裡面的語句2 最終隻能有一個語句執行  2選1
        // 6.  else 後面直接跟大括號
    </script>

案例：閏年

  //  算法：能被4整除且不能整除100的為閏年（如2004年就是閏年，1901年不是閏年）或者能夠被 400 整除的就是閏年
        // 彈出prompt 輸入框，讓用戶輸入年份，把這個值取過來保存到變量中
        // 使用 if 語句來判斷是否是閏年，如果是閏年，就執行 if 大括號裡面的輸出語句，否則就執行 else裡面的輸出語句
        // 一定要註意裡面的且 &&  還有或者 || 的寫法，同時註意判斷整除的方法是取餘為 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. 多分支語句   就是利用多個條件來選擇不同的語句執行 得到不同的結果  多選1 的過程
        // 2. 是多分支語句
        // 3. 語法規范if else if語句
        if (條件表達式1) {
            //語句1;
        } else if (條件表達式2) {
            //語句2;
        } else if (條件表達式3) {
            //語句3;
        } else {
            //最後語句;
        }
        // 4. 執行思路
        // 如果條件表達式1 滿足就執行 語句1 執行完畢後，退出整個if 分支語句  
        // 如果條件表達式1 不滿足，則判斷條件表達式2  滿足的話，執行語句2 以此類推
        // 如果上面的所有條件表達式都不成立，則執行else 裡面的語句
        // 5. 註意點
        // (1) 多分支語句還是多選1 最後隻能有一個語句執行
        // (2) else if 裡面的條件理論上是可以任意多個的
        // (3) else if 中間有個空格瞭
    </script>

案例：成績

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

2.4 三元表達式

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

案例 : 數字補0​​​​​​​

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

2.5 switch分支流程控制

switch 語句也是多分支語句，它用於基於不同的條件來執行不同的代碼。當要針對變量設置一系列的特定值的選項時，就可以使用 switch。

    <script>
        //1. switch 語句也是多分支語句 也可以實現多選1
        // 2. 語法結構 switch 轉換、開關    case小例子或者選項的意思   break 退出
        /*     switch (表達式) {
                case value1: 執行語句1; break;
                case value2: 執行語句2; break;
                case value3: 執行語句3; break;
                default: 執行最後的語句;
            } */
        // 3. 執行思路  利用我們的表達式的值 和 case 後面的選項值相匹配 如果匹配上，就執行該case 裡面的語句  如果都沒有匹配上，那麼執行 default裡面的語句
        switch (2) {
            case 1: alert('這是1'); break;
            case 2: alert('這是2'); break;  //這是2
            case 3: alert('這是3'); break;
            default: alert('沒有匹配結果');
        }
    </script>

註意事項：

        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. 我們開發裡面 表達式我們經常寫成變量
        // 2. 我們num 的值 和 case 裡面的值相匹配的時候是 全等   必須是值和數據類型一致才可以 num === 1

break 如果當前的case裡面沒有break 則不會退出switch 是繼續執行下一個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 輸入框，讓用戶輸入水果名稱，把這個值取過來保存到變量中。
        // 將這個變量作為 switch 括號裡面的表達式。
        // case 後面的值寫幾個不同的水果名稱，註意一定要加引號 ，因為必須是全等匹配。
        // 彈出不同價格即可。同樣註意每個 case 之後加上 break ，以便退出 switch 語句。
        // 將 default 設置為沒有此水果。
        var fruit = prompt('請輸入水果名稱')
        switch (fruit) {
            case '蘋果':
                alert('蘋果的價格是 3.5/斤');
                break;
            case '榴蓮':
                alert('榴蓮的價格是 35/斤');
                break;
            default:
                alert('沒有此水果');
        }
    </script>

switch 語句和 if else if區別：

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

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

3. switch 語句進行條件判斷後直接執行到程序的條件語句，效率更高。而if..else 語句有幾種條件，就得判斷多少次。

4. 當分支比較少時，if…else語句的執行效率比switch語句高。

5. 當分支比較多時，switch語句的執行效率比較高，而且結構更清晰。

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：