JavaScript中的運算符

JS運算子

要進行各種不同的運算,就要使用不同的運算符號。


算術運算子:+、-、*、/、%、++、--

A = 10 + 20;

#A = 10 – 20;

A = 10 * 20;

# A = 10 / 20;

(1)「%」取餘運算符,兩個數相除,取餘數。

A = 10 % 3;  // A = 1,若餘數不為0,則兩個無法整除

A = 10 % 2;  // A = 0,若餘數為0,則兩個數能除盡


(2)「++」加1運算子、自加1

##「++」可以作前綴(++i),也可以作字尾(i++)。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
           var a = 1;
           var b = 1;
           document.write(++a);
           document.write("<hr>")
           document.write(b++);
        </script>
    </head>
    <body>
    </body>
</html>

觀察上面範例的輸出結果

  • #當++a時,無論如何,都會先執行a=a+ 1,然後執行輸出其它操作,如在頁面輸出、運算之類的

  • #當b++時,會先執行其它操作,如輸出、運算之類別的,最後等這語句結束時,執行a=a+1,然後這條語句結束

#(3)「--」減1運算符,自減1

「--」可以作前綴(--i),也可以作字尾(i--)。

「--」的例了與「++」範例一樣,請大家自己嘗試測試。


賦值運算子:=、+=、-=、*=、/=

「+= 」先加後等。如:a += 10  //展開後  a = a + 10

「-=」先減後等。如:a -= 10   //展開後  a = a - 10

「*=」先乘後等。如:a *= 10  //展開後  a = a * 10

「/=」先除後等。如:a /= 10   //展開後 a = a / 10


字串運算子:+、+ =

字串只能進行「連接」運算,不能進行其它運算。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
           var name = "php.cn";
           var str = "欢迎来到"+name;
           document.write(str);
        </script>
    </head>
    <body>
    </body>
</html>

比較運算子:>、<、>=、<=、==、!=、===、!==

比較運算子的運算結果是布林值(true或false)。

A = 10 > 20;       // 結果A=false

A = 20>=20;       // 結果A=true

A = 1000 %2 == 0;    // 結果A=true

A = 10%2 == “0”;  // 結果A=true

A = 10%3 != 0; // 結果A=true

A = 10%2 === “0”;  //結果A=false

註:

##“=”是賦值號碼。如:a = 10

“==”等於。只比較兩個變數的值,而不管類型。只要值一樣,就回傳true,否則回傳false。

“===”全等於。既比較變量,也判斷類型。如果類型和值都一樣,回傳true,否則回傳false。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        //比较字符串数值和数值
           var name1 = "520";
           var name2 = 520;
        document.write(name1==name2);
        document.write("<hr>");
        document.write(name1===name2)
        </script>
    </head>
    <body>
    </body>
</html>


#邏輯運算子:&&、||、!

#邏輯運算子的運算結果有兩個true或false。

“&&”邏輯與(並且關係)。如果左右兩個操作數都為true,則結果為true,否則,結果為false。

邏輯與,就是兩個條件同時滿足時,則結果為true。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        //给一个成绩
        var score=61;
        //判断成绩所属级别
        if(score<60){
            document.write("对不起,您没有及格");
        }else if (score>=60&&score<70){
            document.write("您刚好及格");
        }
        </script>
    </head>
    <body>
    </body>
</html>

“||”邏輯或。左右兩個條件,只要有一個滿足,則回傳true,否則,回傳false。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var age=79;
        if(age<10||age>60){
            document.write("您好,您符合我们店的优惠条件,今天买东西全场5折");
        }else if (age>=10&&age<=60){
            document.write("不好意思,您不符合我们店的优惠条件,今天买东西不享受折扣");
        }
        </script>
    </head>
    <body>
    </body>
</html>

“!”取反運算。 !true = false  、   !false = true  、 !100 = false

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var a=true;
        document.write(a);
        document.write("<br/>");
        document.write(!a);
        </script>
    </head>
    <body>
    </body>
</html>

三元運算子:?:

#所謂「三元運算子」就是指三個運算元。

語法:條件式? 結果1 : 結果2

語法:操作數1 ? 操作數2 : 運算元3

##意義:如果條件為true,則執行「結果1」的程式碼;如果條件為false,則執行「結果2」的程式碼。

其實:三元運算符,就是if else的變形形式。 (if else我們下一章學習)

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var a=10;
        var b=20;
        //判断a和b那个大,把大的那个赋值给max
        var max=a>b?a:b;
        document.write("最大值:"+max);
        </script>
    </head>
    <body>
    </body>
</html>


#

繼續學習
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script> var a = 1; var b = 1; document.write(++a); document.write("<hr>") document.write(b++); </script> </head> <body> </body> </html>