JavaScript踩坑之逻辑运算符 ||

文章重点：逻辑运算符 || 在js中可以用来取值，比如 4 || 3 会取4，但是如果是0 || 1，等同于 false || true，会取true，也就是1。

 

这几天写前端的时候，一个antd的radio组件取的initialValue有问题，但是其他radio组件都没有问题。

具体表现形式是radio组件的initialValue总是显示固定的一个值。

 

我刚开始还以为是antd组件的问题，后来发现竟是逻辑运算符的问题。

原来我是这样写的：

<FormItem label="分享">
  {
    getFieldDecorator('closeShare', {
      initialValue: courseInfo.closeShare || 1,
    })(
        <Radio.Group>
          <Radio value={0}>开启分享</Radio>
          <Radio value={1}>关闭分享</Radio>
        </Radio.Group>
    )
  }
</FormItem>

这里 courseInfo.closeShare的值预期为1或0。

我的原意是initialValue取courseInfo.closeShare的值，如果没有就默认为1。

结果按钮一直显示为关闭分享，也就是initialValue一直取1。

 

最后发现 || 运算符取值并不是哪个有值就取哪个。

一般是谁有真值取谁，没有则取假值。0 || 1等同于 false || true，这时会取true，也就是取1。

 4 || 3       //取4  
 null || 4    //取4
 4 || 1       // 取4   
 0 || 1       // 取1
 true || true ;   // 取true
 false || true ;  // 取true
 true || false ;  // 取true
 false || false ; // 取false
 4 || true    //取4
true || 4    //取true  短路求值
null || null   //取null

而我的写法就会导致，即使courseInfo.closeShare的值为0，initialValue依然会取1。

最初之所以这样写，是因为项目里也有这样的写法，但是他们的默认值都是0或者其他数字，所以没出现问题。但是值的范围为1和0时，并且默认值为1就会出现问题。

 

最后我的解决方法是改成三目运算符

courseInfo.closeShare == null ? 1 :courseInfo.closeShare

 

其实中间我其实改过一次三目运算符，没生效，如下：

courseInfo.closeShare ?courseInfo.closeShare ： 1 

这里没生效是因为courseInfo.closeShare的值预期是1或0。

但是1或0又可以表示true或false，就会导致如果courseInfo.closeShare的值是0，也就是false，则这里会显示1。

 

这次的问题可以说是吃了没了解透js中运算符的亏。

 

参考

JavaScript 中的三个逻辑运算符  （&&也有取值的相关用法）