js中的 || 與 && 運(yùn)算符詳解

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

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

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

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

1.&&

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

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

2.||

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

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

3.！

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

上代碼說明：

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

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

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

補(bǔ)充

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

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

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

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

零為false;

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

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

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

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

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

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;

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

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

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

邏輯與 && ： var a = 表達(dá)式1 && 表達(dá)式2

　　　　　　表達(dá)式1　　　　表達(dá)式2　　　　a取值

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

主要原因是因?yàn)槎搪?，邏輯?|| 在前面有一個(gè)ture的時(shí)候則不看后面直接停止，邏輯與&&同理。
然后計(jì)算賦值和我們平時(shí)一樣之獲取最新的一次計(jì)算結(jié)果值。

例如