iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
自我挑戰組

JavaScript101與人生幹話系列 第 11

JavaScript101與人生幹話-比較運算子與邏輯運算子

  • 分享至 

  • xImage
  •  

比較運算子與邏輯運算子

比較運算子

<小於 >大於 <=小於等於 >=大於等於 ==等於 !=不等於

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

    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

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

關於自轉轉形請參考相等比較

邏輯運算子 && 與 ||

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 || undefine

2.在執行 ||

 1 

延伸閱讀

運算子優先序

多個邏輯運算子範例

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

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

人生幹話-生技是持續的大餅

我在那一家公司花了兩年的時間,把抗體的製程從八小時壓縮到兩小時,並訂出驗收標準,同年有某R藥廠發現了公司的檢測技術,想要進一步的了解,並且送出檢體給公司量測用來測驗準確度與技術的可行性,的確R藥廠是有派人來公司商談,老闆一值說服呼弄R藥廠買機台與試劑回去自己研究,不過一直沒有後續,R藥廠來公司的事情就成了畫大餅的原料向股東爭取更多資金有力證據,老闆腦補有信心說下一年某R要收購公司,真希望你們能把睡覺,假日上班把技術做出來之類的幫員工打雞血慣老闆發言,老闆還想去套話R公司這項業務的負責人看看能不能問出盲測檢體編號與內部成分,結果檢體統一都是由R公司本部直接寄送來台灣,在台負責人只是窗口不知道詳細的內容,然後就沒有然後了,檢測結果不如R藥廠預期。


上一篇
JavaScript101與人生幹話-什麼是函式??
下一篇
JavaScript101與人生幹話- 表達式(Expression)與陳述式(Statement)
系列文
JavaScript101與人生幹話30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言