update: 逻辑运算符

Author: qianguyihao

04-JavaScript基础/07-运算符.md

@@ -13,7 +13,7 @@
 
 比如：`+`、`*`、`/`、`(` 都是**运算符**，而`（3+5）/2`则是**表达式**。
 
-比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以**字符串**的形式返回，返回值可以是 number string boolean undefined object。
+比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以**字符串**的形式返回，返回值可以是 number、string、boolean、undefined、object。
 
 
 ### 运算符的分类
@@ -217,6 +217,8 @@ number
 
 - `!`		非：对一个布尔值进行取反。
 
+注意：能参与逻辑运算的，都是布尔值。
+
 **连比的写法：**
 
 来看看逻辑运算符连比的写法。
@@ -229,43 +231,19 @@ console.log(3 < 2 && 2 < 4);
 
 输出结果为false。
 
-举例2：（判断一个人的年龄是否在18~60岁之间）
-
-```javascript
-var a = prompt("请输入您的年龄");
-alert(a>=18 && a<= 65);
-```
-
-
-PS：上面的这个`a>=18 && a<= 65`千万别想当然的写成` 18<= a <= 65`，没有这种语法。
-
-### 注意事项
-
-（1）能参与逻辑运算的，都是布尔值。
-
-（2）JS中的`&&`属于**短路**的与，如果第一个值为false，则不会看第二个值。举例：
+举例2：（判断一个人的年龄是否在18~65岁之间）
 
 ```javascript
-//第一个值为true，会检查第二个值
-true && alert("看我出不出来！！");  // 可以弹出 alert 框
-
-//第一个值为false，不会检查第二个值
-false && alert("看我出不出来！！"); // 不会弹出 alert 框
-```
+const a = prompt('请输入您的年龄');
 
-（3）JS中的`||`属于**短路**的或，如果第一个值为true，则不会看第二个值。举例：
-
-（4）如果对**非布尔值**进行逻辑运算，则会**先将其转换为布尔值**，然后再操作。举例：
-
-```javascript
-var a = 10;
-a = !a;
-
-console.log(a);  // false
-console.log(typeof a); // boolean
+if (a >= 18 && a < 65) {
+	alert('可以上班');
+} else {
+	alert('准备退休');
+}
 ```
 
-上面的例子，我们可以看到，对非布尔值进行`!`操作之后，返回结果为布尔值。
+PS：上面的`a>=18 && a<= 65`千万别想当然地写成` 18<= a <= 65`，没有这种语法。
 
 ### 非布尔值的与或运算【重要】
 
@@ -282,23 +260,23 @@ console.log('result：' + result); // 打印结果：6（也就是说最后面
 
 那么，返回结果是哪个原值呢？我们来看一下。
 
-**与运算**的返回结果：（以两个非布尔值的运算为例）
+**与运算**的返回结果：（以多个非布尔值的运算为例）
 
-- 如果第一个值为false，则直接返回第一个值；不会再往后执行。
+- 如果第一个值为false，则执行第一条语句，并直接返回第一个值；不会再往后执行。
 
-- 如果第一个值为true，则返回第二个值（如果所有的值都为true，则返回的是最后一个值）。
+- 如果第一个值为true，则继续执行第二条语句，并返回第二个值（如果所有的值都为true，则返回的是最后一个值）。
 
 
-**或运算**的返回结果：（以两个非布尔值的运算为例）
+**或运算**的返回结果：（以多个非布尔值的运算为例）
 
-- 如果第一个值为true，则直接返回第一个值；不会再往后执行。
+- 如果第一个值为true，则执行第一条语句，并直接返回第一个值；不会再往后执行。
 
-- 如果第一个值为false，则返回第二个值（（如果所有的值都为false，则返回的是最后一个值）。
+- 如果第一个值为false，则继续执行第二条语句，并返回第二个值（（如果所有的值都为false，则返回的是最后一个值）。
 
 
 实际开发中，我们经常是这样来做「容错处理」的：
 
-当成功调用一个接口后，返回的数据为 result 对象。这个时候，我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的：
+当前端成功调用一个接口后，返回的数据为 result 对象。这个时候，我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的：
 
 
 ```javascript
@@ -309,6 +287,69 @@ if (result.resultCode == 0) {
 
 上方代码的意思是，获取返回结果中的`result.data.imgUrl`这个图片资源；如果返回结果中没有 `result.data.imgUrl` 这个字段，就用 `http://img.smyhvae.com/20160401_01.jpg` 作为**兜底**图片。这种写法，在实际开发中经常用到。
 
+### 非布尔值的 `!`  运算
+
+非布尔值进行**与或运算**时，会先将其转换为布尔值，然后再运算，但返回结果是**布尔值**。
+
+举例：
+
+```javascript
+let a = 10;
+a = !a
+
+console.log(a);  // false
+console.log(typeof a); // boolean
+```
+
+### 短路运算的妙用【重要】
+
+> 下方举例中的写法技巧，在实际开发中，经常用到。这种写法，是一种很好的「容错、容灾、降级」方案，需要多看几遍。
+
+1、JS中的`&&`属于**短路**的与：
+
+- 如果第一个值为false，则不会执行后面的内容。
+
+- 如果第一个值为 true，则继续执行第二条语句，并返回第二个值。
+
+举例：
+
+```javascript
+const a1 = 'qianguyihao';
+//第一个值为true，会继续执行后面的内容
+a1 && alert('看 a1 出不出来'); // 可以弹出 alert 框
+
+const a2 = undefined;
+//第一个值为false，不会继续执行后面的内容
+a2 && alert('看 a2 出不出来'); // 不会弹出 alert 框
+```
+
+
+
+2、JS中的`||`属于**短路**的或：
+
+- 如果第一个值为true，则不会执行后面的内容。
+
+- 如果第一个值为 false，则继续执行第二条语句，并返回第二个值。
+
+举例：
+
+```js
+const result; // 请求接口时，后台返回的内容
+let errorMsg = ''; // 前端的文案提示
+
+if (result && result.retCode != 0) {
+	// 接口返回异常码时
+	errorMsg = result.msg || '活动太火爆，请稍后再试'; // 文案提示信息，优先用 接口返回的msg字段，其次用 '活动太火爆，请稍后再试' 这个文案兜底。
+}
+
+if (!result) {
+	// 接口挂掉时
+	errorMsg = '网络异常，请稍后再试';
+}
+```
+
+
+
 ## 赋值运算符
 
 可以将符号右侧的值赋值给符号左侧的变量。
@@ -376,7 +417,7 @@ console.log(true > false); //true
 
 比较字符编码时，是一位一位进行比较。如果两位一样，则比较下一位。
 
-比如说，当你尝试去比较`"123"`和`"56"`这两个字符串时，你会发现，字符串"56"竟然比字符串"123"要大。也就是说，下面这样代码的打印结果，其实是true:（这个我们一定要注意，在日常开发中，很容易忽视）
+比如说，当你尝试去比较`"123"`和`"56"`这两个字符串时，你会发现，字符串"56"竟然比字符串"123"要大（因为 5 比 1 大）。也就是说，下面这样代码的打印结果，其实是true:（这个我们一定要注意，在日常开发中，很容易忽视）
 
 ```javascript
 // 比较两个字符串时，比较的是字符串的字符编码，所以可能会得到不可预期的结果
@@ -560,7 +601,7 @@ PS：我们知道，Unicode编码采用的是16进制，但是，这里的编码
 
 ## 我的公众号
 
-想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
 
 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：