add: 隐式类型转换

This commit is contained in:
qianguyihao 2019-12-09 16:43:15 +08:00
parent 7328c630ae
commit b15c7aa95e
3 changed files with 188 additions and 121 deletions

View File

@ -584,12 +584,26 @@ css 颜色管理。
安装了插件 `TODO Highlight`之后按住「Cmd + Shift + P」打开命令面板输入「Todohighlist」选择相关的命令我们就可以看到一个 todoList 的清单。 安装了插件 `TODO Highlight`之后按住「Cmd + Shift + P」打开命令面板输入「Todohighlist」选择相关的命令我们就可以看到一个 todoList 的清单。
### WakaTime
统计写代码的时间。
### Code Time ### Code Time
`Code Time`插件:记录编程时间,统计代码行数。摸鱼必备。 `Code Time`插件:记录编程时间,统计代码行数。摸鱼必备。
安装该插件后VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后选择「Code Time Dashboard」即可查看统计结果。 安装该插件后VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后选择「Code Time Dashboard」即可查看统计结果。
备注:团长试了一下这个 code time 插件,发现统计结果不是很准。
### Markdown Preview Github Styling
以 GitHub 风格预览 Markdown 样式。
### Settings Sync ### Settings Sync
- 地址:<https://github.com/shanalikhan/code-settings-sync> - 地址:<https://github.com/shanalikhan/code-settings-sync>
@ -602,7 +616,6 @@ css 颜色管理。
- 作用:多台设备之间,同步 VS Code 配置。 - 作用:多台设备之间,同步 VS Code 配置。
### indent-rainbow突出显示缩进 ### indent-rainbow突出显示缩进
`indent-rainbow`插件:突出显示缩进。 `indent-rainbow`插件:突出显示缩进。

View File

@ -12,10 +12,10 @@
```javascript ```javascript
// 写法1 // 写法1
typeof 变量 typeof 变量;
// 写法2 // 写法2
typeof(变量) typeof 变量;
``` ```
typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢?是字符串。 typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢?是字符串。
@ -23,7 +23,7 @@ typeof这个运算符的返回结果就是变量的类型。那返回结果的
**返回结果** **返回结果**
| typeof 的代码写法 | 返回结果 | | typeof 的代码写法 | 返回结果 |
|:-------------|:-------------:| | :---------------- | :-------: |
| typeof 数字 | number | | typeof 数字 | number |
| typeof 字符串 | string | | typeof 字符串 | string |
| typeof 布尔型 | boolean | | typeof 布尔型 | boolean |
@ -52,13 +52,13 @@ console.log(type {}); // 空对象的打印结果object
### 显示类型转换 ### 显示类型转换
- toString(radix) - toString()
- String(mix) - String()
- Number(mix) - Number()
- parseInt(string,radix) - parseInt(string)
- parseFloat(string) - parseFloat(string)
@ -68,21 +68,23 @@ console.log(type {}); // 空对象的打印结果object
- isNaN () - isNaN ()
- ++/—- +/-(一元正负) - 自增/自减运算符:`++`、`—-`
- + - 正号/负号:`+a`、`-a`
- */% - 加号:`+`
- && || - 运算符:`-`、`*`、`/`
- < > <= >= ### 隐式类型转换(特殊)
- == != - 逻辑运算符:`&&`、`||`、`` 。非布尔值进行**与或**运算时,会先将其转换为布尔值,然后再运算,但返回结果是**原值**。具体可以看下一篇文章《运算符》。
下面来详细介绍 - 关系运算符:`<`、`>` `<=` `>=`等。关系运算符得到的结果都是布尔值要么是true要么是false。具体可以看下一篇文章《运算符》
针对上面这两种类型转换,下面来详细介绍。
## 其他的简单类型 --> String ## 其他的简单类型 --> String
### 方法一:变量+"" 或者 变量+"abc" ### 方法一:变量+"" 或者 变量+"abc"
@ -101,7 +103,7 @@ console.log(a + 'haha'); // 转换成 String 类型
举例如下: 举例如下:
``` ```javascript
变量.toString() 变量.toString()
``` ```
@ -126,7 +128,7 @@ console.log(typeof a); // string
格式如下: 格式如下:
``` ```javascript
String(变量) String(变量)
``` ```
@ -148,7 +150,7 @@ String(变量)
- 1.如果字符串中是纯数字,则直接将其转换为数字。 - 1.如果字符串中是纯数字,则直接将其转换为数字。
- 2.只要字符串中包含了非数字的内容(`小数点`按数字来算则转换为NaN。此处可以看到Number()函数的局限性)。 - 2.只要字符串中包含了非数字的内容(`小数点`按数字来算),则转换为 NaN。
- 3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为 0。 - 3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为 0。
@ -166,19 +168,50 @@ String(变量)
- 结果为NaN - 结果为NaN
补充:怎么理解这里的 NaN 呢?可以这样理解,使用 Number() 函数之后,**如果无法转换为数字,就会转换为 NaN**。 补充:怎么理解这里的 **NaN** 呢?可以这样理解,使用 Number() 函数之后,**如果无法转换为数字,就会转换为 NaN**。
### parseInt()函数:字符串 -> 整数【重要】 ### 使用 parseInt()函数:字符串 -> 整数【重要】
**parseInt()的作用是将字符串中的有效的整数内容转为数字**。parse 表示“转换”Int 表示“整数”(注意`Int`的拼写)。例如: **parseInt()的作用是将字符串中的有效的整数内容转为数字**。parse 表示“转换”Int 表示“整数”(注意`Int`的拼写)。例如:
``` ```javascript
parseInt("5"); parseInt("5");
``` ```
得到的结果是数字 5。 得到的结果是数字 5。
**parseInt()还具有以下特性** parseInt()的转换情况如下。
**情况一:字符串 --> 数字**
- 1.**只保留字符串最开头的数字**,后面的中文自动消失。
- 2.如果字符串不是以数字开头,则转换为 NaN。
- 3.如果字符串是一个空串或者是一个全是空格的字符串,转换时会报错。
**情况二:布尔 --> 数字**
- 结果为NaN
**情况三null --> 数字**
- 结果为NaN
**情况四undefined --> 数字**
- 结果为NaN
Number() 函数和 parseInt() 函数的区别:
就拿`Number(true)` 和 `parseInt(true)/parseFloat(true)`来举例,二者在使用时,是有区别的:
- Number(true) :千方百计地想转换为数字。
- parseInt(true)/parseFloat(true) :先转为字符串,再提取出最前面的数字部分;没提取出来,那就返回 NaN。
**parseInt()具有以下特性**
1**只保留字符串最开头的数字**,后面的中文自动消失。例如: 1**只保留字符串最开头的数字**,后面的中文自动消失。例如:
@ -190,7 +223,25 @@ console.log(parseInt("2017.01在公众号上写了6篇文章")); //打印结果
console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果NaN console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果NaN
``` ```
2自动带有截断小数的功能**取整,不四舍五入**。 2如果对**非 String**使用 parseInt()或 parseFloat(),它会**先将其转换为 String** 然后再操作。【重要】
比如:
```javascript
var a = 168.23;
console.log(parseInt(a)); //打印结果168 因为是先将c转为字符串"168.23",然后然后再操作)
var b = true;
console.log(parseInt(b)); //打印结果NaN 因为是先将a转为字符串"true",然后然后再操作)
var c = null;
console.log(parseInt(c)); //打印结果NaN 因为是先将b转为字符串"null",然后然后再操作)
var d = undefined;
console.log(parseInt(d)); //打印结果NaN 因为是先将b转为字符串"undefined",然后然后再操作)
```
3自动带有截断小数的功能**取整,不四舍五入**。
例 1 例 1
@ -215,35 +266,9 @@ console.log(a);
控制台输出: 控制台输出:
```javascript ```javascript
10 10;
``` ```
3如果对**非String**使用parseInt()或parseFloat(),它会**先将其转换为String**然后再操作。【重要】
比如:
```javascript
var a = true;
console.log(parseInt(a)); //打印结果NaN 因为是先将a转为字符串"true",然后然后再操作)
var b = 168.23;
console.log(parseInt(b)); //打印结果168 因为是先将c转为字符串"168.23",然后然后再操作)
var c = null;
console.log(parseInt(c)); //打印结果NaN 因为是先将b转为字符串"null",然后然后再操作)
var d = undefined;
console.log(parseInt(d)); //打印结果NaN 因为是先将b转为字符串"undefined",然后然后再操作)
```
总结:就拿`Number(true)` 和 `parseInt(true)/parseFloat(true)`来举例,由此我们可以看出,二者在使用时,是有区别的:
- Number(true) :千方百计地想转换为数字。
- parseInt(true)/parseFloat(true) :先转为字符串,再提取出最前面的数字部分;没提取出来,那就返回 NaN。
4带两个参数时表示在转换时包含了进制转换。 4带两个参数时表示在转换时包含了进制转换。
代码举例: 代码举例:
@ -299,7 +324,7 @@ parseFloat() 的几个特性,可以参照 parseInt()。
- 情况三null 和 undefined 都会转换为 false。 - 情况三null 和 undefined 都会转换为 false。
- 情况四:对象也会转换为true - 情况四:引用数据类型会转换为 true。注意`空数组[]`和`空对象{}`,转换结果也是 true这个一点很多人都不知道
PS转换为 Boolean 的这几种情况,**很重要**,开发中会经常用到。 PS转换为 Boolean 的这几种情况,**很重要**,开发中会经常用到。
@ -331,18 +356,17 @@ console.log(a); // 打印结果56。这个地方要好好理解。
语法: 语法:
```javascript ```javascript
isNaN(参数) isNaN(参数);
``` ```
解释:判断指定的参数是否为 NaN返回结果为 Boolean 类型。 解释:判断指定的参数是否为 NaN返回结果为 Boolean 类型。
**过程** **执行过程**
1先调用`Number(参数)`函数; 1先调用`Number(参数)`函数;
2然后将`Number(参数)`的返回结果和`NaN`进行比较。 2然后将`Number(参数)`的返回结果和`NaN`进行比较。
代码举例: 代码举例:
```javascript ```javascript
@ -355,20 +379,61 @@ console.log(isNaN(null)); // 返回结果false
console.log(isNaN(undefined)); // 返回结果true console.log(isNaN(undefined)); // 返回结果true
``` ```
### 自增/自减运算符:`++`、`—-`
### 通过运算符转为数字 **举例 1**
- 任何值做`-`、`*`、`/`运算时都会自动转换为Number。
注:任何值和字符串相加,结果会转换为字符串。
代码举例:
```javascript ```javascript
var a = "666";
a++;
console.log(typeof a); // 打印结果: number
console.log(a); // 打印结果667
``` ```
执行过程:
1先调用`Number(参数)`函数;
2然后将`Number(参数)`的返回结果进行 加 1 操作。
**举例 2**
```javascript
var a = 'abc';
a++;
console.log(typeof a); // 打印结果number
console.log(a); // 打印结果NaN。因为 Number('abc')的结果为 NaN再自增后结果依然是 NaN
```
### 正号/负号:`+a`、`-a`
> 注意,这里说的是正号/负号,不是加号/减号。
任何值做`+a`、`-a`运算时都会自动转换为 Number 类型。 内部调用的是 Number() 函数。
**举例**
```javascript
var a = '666';
console.log(typeof +a); // 打印结果number
console.log(+a); // 打印结果666
var b = '666';
console.log(typeof -b); // 打印结果number
console.log(-b); // 打印结果:-666
```
### 加号:`+`
加号在做隐式类型转换时,有一个特点:当加号的两边,只要有一个是字符串的时候,就会调用 String() 函数,导致最终的返回结果是字符串。
### 运算符:`-`、`*`、`/`
任何值做`-`、`*`、`/`运算时,运算结果都会自动转换为 Number 类型。内部调用的是 Number() 函数。
注:任何值和字符串相加,结果会转换为字符串。这个在上一小段已经讲过。
## 我的公众号 ## 我的公众号
@ -377,5 +442,3 @@ console.log(isNaN(undefined)); // 返回结果true
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/2016040102.jpg)

View File

@ -1,8 +1,5 @@
> 本文首发于[博客园](https://www.cnblogs.com/smyhvae/p/8306146.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。 我们在本文件夹的第二篇里讲到了JS中**变量**的概念,本篇文章讲一下**运算符**和表达式。
我们在本文件夹的[第二篇](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/02-%E5%8F%98%E9%87%8F.md)里讲到了JS中**变量**的概念,本篇文章讲一下**运算符**和表达式。
## 前言 ## 前言
@ -20,7 +17,7 @@
- 算数运算符 - 算数运算符
- 自增运算符 - 自增/自减运算符
- 逻辑运算符 - 逻辑运算符
@ -320,7 +317,7 @@ PS上面的这个`a>=18 && a<= 65`千万别想当然的写成` 18<= a <= 65`
### 非布尔值的与或运算【重要】 ### 非布尔值的与或运算【重要】
> 之所以重要,是因为在实际开发中,我们经常用这种代码做容错处理。 > 之所以重要,是因为在实际开发中,我们经常用这种代码做容错处理或者兜底处理
非布尔值进行**与或运算**时,会先将其转换为布尔值,然后再运算,但返回结果是**原值**。比如说: 非布尔值进行**与或运算**时,会先将其转换为布尔值,然后再运算,但返回结果是**原值**。比如说:
@ -472,19 +469,15 @@ console.log(NaN == NaN); //false
答案可以通过isNaN()函数来判断一个值是否是NaN。举例 答案可以通过isNaN()函数来判断一个值是否是NaN。举例
```javascript ```javascript
console.log(isNaN(b)); //false console.log(isNaN(b));
``` ```
如上方代码所示,如果 b 为 NaN则返回true否则返回false。 如上方代码所示,如果 b 为 NaN则返回true否则返回false。
### `===`全等符号的强调 ### `===`全等符号的强调
**全等在比较时,不会做类型转换**。如果要保证**绝对等于(完全等于)**,我们就要用三个等号`===`。例如:
如果要保证**完全等于**,我们就要用三个等号`===`。**全等不会做类型转换**。例如:
```javascript ```javascript
console.log("6" === 6); //false console.log("6" === 6); //false
@ -505,7 +498,6 @@ console.log(isNaN(b)); //false
console.log(3 !== "3"); //true应为3==="3"是false所以反过来是true。 console.log(3 !== "3"); //true应为3==="3"是false所以反过来是true。
``` ```
## 三元运算符 ## 三元运算符
三元运算符也叫条件运算符。 三元运算符也叫条件运算符。
@ -526,7 +518,6 @@ console.log(isNaN(b)); //false
如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算。 如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算。
## 运算符的优先级 ## 运算符的优先级
运算符的优先级如下:(越往上,优先级越高) 运算符的优先级如下:(越往上,优先级越高)