js中的 || 與 && 運算符詳解

更新時間：2018年05月24日 20:57:35 作者：她夏了夏天

這篇文章主要介紹了js中的 || 與 && 運算符詳解,需要的朋友可以參考下

js中邏輯運算符在開發(fā)中可以算是比較常見的運算符了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。

當(dāng)&&和|| 連接語句時，兩邊的語句會轉(zhuǎn)化為布爾類型（Boolean），然后再進行運算，具體的運算規(guī)則如下：

1.&&

1.1兩邊條件都為true時，結(jié)果才為true；
1.2如果有一個為false，結(jié)果就為false；
1.3當(dāng)?shù)谝粋€條件為false時，就不再判斷后面的條件

注意：當(dāng)數(shù)值參與邏輯與運算時，結(jié)果為true，那么會返回的會是第二個為真的值；如果結(jié)果為false，返回的會是第一個為假的值。

2.||

2.1只要有一個條件為true時，結(jié)果就為true；
2.2當(dāng)兩個條件都為false時，結(jié)果才為false；
2.3當(dāng)一個條件為true時，后面的條件不再判斷

注意：當(dāng)數(shù)值參與邏輯或運算時，結(jié)果為true，會返回第一個為真的值；如果結(jié)果為false，會返回第二個為假的值；

3.！

3.1當(dāng)條件為false時，結(jié)果為true；反之亦然。

上代碼說明：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>demo</title> 
  <script> 
    console.log( 5 && 4 );//當(dāng)結(jié)果為真時，返回第二個為真的值4 
    console.log( 0 && 4 );//當(dāng)結(jié)果為假時，返回第一個為假的值0 
    console.log( 5 || 4 );//當(dāng)結(jié)果為真時，返回第一個為真的值5 
    console.log( 0 || 0 );//當(dāng)結(jié)果為假時，返回第二個為假的值0 
    console.log((3||2)&&(5||0));//5 
    console.log(!5);//false 
  </script> 
</head> 
<body> 
 
</body> 
</html>

補充：邏輯與的優(yōu)先級是高于邏輯或的；

比如console.log(3||2&&5||0),會先算2&&5的值為5，然后再3||5----3，最后再3||0----3，所以最終結(jié)果為3.

補充

表達式a && 表達式b : 計算表達式a（也可以是函數(shù)）的運算結(jié)果，
如果為 True, 執(zhí)行表達式b（或函數(shù)），并返回b的結(jié)果；
如果為 False，返回a的結(jié)果；

表達式a || 表達式b :   計算表達式a（也可以是函數(shù)）的運算結(jié)果，
                      如果為 Fasle, 執(zhí)行表達式b（或函數(shù)），并返回b的結(jié)果；
                      如果為 True，返回a的結(jié)果；

轉(zhuǎn)換規(guī)則:

對象為true；
非零數(shù)字為true；

零為false;

非空字符串為true；
空字符串為法false;
其他為false；

例如：
var a = obj || " " ; //如果 obj 為空，a就賦值為 " " ；
var a = check() && do(); //如果check()返回為真，就執(zhí)行do()，并將結(jié)果賦值給 a;

其他網(wǎng)友的補充

今天復(fù)習(xí)js繼承的時候發(fā)現(xiàn)了一個問題，先上代碼了

<script type="text/javascript">
 window.onload = function () {
  var mama,
  mama1,
  test = function (name) {
  debugger;
  this.name = name || 'mama';
  };
  debugger;
  mama = new test();
  mama1 = new test("mama1");
  alert(mama.name);//name = mama
  alert(mama1.name);// name = mama1
 }

 </script>

在執(zhí)行構(gòu)造函數(shù)的時候，無參的構(gòu)造函數(shù)返回的name是'mama'，有參數(shù)時，實例的name就是參數(shù)值了。
這個時候我就有點犯迷糊了，為什么邏輯運算符||能這么用呢？
由于是C#出身，所以對js ||這樣用感覺很奇怪。
沒轍，不懂先研究，實驗實驗就知道了。

var b, c, d;
  b = true || 0;//b=true;
  c = false || 0;//c=0;
  d = 1 || 0;//d=1;

換成別的呢？

var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return undefined } || function () { return 1};//c=function();
  d = c();//d=undefined

var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return 1 } || function () { return undefined};//c=function();
  d = c();//d=1

b = {} || { a: 1, getA: function () { return this.a}}; //b=object

var b, c, d;
  b = { a: 1, getA: function () { return this.a } } || {}; //b=object
  c = b.getA();//c=1;

通過這幾個實驗，可以看出，JS的||并不是像C#里面的||一樣單純的返回一個布爾類型。
大家都知道js的布爾類型判定是對象是true，非零是true，非空字符串是true其余的都是false

由此得出
邏輯或 || ： var a = 表達式1 || 表達式2

　　　　　　表達式1　　　　表達式2　　　　a取值
　　　　　　 1 　　　　　　0　　　　　　表達式1結(jié)果值
　　　　　　 1　　　　　　　 1　　　　　　表達式1結(jié)果值
　　　　　　 0　　　　　　　 1　　　　　　表達式2結(jié)果值
　　　　　　 0　　　　　　　 0　　　　　　表達式2結(jié)果值

邏輯與 && ： var a = 表達式1 && 表達式2

　　　　　　表達式1　　　　表達式2　　　　a取值

　　　　　　 1 　　　　　　0　　　　　　表達式2結(jié)果值
　　　　　　 1　　　　　　　 1　　　　　　表達式2結(jié)果值
　　　　　　 0　　　　　　　 1　　　　　　表達式1結(jié)果值
　　　　　　 0　　　　　　　 0　　　　　　表達式1結(jié)果值

主要原因是因為短路，邏輯或 || 在前面有一個ture的時候則不看后面直接停止，邏輯與&&同理。
然后計算賦值和我們平時一樣之獲取最新的一次計算結(jié)果值。

例如