Vue.js中&与&&运算符的区别是什么？实测表现一致存疑

嘿，这个问题其实得从JavaScript的基础说起——因为Vue模板里的表达式本质就是JS表达式，所以&和&&的区别核心是JS里位运算符和逻辑运算符的差异，你的测试案例刚好是个特殊情况，所以看起来效果一样，实际差别可大了！

1. 本质完全不同 #

• &&是逻辑与运算符：专门用来做逻辑判断，判断多个条件是否同时成立，是日常开发中判断分支的常用工具。
• &是按位与运算符：针对两个数的二进制位做与运算，属于底层的位操作，一般用在权限控制、位掩码这类特殊场景，很少用来做普通逻辑判断。

2. 你的测试案例为什么都显示？ #

你写的1 > 0 & 2 > 1和1 > 0 && 2 > 1，两个条件1>0和2>1都返回true：

• 对于&&：true && true直接返回true，所以v-if条件成立，span显示。
• 对于&：JS会把布尔值true转为二进制的1，false转为0，所以1 & 1的结果是1；而在v-if的布尔判断中，非0数值会被转为true，所以条件也成立，span同样显示。

3. 关键差异场景 #

短路求值特性

&&有短路求值的特性：如果第一个条件是false，后面的条件根本不会执行；但&没有这个特性，不管第一个条件结果如何，后面的代码都会跑一遍。比如：

// 假设isLogin是false，getUserInfo()不会被调用
if (isLogin && getUserInfo()) {}

// 不管isLogin是true还是false，getUserInfo()都会执行
if (isLogin & getUserInfo()) {}

返回值不同

&&返回的是第一个为假的值，或者最后一个真值；而&返回的是按位运算后的数值结果：

console.log(0 && 100); // 0（第一个假值，直接返回）
console.log(5 && 100); // 100（最后一个真值）

console.log(0 & 100); // 0（二进制0 & 1100100 = 0）
console.log(5 & 100); // 4（二进制101 & 1100100 = 100，也就是十进制4）

适用场景天差地别

• &&：几乎所有普通逻辑判断场景都用它，比如v-if多条件、函数参数校验、分支判断等。
• &：仅用于二进制位操作场景，比如用二进制位表示不同权限（比如1代表读权限，2代表写权限，3代表读写权限，这时用&可以判断用户是否拥有某权限）。

总结一下：你的测试案例是个巧合，两种运算符在这个场景下的布尔结果一致，但它们是完全不同类型的运算符，开发中做逻辑判断一定要用&&，位操作才考虑&哦！

内容的提问来源于stack exchange，提问作者sof-03