此篇是給新手看的,老手可以直接上一頁了

這篇要來仔細研究的是邏輯運算子的使用,與一些開發上的小技巧

大家看到標題一定會以為這篇又是來混篇數的, &&、||、! (and、or、not) 還需要你講嗎

的確是混篇數沒錯,但如果真的了解這幾個運算子的使用,能讓你在開發時的 code 更簡短,邏輯更清晰

Javascript 有以下幾種類型的運算子,但這篇主要是針對邏輯運算子,想了解其他運算子的自己點進去看

代入運算子比較運算子算術運算子位元運算子邏輯運算子字串運算子特殊運算子

另外還有一元、二元、三元運算子,三元運算子就是條件運算子,請點進上面"特殊運算子"裡面有講

然後這篇有目錄可以讓你跳過一些廢文

 

邏輯運算子:

&& (AND)

|| (OR)

! (NOT)

短路邏輯與短路求值

短路邏輯的運用

1. 用 || 來設定變數預設值

2. 用 && 來檢查物件與屬性值

3. 用 || 來簡化程式碼

4. 用 && 來簡化程式碼

5. 用 && 、|| 來擾亂簡化程式碼

6. 善用 ! 的轉換

 

以下開始正題:

首先先來了解一下邏輯運算子

邏輯運算子共有這三種: && (and)、|| (or)、! (not) 他們通常在 if 判斷式裡和布林一起使用 

&& (And)

&& 的特性是要全部為 true 才會是 true,否則都返回 false

意即全部條件都必須要成立,如下面例子:

 

|| (Or)

|| 的特性是只要其中一個是 true 就會返回 true,除非全部都是 false,意即只要其中一個條件滿足就成立

! (Not)

! 特性就是做反向,如果是 true 就返回 false,如果是 false 就返回 true 

 

講完了,果然是廢文 

但........此篇還沒結束

透過上面大家常用的邏輯運算子,其實可以發展出更簡便的寫法,就是下面要提到的短路邏輯

但要注意的是,更簡便寫法的另一層意思可能也代表著降低了可讀性

 

短路邏輯與短路求值

上面曾提到邏輯運算子們常在 if 判斷式中和布林 (true or false) 一起使用

那是因為在 if 判斷式的括號裡會強制轉成布林值

而在 javascript 裡面只要是 0、""、null、false、undefined、NaN 都會被判定為 false

上面這句很重要,不是廢文

然後如果有比較運算子的話,再透過比較運算子去比較出結果

但其實在 javascript 裡可以用邏輯運算子操作任何值,不會強制要返回 true or false 

例如像下面這種寫法:

var obj = obj || { };

上面這行的意思是,如果 obj 是存在的就維持原樣,如果不存在就給予空物件

換成更容易懂的寫法是這樣:

if (!obj) {
obj = {};   
}

這種寫法就是用了上面所說邏輯運算子的特性,使用最短的路徑來求值,因此叫短路邏輯

註:

這名詞不是我發明的,這是一種程式語言的求值策略 (看哪種語言),請看 wiki:

https://zh.wikipedia.org/wiki/%E7%9F%AD%E8%B7%AF%E6%B1%82%E5%80%BC

 

看完 wiki 後繼續唬爛

因為 ||  的特性是只要其中一個為 true 就為 true,因此如果第一個運算式符合就直接返回不會做第二個

實驗一下:

下面第一個結果為 true,所以就不做後面的 (a+=1),故 a 最後等於 1

下面第一個結果為 fase,所以往下評估第二個運算結果 (a+=1)

所以 a 最後等於 2

 

短路邏輯的運用

開始前要再說一次,在 javascript 裡只要是 0、""、null、false、undefined、NaN 都會被判定為 false

 

1. 用 || 來設定變數預設值

短路邏輯很適合用在給予變數預設值,像下面這樣

var student = name || "小明";

如果沒有 name 就預設為小明,這種寫法簡單清楚明瞭又簡潔

不用再 if 來 if 去的

 

2. 用 && 來檢查物件與屬性值

var name = o && o.getName();

&& 的特性是只要有一個 false 就是 false

所以上面這段先檢查 o,如果為 true 再做  o.getName()

舉個例子:

下面是一個簡單的物件做 add

var obj = {
add: function(a, b) {
console.log(a + b);
}
}
obj.add(2, 3);

但如果 obj 如果還未定義的話會報錯 (注意:至少要宣告)

這時候可以用 && 來避免這個錯誤出現 

因為 obj 是 undefined,所以就不會做 obj.add(2, 3) 了

 

3. 用 || 來簡化程式碼

原本這樣:

if (!obj) {
call_function();   
}

可以寫成這樣

(obj || call_function());

因為 || 只要第一個是 false 就會繼續做下一個 

或是反過來如果 obj 等於 true 才呼叫函數的話

if (obj) {
call_function();   
}

可以寫成這樣

(!obj || call_function());

 

4. 用 && 來簡化程式碼

原本這樣: 

var a = 1;
if (a == 1) {
alert("a=1");
}

現在可以寫成這樣

var a = 1;
a == 1 && alert("a=1")

因為如果 a == 1 為 false,那下面 alert 就不會做了

 

5. 用 && 、|| 來擾亂簡化程式碼

當然也可以更複雜一點

本來是這樣:

var a = 3, b;
if (a == 3) {
b = 1;
} else if (a == 5) {
b = 2;
} else {
b = 3 ;
}

現在可以寫成這樣

var a = 3,b;
b = a == 3 && 1 || a == 5 && 2 || 3

很適合離職的時候拿來搞同事用

 

6. 善用 ! 的轉換

文章上面有說,只要是 0、""、null、false、undefined、NaN,javascript 都會判定為 false

所以以後可以不要再這樣了

if (obj !== "null" && obj !== "undefined") {
//....
}

一堆判斷不完,直接用這樣可能比較快,還可直接判斷是否為空值

if (!!obj) {
//....
}

使用 ! (not) 會強制轉為反向的 boolean,再轉一次就是原值的布林值了

當然你也可以直接這樣

if (obj) {
//....
}

但是經過 ! 轉換之後可以強制讓其他類型轉為布林值,會更嚴謹

 

 

身邊誘惑太多都沒時間寫,寫好久,但其實還有很多想補充的,下次再補好了

先結束這篇,下篇待續.....

 

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

Javascript 基礎打底系列 (二) - null、undefined、NaN 的差異與檢查方式

Javascript 基礎打底系列 - By Value、By Reference 的課後考題!

Javascript 基礎打底系列 (三) - 邏輯運算子,與短路邏輯 (short circuit logic) 的應用

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()