编程语言超越了我的认知

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

1. const person = { 
2.     name: 'suyan', 
3.     getName() { 
4.         return this.name; 
5.     } 
6. }; 
7.  
8. function isSuyan()  
9.     if (person.name === 'suyan' && person.getName) { 
10.         return true; 
11.     } 
12.     return false; 
13. } 

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

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

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

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

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

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

看到一段解释：

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

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

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

1. const a = 10; 
2. const b = -5; 
3. const c = 1; 
4. console.log(a && b); // -5 
5. console.log(a > 0 && b); // -5 
6. console.log(a < 0 && b); // false 
7. console.log(a && b < 0); // true 
8. console.log(a && b > 0); // false 
9. console.log(a > 0 && b < 0); // true 
10. console.log(a && b && c); // 1 

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

1. console.log(a || b); // 10 
2. console.log(a > 0 || b); // true 
3. console.log(a < 0 || b); // -5 
4. console.log(a || b < 0); // 10 
5. console.log(a || b > 0); // 10 
6. console.log(a > 0 || b < 0); // true 
7. console.log(a || b || c); // 10 

扩散几个知识点：

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

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

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

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

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

4. 优先级

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

1. function showName() { 
2.     let showName; 
3.     let trueName = '真名'; 
4.     let nickName = '别名'; 
5.     if (trueName) { 
6.         showName = trueName; 
7.     } 
8.     else if (nickName) { 
9.         showName = nickName; 
10.     } 
11.     else { 
12.         showName = '前端小课'; 
13.     } 
14.     return showName; 
15. } 

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

1. function showName2() { 
2.     let defaultName = '前端小课'; 
3.     let trueName = '真名'; 
4.     let nickName = '别名'; 
5.     return trueName || nickName || defaultName; 
6. } 

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

编程语言原本是被设计成专门使用在计算机上的，但它们也可以用来定义算法或者数据结构。正是因为如此，程序员才会试图使程序代码更容易阅读。