javascript 「||」、「&&」的靈活運用

你是否看到過這樣的代碼：a=a||""; 可能javascript初學者會對此感到茫然。今天就跟你們分享一下個人一些心得。

其實：

a=a||"defaultValue";

與：

if(!a){
  a="defaultValue";
}

和：

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

是等價的！

爲了弄清這個問題，首先咱們必須瞭解一個問題：javascript中數據類型在轉換爲bool類型時發生了什麼。

 

在javascript中，數據類型能夠分爲「真值」和「假值」。顧名思義，真值轉換爲bool時值爲true；假值轉換爲bool時值爲false。下表羅列了一些常見的數據類型轉換爲bool時的值：

 

數據類型	轉換爲bool後的值
null	FALSE
undefined	FALSE
Object	TRUE
function	TRUE
0	FALSE
1	TRUE
0、1以外的數字	TRUE
字符串	TRUE
""(空字符串)	FALSE

在if表達式中，javascript首先將條件表達式轉換爲bool類型，表達式爲真值則執行if中的邏輯，不然跳過。

 

因而有了：

if(!a){
    a="defaultValue";
}

下面咱們再來看「&&」、「||」兩個表達式。

因爲javascript是弱類型語言，因此在javascript中這兩個表達式可能跟其餘語言（好比java）中不太同樣。

在javascript中，「&&」運算符運算法則以下：

若是&&左側表達式的值爲真值，則返回右側表達式的值；不然返回左側表達式的值。

這就是說：

var i=""&&"真值";//->i=""
i="真值"&&"其餘真值";//->i="其餘真值"
i="真值"&&"";//->i=""

「||」運算符的運算法則以下：

若是||左側表達式的值爲真值，則返回左側表達式的值；不然返回右側表達式的值。

這就是說：

var i=""||"真值";//->i="真值"
i="真值"||"其餘真值";//->i="真值"
i="真值"||"";//->i="真值"

因而，就能夠理解：

a=a||"defaultValue";

的邏輯了。若是a爲假值（等於null、空字符串……），則將"defaultValue"賦給a；不然將a的值賦給a自己。

下面咱們運用||、&&來簡化程序：

var parameter="";
function test(parameter){
	//return 真值
	return true;
}

//真值操做
function operate1(parameter){
	return "真值操做";
}

//假值操做
function operate2(parameter){
	return "假值操做";
}

var result=test(parameter)&&operate1(parameter);
result=test(parameter)||operate2(parameter);

//等價於
result=test(parameter)?operate1(parameter):operate2(parameter);

alert(result);//真值操做

//也等價於
if(test(parameter)){
	result=operate1(parameter);
}else{
	result=operate2(parameter);
}

alert(result)//真值操做