详解 JavaScript 中或者 || 和并且 && 运算符

Question

在编程语言中，|| 和 && 分别表示 或者 和 并且，对于 a = a||""; 这样的代码。很多初学者对这两个字符可能会感到茫然和无助，今天就跟大家分享一下我的一些心得，如何去理解 || 和 &&。

其实上文提到的代码等价于：

a = a||"defaultValue";

如果你还看不懂，那么看看下面的代码：

if(!a){
    a="defaultValue";
}

最终在详细一点：

if(a == null||a == ""||a == undefined){
    a = "defaultValue";
}

上面的三段代码都是一样的结果，是不是感到很神奇。

为了弄清这个问题，首先我们必须了解一个问题：JavaScript 中数据类型在转换为 bool 类型时发生了什么？

在 JavaScript 中，从这方面看，数据类型可以分为真值和假值。顾名思义，真值转换为 bool 时值为 true，假值转换为 bool 时值为 false。下表罗列了一些常见的数据类型转换为 bool 时的值：

数据类型	转换为bool后的值
null	FALSE
undefined	FALSE
Object	TRUE
function	TRUE
0	FALSE
1	TRUE
0、1之外的数字	TRUE
字符串	TRUE
""(空字符串)	FALSE

在 if 表达式中，JavaScript 首先将条件表达式转换为 bool 类型，表达式为真值则执行 if 中的逻辑，否则跳过于是有了：

if(!a){
    a="defaultValue";
}

下面我们再来看 && 和 || 两个表达式。

由于 JavaScript 是弱类型语言，所以在 JavaScript 中这两个表达式可能跟其他语言（比如 JAVA）中不太一样。

在 JavaScript 中，&& 运算符运算法则如下：

如果 && 左侧表达式的值为真值，则返回右侧表达式的值，否则返回左侧表达式的值，这就是说：

1. i = ""&&"真值"; 等于 i = ""
2. i = "真值"&&"其他真值"; 等于 i = "其他真值"
3. i = "真值"&&""; 等于 i = ""

|| 运算符的运算法则如下：

如果 || 左侧表达式的值为真值，则返回左侧表达式的值，否则返回右侧表达式的值，这就是说：

1. i = ""||"真值"; 等于 i = "真值"
2. i = "真值"||"其他真值"; 等于 i = "真值"
3. i = "真值"||""; 等于 i = "真值"

于是就可以理解 a = a||"defaultValue"; 的逻辑了。如果 a 为假值（等于null、空字符串等），则将 defaultValue 赋给 a，否则将 a 的值赋给 a 本身。

下面我们运用 || 和 && 来简化程序：

var parameter="";
function test(parameter){
    //return 真值
    return true;
}
//真值操作
function operate1(parameter){
    return "真值操作";
}
//假值操作
function operate2(parameter){
    return "假值操作";
}
var result=test(parameter)&&operate1(parameter);
result=test(parameter)||operate2(parameter);
//等价于
result=test(parameter)?operate1(parameter):operate2(parameter);
alert(result);//真值操作
//也等价于
if(test(parameter)){
    result=operate1(parameter);
}else{
    result=operate2(parameter);
}
alert(result)//真值操作