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. &&(并)

不要这么做:

1 2 3 4 5 6 7

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

用这代替:

代码如下:

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

解析:

&& 操作符从左开始判断表达式, 如果左边的表达式被判断为假, 这马上返回false, 不管右边的表达式是否为真.
如果左边的表达式为真, 则继续判断右边的表达式, 然后返回右边表达式结果
这变得越来越有趣了

例子3.

不要这样做:

1 2 3 4 5

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

用这代替:

复制代码 代码如下:

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

解析:

如果userName为真, 调用logIn函数并传递userName变量
如果userName为假, 调用logIn函数不传递任何变量

例子4.
不要这样做:

1 2 3 4 5 6 7

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