JS基础,运算符优先级。a || b && c 等于 (a || b)&& c 吗?

61 阅读2分钟

在写代码的过程中,我发现有些小伙伴不懂运算符的优先顺序,造成了很简单的bug,并且一直不知道原因。比如下面代码

<el-button v-if="a || b && c">按钮</el-button>
// 他想要实现的逻辑是c正确并且a或者b中间的一个正确才能显示按钮,可是实际上,只有a正确就会显示。
// 他修改之后
<el-button v-if="c && a || b">按钮</el-button>
// 依然不对,现在b正确就会显示了。
// 正确写法
<el-button v-if="(a || b) && c">按钮</el-button>

所以,我不得不让他查资料复习一下运算符的优先级。在此我也重新发一下给小伙伴们复习

1. 最高优先级

  • ( 表达式 ( ... )
  • [ 数组索引 [ ... ]
  • { 对象字面量 { ... }
  • . 成员访问
  • [] 成员访问
  • new 构造函数调用
  • ! 逻辑非
  • ~ 按位非
  • + 正号
  • - 负号
  • typeof 类型查询
  • void 返回 undefined
  • delete 删除属性或变量

2. 次高优先级

  • ** 幂运算

3. 乘除运算

  • * 乘法
  • / 除法
  • % 取模

4. 加减运算

  • + 加法
  • - 减法
  • += 加法赋值
  • -= 减法赋值
  • *= 乘法赋值
  • /= 除法赋值
  • %= 取模赋值

5. 位移运算

  • << 左移
  • >> 右移
  • >>> 无符号右移

6. 比较运算

  • < 小于
  • <= 小于等于
  • > 大于
  • >= 大于等于
  • in 存在性检查
  • instanceof 类型检查

7. 相等运算

  • == 相等(类型转换)
  • != 不相等(类型转换)
  • === 严格相等
  • !== 严格不相等

8. 位与运算

  • & 按位与

9. 位异或运算

  • ^ 按位异或

10. 位或运算

  • | 按位或

11. 逻辑与运算

  • && 逻辑与

12. 逻辑或运算

  • || 逻辑或

13. 条件运算

  • ? : 条件运算符

14. 赋值运算

  • = 赋值
  • += 加法赋值
  • -= 减法赋值
  • *= 乘法赋值
  • /= 除法赋值
  • %= 取模赋值
  • &= 按位与赋值
  • ^= 按位异或赋值
  • |= 按位或赋值
  • <<= 左移赋值
  • >>= 右移赋值
  • >>>= 无符号右移赋值

15. 逗号运算

  • , 逗号运算符 显然,在运算符优先级上,&&运算符要大于||运算符。