&&，||超越了我的认知

今天的课程诞生于一个 bug，有一段代码：

成都创新互联公司是一家专业从事成都做网站、成都网站制作的网络公司。作为专业网络公司,成都创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都全网营销及网站设计开发服务！

 
 
 
 

  
  
  
  
const person = { 
  
  
  
  
    name: 'suyan', 
  
  
  
  
    getName() { 
  
  
  
  
        return this.name; 
  
  
  
  
    } 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
function isSuyan()  
  
  
  
  
    if (person.name === 'suyan' && person.getName) { 
  
  
  
  
        return true; 
  
  
  
  
    } 
  
  
  
  
    return false; 
  
  
  
  
} 
 
 
 
 

随手对这段代码进行了重构：

 
 
 
 

  
  
  
  
function isSuyan()  
  
  
  
  
    return person.name === 'suyan' && person.getName; 
  
  
  
  
} 
 
 
 
 

执行下面打的代码，结果是什么?

 
 
 
 

  
  
  
  
let isTrue = isSuyan(); 
  
  
  
  
console.log(isTrue); 
 
 
 
 

结果是一个函数，可能出乎你我的意料：

遇到问题立马在百度一下：

看到一段解释：

意思：逻辑运算符如果使用的都是布尔值，则结果也是布尔值。然而，在 && 和 || 中， 当操作数是非布尔值的时候结果可能是非布尔值。

理解起来有点绕开，看个例子：

&& 运算符从左到右进行计算，如果为真，继续往后走，直到遇到为 false 的，或者到了最后一个操作数。如果操作数是布尔值结果返回布尔值，如果操作数是非布尔值结果返回非布尔值。

 
 
 
 

  
  
  
  
const a = 10; 
  
  
  
  
const b = -5; 
  
  
  
  
const c = 1; 
  
  
  
  
console.log(a && b); // -5 
  
  
  
  
console.log(a > 0 && b); // -5 
  
  
  
  
console.log(a < 0 && b); // false 
  
  
  
  
console.log(a && b < 0); // true 
  
  
  
  
console.log(a && b > 0); // false 
  
  
  
  
console.log(a > 0 && b < 0); // true 
  
  
  
  
console.log(a && b && c); // 1 
 
 
 
 

|| 运算符，只要遇到一个真值便停止计算，结果的规则和 && 运算符一致。

 
 
 
 

  
  
  
  
console.log(a || b); // 10 
  
  
  
  
console.log(a > 0 || b); // true 
  
  
  
  
console.log(a < 0 || b); // -5 
  
  
  
  
console.log(a || b < 0); // 10 
  
  
  
  
console.log(a || b > 0); // 10 
  
  
  
  
console.log(a > 0 || b < 0); // true 
  
  
  
  
console.log(a || b || c); // 10 
 
 
 
 

扩散几个知识点：

1.可以被转换成 false 的值：null、NaN、0、空字符串 "", '',``、undefined。

2.&& 的优先级大于 || 的优先级。

 
 
 
 

  
  
  
  
true || false && false      // returns true, because && is executed first 
  
  
  
  
(true || false) && false    // returns false, because operator precedence cannot apply 
 
 
 
 

3.!和 !! 操作符返回的值永远是布尔值，上面的例子可以改为下面这样，返回值永远是布尔值：

 
 
 
 

  
  
  
  
function isSuyan() { 
  
  
  
  
    return !!(person.name === 'suyan' && person.getName); 
  
  
  
  
} 
 
 
 
 

4. 优先级

假如有个 Label 显示用户的名称，显示规则为：默认值是前端小课，如果用户定义了别名就用别名，如果用户定义了真实的名字就用真实的名字，优先级为真实名字 > 昵称 > 默认名字。我以前这样写：

 
 
 
 

  
  
  
  
function showName() { 
  
  
  
  
    let showName; 
  
  
  
  
    let trueName = '真名'; 
  
  
  
  
    let nickName = '别名'; 
  
  
  
  
    if (trueName) { 
  
  
  
  
        showName = trueName; 
  
  
  
  
    } 
  
  
  
  
    else if (nickName) { 
  
  
  
  
        showName = nickName; 
  
  
  
  
    } 
  
  
  
  
    else { 
  
  
  
  
        showName = '前端小课'; 
  
  
  
  
    } 
  
  
  
  
    return showName; 
  
  
  
  
} 
 
 
 
 

学完这节课程我这样写，两个函数的结果是一样的，但代码量从 15 行缩减到了 6 行：

 
 
 
 

  
  
  
  
function showName2() { 
  
  
  
  
    let defaultName = '前端小课'; 
  
  
  
  
    let trueName = '真名'; 
  
  
  
  
    let nickName = '别名'; 
  
  
  
  
    return trueName || nickName || defaultName; 
  
  
  
  
} 
 
 
 
 

这节课程主要学习了 JavaScript 中的 && 、||、! 和 !!，如果使用不当可能会引发bug。大家加油!!!

当前题目：&&，||超越了我的认知
分享链接：http://www.shufengxianlan.com/qtweb/news34/46834.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联