全面解析JavaScript中「&&」和「||」操做符(總結篇)

一、||（邏輯或）,

從字面上來講，只有先後都是false的時候才返回false，不然返回true。

?

1 2 3 4

alert( true || false ); // true alert( false || true ); // true alert( true || true ); // true alert( false || false ); // false

這個傻子都知道~~

可是，從深層意義上來講的話，卻有另外一番天地，試下面代碼

?

1	alert(0||1); //1

顯然，咱們知道，前面0意味着false,然後面1意味着true,那麼上面的結果應該是true,而事實返回的結果是1。再看下面代碼：

?

1	alert(2||1); //2

咱們知道，前面2是true,後面1也是true,那返回結果又是什麼呢？測試結果是2,繼續看：

?

1	alert( 'a' ||1); //'a'

一樣，前面'a'是true，後面1也是true;測試結果是'a',下面

?

1	alert( '' ||1); //1

由上，咱們知道前面」是false,後面1是true,而返回結果是1。再看下面

?

1	alert( 'a' ||0); //'a'

前面'a'是true，然後面0是false,返回結果是'a'，繼續下面

?

1	alert( '' ||0); //0

前面」是false,後面0一樣是false,返回結果是0

?

1	alert(0|| '' ); //''

前面0是false，後面」是false，返回結果是」

這就意味

一、只要「||」前面爲false,無論「||」後面是true仍是false，都返回「||」後面的值。

二、只要「||」前面爲true,無論「||」後面是true仍是false，都返回「||」前面的值。

我稱這種爲短路原理： 知道了前面第一個的結果就知道後的輸出，若是爲第一個爲：true，則取第一個的值，若是第一個爲false，則取第二個的值。

js必須牢記的6個蛋蛋： 請你必定要記住：在js邏輯運算中，0、」「、null、false、undefined、NaN都會判爲false，其餘都爲true（好像沒有遺漏了吧，請各位確認下）。這個必定要記住，否則應用||和&&就會出現問題。

這裏順便提下：常常有人問我，看到不少代碼if(!!attr)，爲何不直接寫if(attr)；

其實這是一種更嚴謹的寫法：
請測試 typeof 5和typeof !!5的區別。!!的做用是把一個其餘類型的變量轉成的bool類型。

2.&&（邏輯與）

從字面上來講，只有先後都是true的時候才返回true，不然返回false。

?

1 2 3 4

alert( true && false ); // false alert( true && true ); // true alert( false && false ); // false alert( false && true ); // false

而後，根據上面經驗，咱們看看「&&」號先後，不僅僅是布爾類型的狀況。

?

1	alert( '' &&1); //''

結是返回」,「&&」前面」是false,後面是1是true。

?

1	alert( '' &&0); //''

結是返回」,「&&」前面」是false,後面是0也是false。

?

1	alert( 'a' &&1); //1

結是返回1,「&&」前面」a是true,後面是1也是true。

?

1	alert( 'a' &&0); //0

結是返回0,「&&」前面」a是true,後面是0是false。

?

1	alert( 'a' && '' ); //''

結是返回」,「&&」前面」a是true,後面是」是false。

?

1	alert(0&& 'a' ); //0

結是返回0,「&&」前面」0是false,後面是'a'是true。

?

1	alert(0&& '' ); //0

結是返回0,「&&」前面」0是false,後面是」也是false。

短路原理

一、只要「&&」前面是false，不管「&&」後面是true仍是false，結果都將返「&&」前面的值;

二、只要「&&」前面是true，不管「&&」後面是true仍是false，結果都將返「&&」後面的值;

3.在開發中的應用

下面三段代碼等價：

?

1 2 3 4 5 6 7

a=a|| "defaultValue" ;  if (!a){  a= "defaultValue" ;  }  if (a== null ||a== "" ||a==undefined){  a= "defaultValue" ;  }

你願意用哪個呢？

二、 像var Yahoo = Yahoo || {};這種是很是普遍應用的。 得到初值的方式是否是很優雅？比if。。。。else…好不少，比？：也好很多。

三、 callback&&callback()

在回調中，常常這麼寫，更嚴謹，先判斷 callback 是否是存在，若是存在就執行，這樣寫的目的是爲了防止報錯
若是直接寫 callback(); 當callback不存在時代碼就會報錯。

四、綜合實例

需求如圖：

這裏寫圖片描述

假設對成長速度顯示規定以下：

成長速度爲5顯示1個箭頭；
成長速度爲10顯示2個箭頭；
成長速度爲12顯示3個箭頭；
成長速度爲15顯示4個箭頭；
其餘都顯示都顯示0各箭頭。
用代碼怎麼實現？

差一點的if，else：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var add_level = 0;  if (add_step == 5){  add_level = 1;  }  else if (add_step == 10){  add_level = 2;  }  else if (add_step == 12){  add_level = 3;  }  else if (add_step == 15){  add_level = 4;  }  else {  add_level = 0;  }

稍好些的switch：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var add_level = 0;  switch (add_step){  case 5 : add_level = 1;  break ;  case 10 : add_level = 2;  break ;  case 12 : add_level = 3;  break ;  case 15 : add_level = 4;  break ;  default : add_level = 0;  break ; }

若是需求改爲：

成長速度爲>12顯示4個箭頭；
成長速度爲>10顯示3個箭頭；
成長速度爲>5顯示2個箭頭；
成長速度爲>0顯示1個箭頭；
成長速度爲<=0顯示0個箭頭。

那麼用switch實現起來也很麻煩了。

那麼你有沒有想過用一行就代碼實現呢？

ok，讓咱們來看看js強大的表現力吧：

?

1	var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

更強大的，也更優的：

?

1	var add_level={ '5' :1, '10' :2, '12' :3, '15' :4}[add_step] || 0;

第二個需求：

?

1	var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

以上所述是小編給你們介紹的全面解析JavaScript中「&&」和「||」操做符(總結篇)，但願對你們有所幫助