1. 程式人生 > >JavaScript中的邏輯運算子詳解!

JavaScript中的邏輯運算子詳解!

今天我們來總結一下Js中的三種邏輯運算子:與 &&     或 ||     非 !

  • &&操作符 (全真為真,有假則假)。​​​​​

"與" 翻譯過來就是並且的意思,只有當條件1到條件n都滿足,結果才成立。

在JS中的&&又叫做 “短路與”,

意思就是在判斷第一個表示式為fasle之後,就不必對後面的表示式進行判斷了,因為但凡有false,結果肯定是false。

邏輯與可以操作任意資料型別的資料(這是JS與其他一些程式語言不一樣的地方)

根據&&兩端表示式的資料型別不同,可分為以下兩種:

  • 對於運算元為boolean型別的資料

1. true&&true ===>true;  

2. true&&false===>false;

3. false&&true===>false;

4. false&&false ===>false.

1.從運算結果可以看出,運算元為boolean型別的資料,結果返回都是Boolean

2.上述例2和例3,計算結果雖然相同,但因為是“短路”操作,執行效率是不一樣的。

  • 對於運算元為非boolean型別的資料

先將其進行隱式型別轉換,在進行判斷,最終返回原值

舉幾個例項說明一下:

<!DOCTYPE html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<title>邏輯運算子</title>
     <script type="text/javascript">
        //當運算元為兩個時,
   		console.log(5&&4+"\n"); // 5隱式轉換之後為true,返回4
		console.log(4&&5+"\n"); // 4隱式轉換之後為true,返回5
                console.log(""&&5+"\n"); //空字串轉換之後為false,返回""
		console.log(null&&5+"\n");  //操作符中存在null,結果就為null
		console.log(4&&undefined+"\n"); //操作符中存在undefined,結果就為null
		console.log(NaN&&5+"\n");  //操作符中存在NaN,結果就為null
        //當運算元為3個及以上時,
        console.log(5&&4&&6+"\n"); //結果為真時,返回最後一個數的原值 6
    </script>
 </head>
 <body>
 </body>
</html>

當運算元為非Boolean型別的時候,&&運算子依舊遵循“短路”運演算法則:

以兩個運算元為例: (表示式1&&表示式2)

1.如果第一個運算元隱式轉換為Boolean之後為true,則返回第二個運算元;

2.如果第一個運算元隱式轉換為Boolean之後為false,則返回第一個運算元;

3.在&&運算中,但凡運算元中有 null ,undefined ,NaN 這些特殊值,結果就返回這些值。(雖然這些值轉換為Boolean之後為false,但返回是將這些值直接輸出)

  • ||或操作符(有真則真,全假則假

同樣道理,"或"翻譯過來 是或者的意思,只要n個條件中只有1個條件滿足,結果就會返回真。

"或"也遵循“短路”運算,和“與”相反,當表示式1為true,就返回true,停止了對後面表示式的判斷。

舉幾個例項說明一下:

<!DOCTYPE html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<title>邏輯運算子</title>
     <script type="text/javascript">
        //當運算元為兩個時,
   		console.log(5||4+"\n"); // 5隱式轉換之後為true,返回5
		console.log(4||5+"\n"); // 4隱式轉換之後為true,返回4
                console.log(""||5+"\n"); //空字串轉換之後為false,返回5
		console.log(null||5+"\n");  //null隱式轉換之後為false,返回5
		console.log(4||undefined+"\n"); //4隱式轉換之後為true,返回4
		console.log(NaN||5+"\n");  // NaN隱式轉換之後為false,返回5
                //當運算元為3個及以上時,
                console.log(5||4||6+"\n"); //結果為真時,返回第一個數的原值 5    
      </script>
 </head>
 <body>
 </body>
</html>

以兩個運算元為例: (表示式1||表示式2)

1.如果第一個運算元隱式轉換為Boolean之後為true,則返回第一個運算元;

2.如果第一個運算元隱式轉換為Boolean之後為false,則返回第二個運算元;

3.需要注意的是:||運算子不對 null, undefined, NaN 有特殊要求,而是將他們隱式轉換為  false。

  • !非運算子(非真即假)
  • 對於運算元為非boolean型別的資料    

        對一個boolean值進行取反操作,即:!true=false    !fasle=true

  • 對於運算元為非boolean型別的資料

         首先將其轉換為Boolean,在進行雙取反(兩次非運算操作)

Var a =10;  
console.log(typeof a); //  number
console.log(a);  //10

a=!!a; //  對a進行兩次取反
console.log(typeof a);  //boolean
console.log( a);  // true 

  !!a==Boolean(a) 對a進行的兩次非運算操作相當於是對a進行Bololean的強制型別轉化。

像這種隱式型別轉換用法更靈活,也比較方便,

  • Number轉換為String
    var a= 123;
    a=a+"";  //相當於 String(a)或者 a.toString()
    console.log(typeof a); //String
    console.log(a);  //123
  • String轉換為Number
var str="12345";
console.log(typeof str);   //string
var str=str*1;             //相當於Number(str)或parseInt(str)
console.log(typeof str);   //number
console.log(str);          //12345

所以字串轉化為數字型別,可以通過 str-0, str*1, str/1,這樣的運算實現隱式型別轉換。

另外需要注意的是,唯一沒有+運算子,因為直譯器會認為+號是字串和數字的拼接。