JavaScript逻辑运算符

从项目中看逻辑运算符“||”和“&&”

今天，在项目开发中遇到一个问题，就这个问题本身而言，并不是很难，但觉得它的意义重大（哈哈，当然是对我而言），还是决定记录一番

问题描述及初步解决

简单描述下要求：就是上边有两个checkbox的选择框（上面的图是简易版），要实现的功能就是二者至少选择一个，而且交互性良好

先说下我的思路，也是我get到的，这个时候是实现二者至少选其一的功能的，当时我也说不来自己是怎样鬼使神差的写了这样的“hasCheckedOne && !hasCheckedTwo”和“hasCheckedTwo && !hasCheckedOne”，当然我指的是变量的位置，也许到这里你也没发现什么问题，那么请继续往下看

<input type="checkbox"  :checked="hasCheckedOne" @change="changeCheckedOne" :disabled="hasCheckedOne && !hasCheckedTwo">

<input type="checkbox" :checked="hasCheckedTwo" @change="changeCheckedTwo" :disabled="hasCheckedTwo && !hasCheckedOne">

new Vue({
  ......
  data: {
        hasCheckedOne: true, //是否使用选项一
        hasCheckedTwo: true,//是否使用选项二
        ....
  },
  ......
  methods: {
      changeCheckedOne:function (ev) {
        //做了某些处理
        this.hasCheckedOne = !hasCheckedOne;
        ...
      },
      changeCheckedTwo:function (ev) {
        //做了某些处理
        this.hasCheckedTwo = !hasCheckedTwo;
        ...
     }
  }

})

需求更改

当后台要求这个字段必须为number值得时候，该怎么办呢？（下面的js代码）

v-model其实双向绑定的都为字符串（因为牵扯到form表单，所以用了v-model）

我将hasCheckedOne、hasCheckedTwo都写成了number类型的，然后发现出错了，当取消其中一个的时候，想再次勾选它，它是不可勾选的，也就是disabled的，然后就开始苦逼的找问题出在哪里了，总觉得哪里都似乎对着……

new Vue({
  ......
  data: {
        hasCheckedOne: 1, //是否使用选项一 1是 0否
        hasCheckedTwo: 1,//是否使用选项二
        ....
  },
  ......
  methods: {
      changeCheckedOne:function (ev) {
        //做了某些处理
        this.hasCheckedOne = ev.target.checked ? 1 : 0;
        ...
      },
      changeCheckedTwo:function (ev) {
        //做了某些处理
        this.hasCheckedTwo = ev.target.checked ? 1 : 0;
        ...
     }
  }

})

寻找答案

之后，修改成下面这样，忽然发现，咦啊，对了呢？那么问题出在哪里了呢？

<input type="checkbox"  :checked="hasCheckedOne" @change="changeCheckedOne" :disabled="hasCheckedOne==1 && hasCheckedTwo==0">

<input type="checkbox" :checked="hasCheckedTwo" @change="changeCheckedTwo" :disabled="hasCheckedTwo==1 && hasCheckedOne==0">

嗯，问题出在了 “&&”运算符上了，这个是JavaScript与其他语言很不同的地方——逻辑运算符，逻辑运算符所做的工作不是返回true或者false，而是做的是取值运算

||和&&首先会对第一个操作数进行条件判断，如果其不是布尔值，会先将其进行强制类型转换，然后再执行条件判断，对于||来说，如果条件判断结果为true的话，就返回第一个操作数的值，否则返回第二个操作数的值；对于&&来说，如果判断结果为true的话，就返回第二个操作数的值，如果为false的话就返回第一个操作数的值

哈哈，问题才真是有了答案了

这个东西确实很容易被忽视，希望看到这篇文章的你在以后的开发中可以注意一下 ^_^