From fb29f861706936013edd4335ad2ad9510c362378 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 8 Dec 2019 22:34:53 +0800 Subject: [PATCH] =?UTF-8?q?add:=20parseInt()=E7=9A=84=E7=89=B9=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../03-typeof和变量的强制类型转换.md | 185 +++++++++++++----- 04-JavaScript基础/04-运算符.md | 2 +- .../05-流程控制语句：选择结构（if和switch）.md | 2 +- 17-前端综合/01-2019年Web前端入门自学路线.md | 2 +- 4 files changed, 143 insertions(+), 48 deletions(-) diff --git a/04-JavaScript基础/03-typeof和变量的强制类型转换.md b/04-JavaScript基础/03-typeof和变量的强制类型转换.md index 33a8519..c820750 100644 --- a/04-JavaScript基础/03-typeof和变量的强制类型转换.md +++ b/04-JavaScript基础/03-typeof和变量的强制类型转换.md @@ -8,17 +8,23 @@ > 我们先来讲一下 typeof，再讲类型转换。 -`typeof()`表示“**获取变量的类型**”，返回的是小写，语法为： +`typeof()`表示“**获取变量的类型**”，返回的是小写，语法为：（两种写法都可以） -``` +```javascript +// 写法1 typeof 变量 + +// 写法2 +typeof(变量) ``` +typeof这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢？是字符串。 + **返回结果**： | typeof 的代码写法 | 返回结果 | |:-------------|:-------------:| -| typeof 数值 | number | +| typeof 数字 | number | | typeof 字符串 | string | | typeof 布尔型 | boolean | | typeof 对象 | object | @@ -28,18 +34,53 @@ typeof 变量 备注1：在JavaScript中，只要是数，就是 number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 number 类型的。 -备注2：为啥 `typeof null`的返回值也是 objcet呢？这个 - +备注2：为啥 `typeof null`的返回值也是 object 呢？因为 null 代表的是**空对象**。 **返回结果举例**： -| typeof 的代码写法 | 返回结果 | 备注 | -|:-------------|:-------------:|:-------------| -| typeof [] | object | 空数组 | -| typeof {} | object | 空对象 | +```javascript +console.log(type []); // 空数组的打印结果：object +console.log(type {}); // 空对象的打印结果：object +``` -备注：这里的空数组`[]`、空对象`{}` ，为啥他们在使用 typeof 时，返回值也是 `object`呢？因为这里的 `object`指的是**引用数据类型**，是 Object 对象。 +代码解释：这里的空数组`[]`、空对象`{}` ，为啥他们在使用 typeof 时，返回值也是 `object`呢？因为这里的 返回结果`object`指的是**引用数据类型**。空数组、空对象都是**引用数据类型 Object**。 + +## 变量的类型转换的分类 + +类型转换分为两种：显示类型转换、隐式类型转换。 + +### 显示类型转换 + +- toString(radix) + +- String(mix) + +- Number(mix) + +- parseInt(string,radix) + +- parseFloat(string) + +- Boolean() + +### 隐式类型转换 + +- isNaN () + +- ++/—- +/-（一元正负） + +- + + +- */% + +- && || ！ + +- < > <= >= + +- == != + +下面来详细介绍。 ## 其他的简单类型 --> String @@ -71,14 +112,14 @@ console.log(a + 'haha'); // 转换成 String 类型 另外，Number类型的变量，在调用toString()时，可以在方法中传递一个整数作为参数。此时它将会把数字转换为指定的进制，如果不指定则默认转换为10进制。例如： ```javascript - var a = 255; +var a = 255; - //对于Number调用toString()时可以在方法中传递一个整数作为参数 - //此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制 - a = a.toString(2); +//对于Number调用toString()时可以在方法中传递一个整数作为参数 +//此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制 +a = a.toString(2); - console.log(a); // 11111111 - console.log(typeof a); // string +console.log(a); // 11111111 +console.log(typeof a); // string ``` ### 方法三：使用String()函数 @@ -125,14 +166,16 @@ String(变量) - 结果为：NaN -### 方式二：`parseInt()`：字符串 -> 整数【重要】 +补充：怎么理解这里的 NaN 呢？可以这样理解，使用 Number() 函数之后，**如果无法转换为数字，就会转换为 NaN**。 + +### 方式二：parseInt()函数：字符串 -> 整数【重要】 > `parseInt()`是专门用来对付字符串的。 **parseInt()的作用是将字符串中的有效的整数内容转为数字**。parse表示“转换”，Int表示“整数”（注意`Int`的拼写）。例如： ``` - parseInt("5"); +parseInt("5"); ``` 得到的结果是数字5。 @@ -141,12 +184,12 @@ String(变量) （1）**只保留字符串最开头的数字**，后面的中文自动消失。例如： -``` - console.log(parseInt("2017在公众号上写了6篇文章")); //打印结果：2017 +```javascript +console.log(parseInt("2017在公众号上写了6篇文章")); //打印结果：2017 - console.log(parseInt("2017.01在公众号上写了6篇文章")); //打印结果仍是：2017 （说明只会取整数） +console.log(parseInt("2017.01在公众号上写了6篇文章")); //打印结果仍是：2017 （说明只会取整数） - console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果：NaN +console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果：NaN ``` （2）自动带有截断小数的功能：**取整，不四舍五入**。 @@ -154,8 +197,8 @@ String(变量) 例1： ```javascript - var a = parseInt(5.8) + parseInt(4.7); - console.log(a); +var a = parseInt(5.8) + parseInt(4.7); +console.log(a); ``` 控制台输出： @@ -167,38 +210,73 @@ String(变量) 例2： ```javascript - var a = parseInt(5.8 + 4.7); - console.log(a); +var a = parseInt(5.8 + 4.7); +console.log(a); ``` 控制台输出： ```javascript - 10 +10 ``` -（3）如果对**非String**使用parseInt()或parseFloat()，它会**先将其转换为String**然后再操作。 +（3）如果对**非String**使用parseInt()或parseFloat()，它会**先将其转换为String**然后再操作。【重要】 比如： ```javascript - var a = true; - console.log(parseInt(a)); //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作） +var a = true; +console.log(parseInt(a)); //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作） - var b = null; - console.log(parseInt(b)); //打印结果：NaN （因为是先将b转为字符串"null"，然后然后再操作） +var b = 168.23; +console.log(parseInt(b)); //打印结果：168 （因为是先将c转为字符串"168.23"，然后然后再操作） - var c = undefined; - console.log(parseInt(c)); //打印结果：NaN （因为是先将b转为字符串"undefined"，然后然后再操作） +var c = null; +console.log(parseInt(c)); //打印结果：NaN （因为是先将b转为字符串"null"，然后然后再操作） - var d = 168.23; - console.log(parseInt(d)); //打印结果：168 （因为是先将c转为字符串"168.23"，然后然后再操作） +var d = undefined; +console.log(parseInt(d)); //打印结果：NaN （因为是先将b转为字符串"undefined"，然后然后再操作） ``` -（4）带两个参数时，表示进制转换。 +总结：就拿`Number(true)` 和 `parseInt(true)/parseFloat(true)`来举例，由此我们可以看出，二者在使用时，是有区别的： -### `parseFloat()`：字符串 --> 浮点数（小数） +- Number(true) ：千方百计地想转换为数字。 + +- parseInt(true)/parseFloat(true) ：先转为字符串，再提取出最前面的数字部分；没提取出来，那就返回 NaN。 + + +（4）带两个参数时，表示在转换时，包含了进制转换。 + +代码举例： + +```javascript +var a = '110'; + +var num = parseInt(a, 16); // 【重要】将 a 当成 十六进制 来看待，转换成 十进制 的 num + +console.log(num); +``` + +打印结果： + +``` +272 +``` + +如果你对打印结果感到震惊，请仔细看上面的代码注释。也就是说，无论 parseInt() 里面的进制参数是多少，最终的转换结果是十进制。 + +我们继续来看下面的代码，打印结果是多少。 + +```javascript +var a = '5'; + +var num = parseInt(a, 2); // 将 a 当成 二进制 来看待，转换成 十进制 的 num + +console.log(num); // 打印结果：NaN。因为 二进制中没有 5 这个数，转换失败。 +``` + +### parseFloat()函数：字符串 --> 浮点数（小数） > `parseFloat()`是专门用来对付字符串的。 @@ -209,10 +287,12 @@ parseFloat()和parseInt()的作用类似，不同的是，parseFloat()可以获 代码举例： ```javascript - var a = '123.456.789px'; - console.log(parseFloat(a)); // 打印结果：123.456 +var a = '123.456.789px'; +console.log(parseFloat(a)); // 打印结果：123.456 ``` +parseFloat() 的几个特性，可以参照 parseInt()。 + ## 转换为 Boolean 将其他的数据类型转换为Boolean，可以使用Boolean()函数。 @@ -225,9 +305,9 @@ parseFloat()和parseInt()的作用类似，不同的是，parseFloat()可以获 - 情况四：对象也会转换为true。 -PS：转换为 Boolean 的这几种情况，很重要，开发中会经常用到。 +PS：转换为 Boolean 的这几种情况，**很重要**，开发中会经常用到。 -## 其他进制的数字 +## 知识补充：其他进制的数字 - 16进制的数字，以`0x`开头 @@ -237,12 +317,27 @@ PS：转换为 Boolean 的这几种情况，很重要，开发中会经常用到 比如`070`这个字符串，如果我调用parseInt()转成数字时，有些浏览器会当成8进制解析，有些会当成10进制解析。 -所以，比较建议的做法是：可以在parseInt()中传递第二个参数，来指定数字的进制。例如： +所以，比较建议的做法是：可以在parseInt()中传递第二个参数，来指定当前数字的进制。例如： ```javascript - a = "070"; +var a = "070"; + +a = parseInt(a,8); //将 070 当成八进制来看待，转换结果为十进制。 +console.log(a); // 打印结果：56。这个地方要好好理解。 +``` + + +### 通过运算符转为数字 + +- 任何值做`-`、`*`、`/`运算时都会自动转换为Number。 + +注：任何值和字符串相加，结果会转换为字符串。 + +代码举例： + +```javascript + - a = parseInt(a,10); //转换成十进制 ``` diff --git a/04-JavaScript基础/04-运算符.md b/04-JavaScript基础/04-运算符.md index bd146d1..7e1a4f6 100644 --- a/04-JavaScript基础/04-运算符.md +++ b/04-JavaScript基础/04-运算符.md @@ -14,7 +14,7 @@ 比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以**字符串**的形式返回：number string boolean undefined object。 -注：运算符都是会返回结果的，而typeof这个运算符返回的结果就是变量的类型。那返回的结果的类型是什么呢？是字符串。 +注：运算符都是会返回结果的。 运算符有很多分类，比如： diff --git a/04-JavaScript基础/05-流程控制语句：选择结构（if和switch）.md b/04-JavaScript基础/05-流程控制语句：选择结构（if和switch）.md index afba967..0889674 100644 --- a/04-JavaScript基础/05-流程控制语句：选择结构（if和switch）.md +++ b/04-JavaScript基础/05-流程控制语句：选择结构（if和switch）.md @@ -484,7 +484,7 @@ switch (retCode) { ``` -在实战开发中，方式3是非常推荐的写法，甚至比方式2还要好。我们尽量不要写太多的 if 语句，避免代码过于臃肿。 +在实战开发中，方式3是非常推荐的写法，甚至比方式2还要好。我们尽量不要写太多的 if 语句，避免代码嵌套过深。 ### switch 语句的优雅写法：适时地去掉 break diff --git a/17-前端综合/01-2019年Web前端入门自学路线.md b/17-前端综合/01-2019年Web前端入门自学路线.md index 53c6ae5..3d6a475 100644 --- a/17-前端综合/01-2019年Web前端入门自学路线.md +++ b/17-前端综合/01-2019年Web前端入门自学路线.md @@ -1,6 +1,6 @@ -> 本文的最新内容，更新于**2019-12-01**。大家完全不用担心这篇文章会过时，因为随着 前端技术的更新更新，本文也会随之更新。 +> 本文的最新内容，更新于**2019-12-01**。大家完全不用担心这篇文章会过时，因为随着 前端技术的更新，本文也会随之更新。 > 本文的最新内容也会在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。