(譯文)12個簡單(但強大)的JavaScript技巧(一)

原文連接: 12 Simple (Yet Powerful) JavaScript Tips

我將會介紹和解析12個簡單但是強大的JavaScript技巧. 這些技巧所有的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為假, 調用signUp函數不傳遞任何變量

例子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