1. 程式人生 > >JS 巧用 && 與 ||

JS 巧用 && 與 ||

pan 開發 控制 pre 沒有 輸出 col 我們 通過

在對於流程控制語句當中,我們最熟悉不過的就是

1 if (條件){
2   //代碼塊  
3 }else{
4   //代碼塊
5 }

對於一個執行不同的代碼來說,如果執行的代碼很多,可能就有必要使用上面這種方式

但往往我們開發當中,也會碰到一些賦值操作,如果使用上面方式,未免顯得太過冗余。

舉個例子:

var num1 = 10;
var num2 = 20;
// 假如 num2 > num1 就 alert( num2 ) 否則 alert( num1 )
// 可能見到的寫法會有以下方式
if( num2 > num1 ){
alert( num2 );
}else{
  alert( num1 );
}

可以看見以上方式,只是輸出一個結果,卻用了五行代碼來去實現。

接下來,我們見證下怎麽使用一行代碼去替代上面五行代碼實現的結果

1 var num1 = 102 var num2 = 20;
3 
4 // 第一種方式 也可以使用 三目運算符
5 alert( num2 > mum1 ? num2 : num1 );
6 
7 //第二種方式  就是使用 && ,||
8 alert( num2 > num1 && num2 || num1 ); 

使用 &&,|| 比三目運算的優勢在於,它可以判斷多個條件,也可以單獨使用

舉個 && 例子:

var num1 = 10;
var num2 = 5;

// 假如 num1,num2 都大於10 則輸出 num1+num2;
   var result = num1>10 && num2 >10 && num1+ num2 || 0;
       alert(result);

我們開發知道,在開發當中,讀取後端返回的數據可能因某種原因而未讀取到,那麽接收的數據如果是對象,都會在接收該字段的時候額外加上沒有獲取到時的字段

舉個 || 例子:

var  reuslt = res && res.data || [];
      if
( result.length ) return;

使用這種方式,可以通過條件判斷是否使用該變量,假如是對象,如果沒有獲取到,而使用該對象屬性,則會報錯。

而避免這種模式,就是在使用的時候,一定要判斷,判斷,判斷

JS 巧用 && 與 ||