2. 程式人生 > 實用技巧 >JavaScript運算子與流程控制

JavaScript運算子與流程控制

阿新 • • 發佈：2020-07-26

JavaScript運算子與流程控制

運算子

賦值運算子

　　使用=進行變數或常量的賦值。

<script>
​
        let username = "YunYa";
​
</script>

算術運算子

　　包括以下幾種算術運算子。

運算子說明
* 乘法
/ 除法
+ 加法
- 減法
% 取餘數 

<script>
​
        "use strict";
​
        let a = 1, b = 2;
​
        console.log(a + b);  // 3
        console.log(a - b);  //
 
 -1
        console.log(a * b);  // 2
        console.log(a / b);  // 0.5
        console.log(a % b);  // 1  第一個值比第二個值小，結果永遠為第一個。
​
</script>

複合運算子

　　複合運算子即增量運算子，用於更簡便的操作。

<script>
​
        "use strict";
​
        let x = 10;
        x += 1;  //  x = x + 1;
        x -= 1;  //  x = x - 1;
        x *= 1;  //
 
  x = x * 1;
        x /= 1;  //  x = x / 1;
​
</script>

一元運算子

　　一元運算子元的概念就是運算子號出現的次數。一元代表就一個運算子號，依次類推這個不多做介紹

　　在JavaScript中，一元運算子有++x，x++，以及--x和x--。

前置操作

　　前置操作會在表示式最先執行。

<script>
​
        "use strict";
​
        let n = 1;
        ++n;
        console.log(n);  // 2
        --n;
        console.log(n);  
 
// 1
​
</script>

　　++n就是 n=n+1的簡寫形式。

　　後置操作

　　後置操作會在表示式執行完後執行。

<script>
​
        "use strict";
​
        let n = 1;
        n++;
        console.log(n);  // 2
        n--;
        console.log(n);  // 1
​
</script>

　　二者區別

　　前置操作和後置操作平常使用沒什麼區別，但是在參與數學運算的時候區別還是有的。

　　前置操作總是先讓n+1後再參與運算。

　　後置操作總是等待運算結束後再對n進行+1操作。

<script>
​
        "use strict";
​
        let n = 0;
​
        console.log(++n + 30);  // 31  第一步：先算 ++n = 1  然後進行第二步： 1+30 = 31
​
​
</script>

<script>
​
        "use strict";
​
        let n = 0;
​
        console.log(n++ + 30);  // 30  第一步：0+30=30  第二步：計算完了對n進行+1，不過此時的n對計算結果已經沒有影響了。
​
​
</script>

比較運算子

運算子說明
> 大於
< 小於
>= 大於或等於
<= 小於等於
== 強制型別轉換比較，可理解為形式值相等。
=== 不強制型別轉換比較，可理解為絕對相等。
!= 形式不等於
!== 絕對不等於

　　比較運算子兩側如果一個是數字型別，一個是其他型別,會將其它型別轉換成數字型別。

　　比較運算子兩側如果都是字串型別，比較的是最高位的ASCII碼,如果最高位相等，繼續取第二位比較。

<script>
​
        "use strict";
​
        console.log(1 > "1");  // false
        console.log(1 < 0);   // false
        console.log(1 >= "0");  // true
        console.log(1 <= 2);  // true
        console.log(1 == "1");  // true
        console.log(1 === "1");  // false
        console.log(1 != "1");  // false
        console.log(1 != "1");  // true
​
</script>

邏輯運算子

運算子說明
&& 與 等同於 and 優先順序為比 ! 低。
|| 或 等同於 or 優先順序比 && 低。
! 非 等同於 not 優先順序最高。

　　邏輯與

　　一真一假取一假，全部為真才取真。

<script>

        "use strict";
        
        console.log(true && false); // false
        console.log(true && true); // true

</script>

　　邏輯或

　　一真一假取一真，全部為假才取假。

<script>

        "use strict";
        
        console.log(true || false); // true
        console.log(false || false); // false

</script>

　　邏輯非

　　取反，假變成真，真變成假。

<script>

        "use strict";
        
        console.log(! true || false); // false
        console.log(! false || false); // true

</script>

　　優先順序

　　如：! true && false || true 第一個true該給!還是該給&&參與計算？

　　牢記優先順序：

　　! > && > ||

　　所以上面的結果是true。

<script>

        "use strict";
        
        console.log(! true && false || true); // true

</script>

　　短路運算

　　如果一次邏輯運算中的邏輯運算子號全部為 && 或者 || 則會從左至右依次進行邏輯運算。

　　如果每一次都進行運算是很消耗時間的，所以這個時候出現了短路機制。

<script>

        "use strict";
        
        
        console.log(false &&  true && false && true );  // false
        // 只比對 前面的 false && true
        console.log(true || false || true || true || false); // true
        // 只比對 前面的 true || false
        console.log(1 + 2 && 2 - 1 && 0 && 3); //  0
        // 前面的 1 + 2 && 2 - 1為 1 再繼續比對 1 && 0 結果取 0 

        // 牢記 =====================
        //  && 一真一假取一假，兩個為真才取真
        // || 一真一假取一真，兩個為假才取假

</script>

流程控制

if/else

　　當條件為真時執行if下的程式碼塊。

　　否則執行else下的程式碼塊。

　　當語句只有一條時，可忽略花括號（極度不推薦，所以這裡不做演示）。

<script>

        "use strict";
        
        // prompt 輸入彈出框
        // trim 移除兩側空白字元
        // alert 輸出彈出框
        
        let user_input = prompt("請輸入使用者名稱:").trim();

        if (user_input){
                document.write("你輸入的使用者名稱是:",user_input);
        }else{
                alert("使用者未輸入");
        };

</script>

else if

　　else if用於多條件判斷。

　　在同一組條件判斷中只會執行最先成功的條件下的程式碼塊。

<script>

        "use strict";

        // prompt 輸入彈出框
        // trim 移除兩側空白字元
        // alert 輸出彈出框

        let user_input = prompt("請輸入使用者名稱:").trim();

        if (user_input === "YunYa") {
                document.write("歡迎您，雲崖先生...");
        }

        else if (user_input === "李二狗") {
                document.write("歡迎您，李二狗...");
        }

        else if (user_input) {
                document.write("輸入的是", user_input);
        }

        else {
                alert("使用者未輸入");
        };

</script>

三元表示式

　　是針對 if 判斷的簡寫形式。

　　語法如下

　　條件 ? 條件成立後返回的結果 : 條件不成立後返回的結果

<script>

        "use strict";

        let x = 100;
        x = !!x == true ? "真" : "假";
        console.log(x) // 真

</script>

switch

　　可以將 switch 理解為 if 的另一種結構清晰的寫法。

  • 如果case後表示式或結果等於 switch 括號後的值，將執行此 case 程式碼段

  • break 關鍵字會終止 switch 的執行

  • 沒有任何 case匹配時將執行default 程式碼塊

  • 如果case執行後缺少break則接著執行後面的語句

  1. case後必須跟上break，否則將繼續執行switch程式碼塊中的程式碼。

  2. default儘量放在最下面，如果放在上面需要在最後面加上break。

<script>

        "use strict";

        let username = prompt("請輸入使用者名稱:").trim()

        switch (username) {
                case "YunYa":

                        document.write("雲崖先生您好...");
                        break  // 注意，一定加上break

                case "Jack":

                        document.write("傑克先生您好...");
                        break

                default:

                        document.write("您好陌生人:",username)

        }

</script>

　　其實在case後可以跟隨表示式，case還具有if的功能。

　　但是要注意switch後面要跟上true，否則會走default。

<script>

        "use strict";

        let grades = prompt("請輸入成績:").trim()

        switch (true) {  // 注意跟上true
                    
                case grades > 80 :  // 這裡會產生一個布林值，與switch括號後的布林值做比對，如果相同則執行其下程式碼塊。否則向下走直到default

                        document.write("優秀...");
                        break  // 注意，一定加上break

                case grades > 60 :

                        document.write("及格...");
                        break

                default:

                        document.write("不及格...")

        }

</script>

while

　　當程式需要重複做一件事時，可使用while迴圈。

　　條件為真時進入迴圈體，條件為假時退出迴圈體。

　　注意避免死迴圈。

<script>

        "use strict";

        let num = 0;

        while (num++ < 5){
                console.log(num);   //  1 2 3 4 5
        }

</script>

<script>

        "use strict";

        let num = 0;

        while (num < 5) {
                console.log(num);   //  0 1 2 3 4
                num++;
        }

</script>

do/while

　　後條件判斷語句，無論條件是否為真都會先進行迴圈體。

　　迴圈至少執行一次，即便條件為 false，因為程式碼塊是在條件語句判斷前執行：

<script>

        "use strict";

        let num = 1;

        do {
                console.log("這裡是主程式碼執行區域..");
                // 執行一次

        }
        while (num > 100) { 
                console.log("主程式碼執行區域完了後無論如何都會執行這裡..")
                // 執行一次 ，儘管條件未成立也執行了
        };

</script>

<script>

        "use strict";

        let num = 105;

        do {
                console.log("這裡是主程式碼執行區域..");
                num --;
                // 執行五次

        }
        while (num > 100) { 
                console.log("主程式碼執行區域完了後無論如何都會執行這裡..")
                // 執行一次 ，儘管條件未成立也執行了
        };

</script>

for

　　for語句只要判斷條件為 true就會一直執行。

<script>

        "use strict";

        // 初始量  迭代條件  增量或減量
        for (let i = 0; i < 5; i++) {
                console.log(i); // 0 1 2 3 4
        };

</script>

break/continue

　　break跳出當前迴圈體。

　　continue跳過本次迴圈。

　　獲取所有偶數，所有奇數使用 continue 跳過

<script>

        "use strict";

        // 迭代變數  迭代條件  增量或減量
        for (let i = 1; i <= 10; i++) {
                if (i % 2) { continue; }
                console.log(i);
        }

</script>

　　當num大於5時退出迴圈，儘管並沒有迴圈完畢。

<script>

        "use strict";

        let num = 1;
        
        while (num) {

                if (num == 5) { break; };

                console.log(num); // 1 2 3 4
                num++;
        };

</script>

label

　　如果有多層迴圈巢狀，我們可以為每一層迴圈設定一個label，當使用continue或者break的時候就可跳到label所在的程式碼塊層。

<script>

        "use strict";

        outer: for (let i = 0; i < 10; i++) {
                // 這裡本來要迴圈十次的

                inner: while (true) {
                        // 直接結束掉了最外層的迴圈
                        break outer;

                };

                console.log("不會執行我了...");
        };

        // 只打印下面這一句
        console.log("執行我了,迴圈結束...")
        
</script>

for in

　　當使用for in對array物件進行取值時，拿到的全是index索引。

　　更建議使用for in來遍歷鍵值對的物件。

　　切記不要用for in來迴圈DOM物件集合。

　　它會出現非常讓人意外的情況，會拿出一些額外的東西。

<script>

        "use strict";

        let arr = ["中國", "美國", "俄羅斯", "義大利"];

        // 迭代變數 in 可迭代物件
        for (let index in arr) {

                // 取到的都是索引
                console.log(index);
                // 要這樣取才是值本身
                console.log(arr[index]);
        };

</script>

　　for in迴圈操作 DOM物件集合，會拿出出一些額外的東西。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>

<body>

        <div class="ele"></div>
        <div class="ele"></div>
        <div class="ele"></div>
        <div class="ele"></div>

</body>

<script>

        "use strict";

        let tag = document.querySelectorAll(".ele");

        // 迭代變數 in 可迭代物件
        for (let index in tag) {
                console.log(tag[index]);
        };

</script>

</html>

for of

　　for of迴圈array物件時，拿到的是元素本身。

　　當迴圈DOM物件時，不會發生令人意外的情況。

<script>

        "use strict";

        let arr = ["中國", "美國", "俄羅斯", "義大利"];

        // 迭代變數 of 可迭代物件
        for (let name of arr) {

                console.log(name);
       
        };

</script>

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>

<body>

        <div class="ele"></div>
        <div class="ele"></div>
        <div class="ele"></div>
        <div class="ele"></div>

</body>

<script>

        "use strict";

        let tag = document.querySelectorAll(".ele");

        // 迭代變數 of 可迭代物件
        for (let ele of tag) {
                console.log(ele);
        };

</script>


</html>

相關推薦

JavaScript運算子與流程控制

JavaScript運算子與流程控制 運算子 賦值運算子 　　使用=進行變數或常量的賦值。

JavaScript 運算子與流程控制

賦值運算子與算術運算子： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

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

目錄1. 運算子(操作符)1.1 算數運算子1.2 遞增和遞減運算子1.3 比較運算子1.4 邏輯運算子1.5 賦值運算子1.6 運算子優先順序2. 流程控制2.1 if 的語法結構2.2 if else雙分支語句2.3 if else if語句（多選1）2.4 三元表

python學習筆記2-運算子與流程控制

一、垃圾回收機制： 　　（1）引用計數：變數值被變數名關聯（引用）的次數，存在迴圈引用問題。

JavaScript(基礎與流程控制)

一、基礎 1、JS的組成 ECMAScript(JavaScript語法) ECMAScript規定了JS程式設計語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準

Shell 運算子與流程控制

技術標籤：LinuxShell 1.運算子 $((a+b)) : $[a+b] : 建議使用 expr a + b : expr 的 乘以* 需要轉義 為\\*

第三章 運算子與流程控制

一、小結 　　本章介紹了有關運算子的分類和各種運算子的使用方法，以及運算子之間的優先順序；流程控制的語句，主要包括分支語句、迴圈語句和跳轉語句，這些流程控制語句是Java語言程式設計的關鍵基礎。靈活使用流

JS基礎篇2--運算子與流程控制

1 - 運算子（操作符） 1.1 運算子的分類 運算子（operator）也被稱為操作符，是用於實現賦值、比較和執行算數運算等功能的符號。

JavaScript高階(05_流程控制與迴圈)

流程控制 js中的程式是從上到下一行行執行的 通過流程控制語句可以控制程式執行的流程

基本運算子，流程控制之if判斷

一、基本運算子 上篇講了基本運算子：算數運算子，比較運算子 本篇講：賦值運算子，邏輯運算子

Java基礎之方法與流程控制

1.方法 定義一個方法的格式： //方法名稱的命名規則和變數一樣，使用小駝峰 public static void 方法名稱() {

5.垃圾回收機制、互動、運算子、流程控制if判斷

1.垃圾回收機制詳解（瞭解） 棧區與堆區 棧區：變數名與值記憶體地址的關聯關係存放於棧區

Java時間膠囊-Java基本語法（1）（運算子和流程控制（1））

Java時間膠囊-Java基本語法（1）（運算子和流程控制（1）） 運算子 （運算子是一種特殊的符號 用以表示資料的運算 賦值 比較）

A tour of Go (2) - Go語言運算子&流程控制

Thursday, December 17, 2020 A tour of Go (2) - Go語言運算子&流程控制 1. Go語言運算子 不需要匯入包

原生js中運算子及流程控制示例詳解

運算子 算數：+ 加、- 減、* 乘、/ 除、% 求模 賦值：=、+=、-=、*=、/=、%= 關係：>、<、 >=、 <=、 ==、 ===、 !=、 !==

js-3：運算子和流程控制

###############JS運算子################ /* 算數運算子： + - * / % ++ -- var n =10; n++//11，就是n=n+1

JavaScript學習之流程控制

分支結構 if語句 判斷語句，語法結構如下： if(expr){ statement } 如果表示式expr為真，則執行語句statement,否則，忽略statement。

js筆記_運算子_流程控制(if語句)

程式=資料+演算法 程式的執行方式：順序執行、選擇執行、迴圈執行 1.邏輯運算子的優先順序

js基礎與流程控制

------------恢復內容開始------------ ------------恢復內容開始------------ var宣告變數 變數的賦值

4.運算子和流程控制

運算子 在 PHP 中，賦值運算子 = 用於給變數賦值。 在 PHP 中，算術運算子 + 用於把值加在一起