###### tags: `JavaScript` `學習` `比較與邏輯運算子`
{%hackmd BJrTq20hE %}
# 比較運算子與邏輯運算子
## 比較運算子
<小於 >大於 <=小於等於 >=大於等於 ==等於 !=不等於

目的在比較運算原並回傳結果

    console.log(5>1)//true
    console.log("hi"=="bye")//false

在>= 與 <= 只要其中一個條件達成就會是true
例如：

    console.log(100>=1)//true

## 比較運算子搭配變數方法
比較運算子可以使用在變數間的比較
例如：

    let a = 3;
    let b = 2;
    console.log(a>b)//true
    
    let c = 2>1;
    console.log(c)//true
    
    let d = 100;
    let e = 25 ;
    console.log(d<=e)//false

## =、==、===的差異

1. = 賦予值的意思
2. == 為兩個值比較
3. === 為兩個等於的意思是一樣的，但是更嚴謹，會比先較型別(例如字串、數字)

let a = '1';
let b = 1 ;
console.log(a==b)//ture 因為'1'會轉型為number
console.log(a===b)//false

不等於!=(會自動轉型)、!==(嚴謹模式)的情況也相同

關於自轉轉形請參考[相等比較](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Equality_comparisons_and_sameness)

## 邏輯運算子 && 與 ||

1.&&同時滿足條件
2.||滿足其中一個條件

let a = '1';
let b = 1 ;
console.log(a==='1' && b===1)//ture  兩個條件都滿足
console.log(a==='1' || b==='6')//ture 因為a與let宣告的a相同

## truthy(真值)與falsy(偽值)

Javsscript的資料型別對於truthy與falsy的定義對照表

|型別|truthy|falsy|
|:--:|:----|:----:|
|boolean|ture|false|
|Array|一律為truth即使為空字串|X|
|Object|一律為truth即使為空物件|X|
|string|"0"非空字串(只有字串內有東西)|""空字串|
|number|除了0與NaN以外的數字皆為truthy|+0 -0 0與NaN|
|undefined|X|一律為falsy|
|null|X|一律為falsy|

## 知道了truthy與falsy可以幹什麼呢??

### 先搞懂&&與||的判斷規則
1.判斷是由左到右開始的
2.如果同時出現&&與||一律優先判斷&&後再判斷||
3.在&&的左側為truthy，則執行右側，若&&左側為falsy則執行左側。

console.log('1' && 123)//123
console.log('' && 123)//''

從以上的例子來看&&是就像是門衛，&&左側如果為truthy就是有通行證，可以通行到&&的右側，如果沒有就只能待在&&左側。
4.在||的左側為truthy，直接執行左側，若||的左測falsy則執行右側。

console.log('1' || 123)//'1'
console.log('' || 123)//123

從以上例子來看||就像是個貪官，只要左側是truthy(有好處)，就留下左側(執行||左側)，若左側是falsy(有壞處)，就趕到||右側(執行||右側)

## 短路求值(Short-circuit evaluation)

1.簡單的來說不用知道所有的true 與 false就可以直接執行

2.在&&中左側為falsy，就不會執行&&的右側，而是直接執行&&左側。
如下面的範例

console.log('' && 123)//''

&&的左側為''是falsy所以直接執行&&左側。

3.在||中左側為truthy，就不會執行||的右側，而是直接執行||左側。

console.log('1' || 123)//'1'

||的左側為'1'是truthy所以直接執行||左側

## && 與 || 還有if的簡單比較

1.在if判斷式中

if(有下雨){
要帶傘
}

很直覺，假如有下雨，就帶傘

2.在&&中

console.log(有下雨 && 要帶傘)//要帶傘

在&&中，因為有下雨為truthy，所以執行要帶傘。

3.在||中

if(!有下雨){
不帶傘
}
console.log(!有下雨 && 不帶傘)

在||中因為!有下雨為falsy，所以執行不帶傘。

上面的範例就是使用&&與||短路求值取代if判斷式，但是要注意的是這樣子的寫法會降低程式的可讀性，需要再合適的地方使用。

## 相依性
簡單的來說就是預算子執行的優先順序，其中&&的執行順序是大於||，當所有運算子的優先度相同則從左至右執行。

console.log( 1 || 3 && 0 || 0 || null && '123' && undefine)

1.先執行 && 兩側的運行

 1 || 0 || 0 || null

2.在執行 ||

 1 

延伸閱讀
---
[運算子優先序](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)

## 多個邏輯運算子範例

只要理解上述的規則，下面這些奇怪問題都可以回答出來

let a = '1';
let b = 1 ;
let c = 'abc'
console.log(a==='1' && b===1 && c==='abc' )//ture  
console.log(a==='1' || b==='6' &&  c==='123' )//ture 
console.log(0 || 1 || '0' && 'hello')  // 1
console.log(1 && null || undefined && 1) // undefined
console.log(1 || undefined && null || 5) // 1
console.log(888 && '' || 'hello' && 123) // 123
console.log(1 && 2 && 3 || 5 || 0) // 3
console.log('0' && null || 0 && 1 ) // 0
console.log('' && null) // ''
console.log('0' && null) // null
console.log('' || null) // null
console.log('0' || null) // '0'
console.log([] || 0 && {})//[]
console.log([] && 0 && {})//0
console.log({} && [] || {})//[]
console.log(!'' || 123)//true

參考資料
---
- [六角學院影音課程-Javascript必修篇](https://courses.hexschool.com/courses/enrolled/1463822)
- [用邏輯判斷 ||(OR) 及 &&(AND) 來改寫 if (短路求值 Short-circuit evaluation)](https://bolaslien.github.io/blog/2021/06/18/js-short-circuit-evaluation/)
- [ㄟ問你喔，邏輯運算子 && 和 || 到底該怎麼用？](https://karennnnovelty.medium.com/%E3%84%9F%E5%95%8F%E4%BD%A0%E5%96%94-%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90-%E5%92%8C-%E5%88%B0%E5%BA%95%E8%A9%B2%E6%80%8E%E9%BA%BC%E7%94%A8-803ec9792595).
- [重新認識 JavaScript 番外篇 (7) - 判斷式 (a == 1 && a == 2 && a == 3) 結果為 true ？](https://ithelp.ithome.com.tw/articles/10197606)
- [[JS基礎]如何使用邏輯運算子 && 和 ||](https://medium.com/johnny%E7%9A%84%E8%BD%89%E8%81%B7%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%AD%86%E8%A8%98/js%E5%9F%BA%E7%A4%8E-%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90-%E5%92%8C-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-b590515efed0)