TEST12138

TEST12138

长路漫漫,唯心作伴。

前端 JavaScript 中的 && 和 ||

不要百度和寫程式碼測試
第一個問題,下面這兩行程式碼的輸出是什麼

console.log(1<2 && 4>5)
console.log(1<2 || 4>5)

第二個問題,下面這兩行程式碼的輸出又是什麼

console.log(2 && 4)
console.log(2 || 4)

如果說你對這樣的問題不清楚的話,說明你對 && 和 || 的運算流程是不清楚的
它們的運算流程是什麼呢
看下面這張圖

image

比如說console.log(2 && 4)2 和 4 都是 true

console.log( 2   &&  4  )
            true && true

返回的結果是最後判定的那一個的資料,4 是後判定的,所以返回的是 4
驗證一下

image

console.log(2 || 4)怎麼算呢
也是先做判定,2 是 true,|| 運算只要一個為真就行,這樣就不用判定後面的 4 了
因為返回的結果是最後判定的那一個的資料,所以返回的是 2
驗證一下

image

那麼在實際開發的時候怎麼用呢

比如說我們這裡有個物件
var obj = {}
假設它是從其他什麼地方來的,你也不知道這物件裡有哪些屬性
我們現在要從這個物件裡讀一個屬性 a
我的需求是如果 a 有值就讀 a,如果沒有值就給個預設值
正常寫的話就會寫成這樣

var a = obj.a
if(!a) {
  a='default'
}

用 || 寫的話,只需要

var a = obj.a || 'default'

程式碼簡潔許多
根據判定流程,obj.a 有值的話,返回是 true,返回的結果是最後判定的那一個的資料,所以 a = obj.a
obj.a 沒有值的話,會繼續判定後面的,'default' 返回是 true,所以 a = 'default'

再比如說,我們想知道 obj 裡有沒有一個函數,有的話就呼叫它
常規寫法就是

if(obj.func) {
  obj.func()
}

用 && 寫的話就是

obj.func && obj.func()

這個大家可以自己想想

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。