JS/JQUERY（8）——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;