转自：https://juejin.cn/post/6978997871643197471
这是我参与更文挑战的第9天，活动详情查看： 更文挑战
1. 前言

之前搭档的同事准备跑路了、部分工作就交接到我这儿了、比如codeReview。此文章的话题源于codeReview、先看看如下代码.
// 此Demo演示方是在微信小程序-先获取组件实例、然后想调用组件内方法、简化版如下
const ref = this.selectComponent(`#comp`) || null
ref.methods()
上述代码存在2个问题:
this.selectComponent()API在非常老的版本是不支持的、可能会报错;
ref对象未进行判空就直接调用其方法;
想到的优化方案:
// 预期: 若存在this.selectComponent的话则获取组件实例、否则返回空对象null.
const ref = this.selectComponent && this.selectComponent(`#comp`) || null
ref && ref.methods()
写到这里、有点迷茫了、&&跟||同级使用、谁的优先级高点呢?
接下来主要是解答这个困惑的！
2. 运算符

2.1 逻辑或(||)
||运算符: 条件1 || 条件2
若条件1为true、返回条件1, 且条件2代码不会执行;
若条件1为false、不管||后面是true还是false、都是返回||后面的值、即则返回条件2;
console.log(0||''); // ''
console.log(''||0); // 0
2.2 逻辑与(&&)
&&运算符: 条件1 && 条件2
若条件1为false、无论条件2为true或false, 都将返回条件1的值;
若条件1为true, 无论条件2为true或者false, 都将返回条件2的值;
console.log(0&&'');  // 0
console.log(''&&0);  // ''
逻辑||跟&&都遵行短路原则, 只要确定符号前面的真假、即可确定返回值.
3. 优先级

若&&跟||同时出现、谁的优先级比较高呢?
console.log(1 || 'a' && 2); // 1
console.log('a'&& 2 || 1); // 2
假设||的优先级不低于&&, 那么上述代码预期返回2、跟实际验证结果1不符合、故该结论是不成立的。
官方说明: &&运算符的优先级高于||运算符.
注意事项: 为增加代码的可读性、若涉及到多级||/&&判定的、建议用()包裹、增加代码可读性.
诡异的事情发生了、会推翻了上述论证:
true || alert(2) && false;  // 结果为true、alert(2)并未执行
// 若按照&&运算符高于||运算符的话、那么应该alert(2)、然后结果为true、但跟实际代码运行结果不一致、故可推翻
故经过综合学习后、发现以下这个结论应该是比较准确的、但仍保持小疑惑状态哦、欢迎各位大佬们指教指教~
若遇到||运算符、先去计算左边表达式得出结果、若结果为true, 则不会执行右边的表达式[短路运算生效];若结果为false, 则去执行右边的表达式、再根据两边的结果执行||运算符.
4. 写在最后

若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!
转自：https://juejin.cn/post/6978997871643197471

贴主:lycba于2024_04_21 21:12:07编辑