diff --git a/04-JavaScript基础/07-运算符.md b/04-JavaScript基础/07-运算符.md index 8406b32..8d6d389 100644 --- a/04-JavaScript基础/07-运算符.md +++ b/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岁之间) +举例2:(判断一个人的年龄是否在18~65岁之间) ```javascript -var a = prompt("请输入您的年龄"); -alert(a>=18 && a<= 65); +const a = prompt('请输入您的年龄'); + +if (a >= 18 && a < 65) { + alert('可以上班'); +} else { + alert('准备退休'); +} ``` - -PS:上面的这个`a>=18 && a<= 65`千万别想当然的写成` 18<= a <= 65`,没有这种语法。 - -### 注意事项 - -(1)能参与逻辑运算的,都是布尔值。 - -(2)JS中的`&&`属于**短路**的与,如果第一个值为false,则不会看第二个值。举例: - -```javascript -//第一个值为true,会检查第二个值 -true && alert("看我出不出来!!"); // 可以弹出 alert 框 - -//第一个值为false,不会检查第二个值 -false && alert("看我出不出来!!"); // 不会弹出 alert 框 -``` - -(3)JS中的`||`属于**短路**的或,如果第一个值为true,则不会看第二个值。举例: - -(4)如果对**非布尔值**进行逻辑运算,则会**先将其转换为布尔值**,然后再操作。举例: - -```javascript -var a = 10; -a = !a; - -console.log(a); // false -console.log(typeof a); // boolean -``` - -上面的例子,我们可以看到,对非布尔值进行`!`操作之后,返回结果为布尔值。 +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`)。 +想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: