javascript中關於&& 和 || 表達式的小技巧分享_javascript技巧

如果你還是新手, 而且讀完所有這些技巧的詳解和每種技巧是如果工作的以後運用它們, 你會寫出更加簡練高效的JavaScript程序.

確實, JavaScript高手已經運用這些技巧寫出了很多強大, 高效的JavaScript程式. 但是你可以這樣.

強大的 && 和 || 表達式
你可能在JavaScript庫和JavaScript框架中已經見過它們了, 那麼我們先由幾個基本的例子開始:

範例1. || (或)
設定預設值, 通常用

複製程式碼 程式碼如下:

function documentTitle(theTitle) {
  if (!theTitle) {
 theTitle = "Untitled Document";
  }
}

用這代替:

複製程式碼 程式碼如下:

function documentTitle(theTitle) {
  theTitle = theTitle || 「Untitled Document";
}

解析:

首先, 閱讀以下的"提示"框複習JavaScript是如何判斷布林值的
|| 運算子首先從左開始判斷表達式的真假, 如果為真, 馬上返回左邊表達式返回的值; 如果左邊表達式被判斷為假, 則繼續判斷右邊的表達式, 並返回右邊表達式的值
如果theTitle被判斷為假, 會傳回右邊表達式的值. 換句話說, 如果theTitle變數被判斷為真, 則傳回theTitle的值.
! 提示:
JavaScript判斷為假的值: null, false, 0, undefined, NaN 和 ""(空字串).
記住像Infinity(無限大)這種 NaN 類的值是被判斷為真不是假. 然而, NaN被判斷為假.
除了以上這些, 其他值全部被判斷為真.

範例2. &&(並)

不要這麼做:

function isAdult(age) {
 if (age && age > 17) {
  return true;
 } else {
  return false;
 }
}

用這代替:

複製程式碼 程式碼如下:

function isAdult(age) {
  return age && age > 17;
}

解析:

&& 運算子從左開始判斷表達式, 如果左邊的表達式被判斷為假, 這馬上回傳false, 不管右邊的表達式是否為真.
如果左邊的表達式為真, 則繼續判斷右邊的表達式, 然後回傳右邊表達式結果
這變得越來越有趣了

範例3.

不要這樣做:

if (userName) {
 logIn(userName);
} else {
 signUp();
}

用這代替:

複製程式碼 程式碼如下:

userName && logIn(userName) || signUp();

解析:

如果userName為真, 呼叫logIn函數並傳遞userName變數
如果userName為假, 呼叫logIn函數不傳遞任何變數

範例4.
不要這樣做:

var userID;

if (userName && userName.loggedIn) {
 userID = userName.id;
} else {
 userID = null;
}

用這代替:

複製程式碼 程式碼如下:

var userID = userName && userName.loggedIn && userName.id;

解析:

如果userName為真, 則呼叫user.loggedIn, 並檢查user.loggedIn是否為真; 如果傳回真, 則傳回第三個表達式的回傳值
如果userName為空, 回傳null

以上所述就是本文給大家分享的第一個javascript小技巧了，希望大家能夠喜歡。