Compare commits

...

2 Commits

Author SHA1 Message Date
qianguyihao
e9a48dd823 update: 数据类型转换 2024-04-04 12:00:19 +08:00
qianguyihao
10236ab012 update: 数据类型转换 2024-04-04 11:58:45 +08:00
3 changed files with 40 additions and 44 deletions

View File

@ -48,7 +48,7 @@ name = 123; // 强制将变量 name 修改为 数字类型
### JS 中一共有八种数据类型 ### JS 中一共有八种数据类型
- **基本数据类型(值类型)**String 字符串、Boolean 布尔值、Number 数值、Undefined 未定义、BigInt 大型数值、Symbol。 - **基本数据类型(值类型)**String 字符串、Boolean 布尔值、Number 数值、Undefined 未定义、Null 空对象、BigInt 大型数值、Symbol。
- **引用数据类型(引用类型)**Object 对象。 - **引用数据类型(引用类型)**Object 对象。

View File

@ -196,6 +196,16 @@ String(变量/常量);
- 对于 Number、Boolean、String、Object 而言,本质上就是调用 toString()方法,返回结果同 toString()方法。 - 对于 Number、Boolean、String、Object 而言,本质上就是调用 toString()方法,返回结果同 toString()方法。
- 但是对于 null 和 undefined则不会调用 toString() 方法。它会,将 undefined 直接转换为 "undefined",将 null 直接转换为 "null"。 - 但是对于 null 和 undefined则不会调用 toString() 方法。它会,将 undefined 直接转换为 "undefined",将 null 直接转换为 "null"。
使用String()函数转为字符串的规则如下:
| 原始值 | 转换后的值 |
| ------------------- | ----------------------- |
| 布尔值true、false | 字符串:'true'、'false' |
| 数字 | 字符串 |
| undefined | 字符串:'undefined' |
| null | 字符串:'null' |
| 对象 | 字符串:'object' |
### 3、隐式类型转换字符串拼接 ### 3、隐式类型转换字符串拼接
如果加号的两边有一个是字符串,则另一边会自动转换成字符串类型进行拼接。 如果加号的两边有一个是字符串,则另一边会自动转换成字符串类型进行拼接。
@ -228,23 +238,14 @@ console.log(a + 'haha'); // 打印结果:"123haha"
const result = Number(变量/常量); const result = Number(变量/常量);
``` ```
**情况一:字符串 --> 数字** 使用 Number() 函数转为数字的规则如下:
1如果字符串中的内容是纯数字则直接将其转换为数字。 | 原始值 | 转换后的值 |
| ------------------- | ------------------------------------------------------------ |
2如果字符串是一个**空串**或者是一个**全是空格**的字符串,则转换为 0。 | 字符串 | 1字符串去掉首尾空格后剩余字符串的内容如果是纯数字则直接将其转换为数字。<br/>2如果字符串是一个**空串**或者是一个**全是空格**的字符串,则转换为 0。<br/>3字符串去掉首尾空格后剩余字符串包的内容只要含了其他非数字的内容`小数点`按数字来算),则转换为 NaN。怎么理解这里的 **NaN** 呢?可以这样理解,使用 Number() 函数之后,**如果无法转换为数字,就会转换为 NaN**。 |
| 布尔值true、false | true 转成 1false 转成 0 |
3只要字符串中包含了其他非数字的内容`小数点`按数字来算),则转换为 NaN。怎么理解这里的 **NaN** 呢?可以这样理解,使用 Number() 函数之后,**如果无法转换为数字,就会转换为 NaN**。 | undefined | NaN |
| null | 0 |
**情况二:布尔 --> 数字**
1true 转成 1
2false 转成 0
**情况三null --> 数字**结果为0
**情况四undefined --> 数字**结果为NaN
### 2、隐式类型转换——运算符加号 `+` ### 2、隐式类型转换——运算符加号 `+`
@ -343,23 +344,14 @@ parse 表示“转换”Int 表示“整数”。例如:
parseInt('5'); // 得到的结果是数字 5 parseInt('5'); // 得到的结果是数字 5
``` ```
按照上面的规律,parseInt()的转换结果,列举如下。 按照上面的规律,使用 parseInt() 函数转为数字的规则如下:
**情况一:字符串 --> 数字** | 原始值 | 转换后的值 |
| ------------------- | ------------------------------------------------------------ |
1**只保留字符串最开头的数字**,后面的中文自动消失。 | 字符串 | 1**只保留字符串最开头的数字**,后面的中文自动消失。<br/>2如果字符串不是以数字开头则转换为 NaN。<br/>3如果字符串是一个空串或者是一个全是空格的字符串转换时会报错。 |
| 布尔值true、false | NaN |
2如果字符串不是以数字开头则转换为 NaN。 | undefined | NaN |
| null | NaN |
3如果字符串是一个空串或者是一个全是空格的字符串转换时会报错。
**情况二Boolean --> 数字**结果为NaN
**情况三Null --> 数字**结果为NaN
**情况四Undefined --> 数字**结果为NaN
---
Number() 函数和 parseInt() 函数的区别: Number() 函数和 parseInt() 函数的区别:
@ -491,17 +483,21 @@ parseFloat() 的几个特性,可以参照 parseInt()。
其他的数据类型都可以转换为 Boolean 类型。无论是隐式转换,还是显示转换,转换结果都是一样的。有下面几种情况: 其他的数据类型都可以转换为 Boolean 类型。无论是隐式转换,还是显示转换,转换结果都是一样的。有下面几种情况:
1情况一数字 --> 布尔。 0 和 NaN的转换结果 false其余的都是 true。比如 `Boolean(NaN)`的结果是 false。 使用 Number() 函数转为数字的规则如下:
2情况二字符串 ---> 布尔。空串的转换结果是false其余的都是 true。全是空格的字符串转换结果也是 true。字符串`'0'`的转换结果也是 true。 | 原始值 | 转换后的值 |
| --------- | ------------------------------------------------------------ |
| 字符串 | 空串的转换结果是false其余的都是 true。<br />全是空格的字符串,转换结果也是 true。<br />字符串`'0'`的转换结果也是 true。 |
| 数字 | 0 和 NaN的转换结果 false其余的都是 true。比如 `Boolean(NaN)`的结果是 false。 |
| undefined | false |
| null | false |
| 对象 | 引用数据类型会转换为 true。<br />注意,空数组`[]`和空对象`{}`**转换结果也是 true**,这一点,很多人不知道。 |
3情况三null 和 undefined 都会转换为 false。 小结:空字符串''、0、NaN、undefined、null会转换为 false其他值会转换为 true。
4情况四引用数据类型会转换为 true。注意空数组`[]`和空对象`{}`**转换结果也是 true**,这一点,很多人不知道。
**重中之重来了:** **重中之重来了:**
转换为 Boolean 的上面这几种情况,**极其重要**,开发中会频繁用到。比如说,我们在项目开发中,经常需要对一些**非布尔值**做逻辑判断,符合条件后,才做下一步的事情。这个逻辑判断就是依据上面的四种情况。 转换为 Boolean 的上面这几种情况,**极其重要**,开发中会频繁用到。比如说,我们在项目开发中,经常需要对一些**非布尔值**做**逻辑判断或者逻辑运算**,符合条件后,才做下一步的事情。这个逻辑判断就是依据上面的四种情况。
举例:(接口返回的内容不为空,前端才做进一步的事情) 举例:(接口返回的内容不为空,前端才做进一步的事情)
@ -509,10 +505,12 @@ parseFloat() 的几个特性,可以参照 parseInt()。
const result1 = ''; const result1 = '';
const result2 = { a: 'data1', b: 'data2' }; const result2 = { a: 'data1', b: 'data2' };
// 逻辑判断
if (result1) { if (result1) {
console.log('因为 result1的内容为空所以代码进不了这里'); console.log('因为 result1的内容为空所以代码进不了这里');
} }
// 逻辑运算
if (result2 && result2.a) { if (result2 && result2.a) {
// 接口返回了 result2且 result2.a 里面有值,前端才做进一步的事情 // 接口返回了 result2且 result2.a 里面有值,前端才做进一步的事情
console.log('代码能进来,前端继续在这里干活儿'); console.log('代码能进来,前端继续在这里干活儿');
@ -521,6 +519,8 @@ if (result2 && result2.a) {
这里再次强调一下,空数组`[]`和空对象`{}`转换为 Boolean 值时,转换结果为 true。 这里再次强调一下,空数组`[]`和空对象`{}`转换为 Boolean 值时,转换结果为 true。
我们在下一篇内容《运算符》中,还会详细讲非布尔值的逻辑运算。
### 1. 隐式类型转换:逻辑运算 ### 1. 隐式类型转换:逻辑运算
当非 Boolean 类型的数值和 Boolean 类型的数值做比较时,会先把前者**临时**进行隐式转换为 Boolean 类型,然后再做比较;且不会改变前者的数据类型。举例如下: 当非 Boolean 类型的数值和 Boolean 类型的数值做比较时,会先把前者**临时**进行隐式转换为 Boolean 类型,然后再做比较;且不会改变前者的数据类型。举例如下:
@ -542,10 +542,6 @@ console.log(0 == true); // 打印结果false
使用 Boolean()函数可以显式转换为 Boolean 类型。 使用 Boolean()函数可以显式转换为 Boolean 类型。
## 隐式类型转换isNaN() 函数 ## 隐式类型转换isNaN() 函数
语法: 语法:

View File

@ -396,7 +396,7 @@ PS上面的`a>=18 && a<= 65`千万别想当然地写成` 18<= a <= 65`,没
> 之所以重要,是因为在实际开发中,我们经常用这种代码做容错处理或者兜底处理。 > 之所以重要,是因为在实际开发中,我们经常用这种代码做容错处理或者兜底处理。
非布尔值进行**与或运算**时,会先将其转换为布尔值,然后再运算,但返回结果是**原值**。比如说: 非布尔值进行**与或运算**时,会通过隐式类型转换,先将其转换为布尔值,然后再运算,但返回结果是**原值**。比如说:
```javascript ```javascript
var result = 5 && 6; // 运算过程true && true; var result = 5 && 6; // 运算过程true && true;