这段时间在学JS中的类型一遍过程中的数据类型的转换,还有就是我们所说的基本类型(number,string,boolean)和复杂类型(Object:object,function,array)的区别!
01|JS数据类型的转换
下面的话我列举一下我们常常用到的基本类型吧:
| 数据类型 | 介绍 |
|---|---|
| string | 字符串类型 |
| number | 数字类型 |
| boolean | 布尔类型 |
| null | 空值 |
| undefined | 未定义 |
| symbol | 暂不介绍 |
| object | object,function,Array |
因为之前在学习JavaScript中的类型的时候,Symbol没有做到太多的介绍和详细的说明,在这里也就不展开介绍了描述了,主要介绍其他几种:
01|String
String类型是我们在编程中使用到的最多的类型之一,那么在实际的开发过程中,应该如何讲别的类型转换成String类型呢?
下面针对开发过程中,给定了几种通过别的类型转换成String类型的方法:
| 方法 | 描述 |
|---|---|
| 1. String(x) | 调用String()方法,传入需要转换的值 |
| 2. x.toString() | 在需要转换的值后面调用toString()方法 |
| 3. x+'' | 需要转换的值加上一对引号 |
Example:
- 先通过String()方法,对需要进行转换的值进行转换!
- 因为String本身的话就是字符串类型,就没有作举例说明!
- 如果说这三种方法中,哪种方法的易用性更高,那就是第三种,第三种的话虽然说没有前面两种方法那么明确,但是却是更好用!
- 直接通过+''将数值转换成了字符串!
01|Method:String(x)
任意类型转换String_01.jpg
02|Method:x.toString();
任意类型转换String_02.jpg
03|Method:x+''
任意类型转换String_03.jpg
02|number
number数字类型也是常用的类型 之一,关于其他类型转换成别的类型的方法总共有5种,下面列表中举例说明:
| 方法 | 描述 |
|---|---|
| 1. Number(x) | 调用该方法里面传入需要转换得值! |
| 2. parseInt(x,10) | X:需要转换得值,后面的参数传入进制数:2 8 10 16 |
| 3. parseFloat(x) | 方面将传入的值x转换成浮点数 |
| 4. x-0 | 传入的值x将转换成数值 |
| 5. +x | 传入的值x将转换成数值 |
Example:
其中这五种方法当中,最简单的就是最后两种了,第四种和第五种,这也是在大多数文档中没有提到过的方法!
其中的话,比如说parseInt和parseFloat都是通过解析的方法将其转成想要的数字,parseInt需要指定进制数(当然,默认可以不写 默认的话是转成10进制),而parseFloat是直接转成浮点数!
01|Method:Number(x)
任意类型转换number_01.jpg
02|Method:parseInt(x,10)
03|Method:parseFloat(x)
任意类型转换number_03.jpg
04|Method:x-0
任意类型转换number_04.jpg
05|Method:+x
任意类型转换number_05.jpg
03|Boolean
Boolean值的话,在我们开发中运用在条件判断语句中非常多,比如说if语句中,大多数是if中,当然有些运算符会返回布尔值:
- 前置逻辑运算符:!(not)
- 相等运算符:===,!==,==,!=
- 比较运算符:>,>=,<,<=
下面有两种方法还有对应的集中falsy值介绍:
| 方法 | 描述 |
|---|---|
| 1. Boolean(X) | 将X传入Boolean方法中会拿到转换后的Boolean(布尔)值! |
| 2. !!X | 通过!!感叹号得到对应的X的布尔值! |
Example:
这两种方法,都应该是比较好理解的,两种方法相比较来说,第一种更具有辨识性,第二种的话更具有易用性,当然需要理解这种方法的情况下才能够更好地使用!
01|Boolean
任意类型转换Boolean_01.jpg
02|!!x
任意类型转换Boolean_02.jpg
03|falsy值 该值会自动转换成Boolean值并且值为false
| falsy值 | 介绍 |
|---|---|
| 1. undefined | 未定义的 |
| 2. null | 空值 |
| 3. false | 错误的 |
| 4. 0 | 数字0 |
| 5. NaN (Not a Number) | Nan表示不是数字 about NaN By MDN |
| 6. ""或者是'' | 空字符串 |
以上的falsy值很好地说明了,哪些值为false,除此之外的值转换成Boolean值之后都为true!
04|Null and Undefined
这两种值都是在定义的时候表现出来的,其中的表现形式为:
| 操作 | 介绍 |
|---|---|
| var a; | a=undefined;(如果只是对一个变量进行声明的话没有赋值,默认为undefined) |
| var a=null; | a=null;对一个变量进行声明,但是如果不想赋值可以给定位null变量值为空! |
| var a=3;a=null; | 对一个变量赋值,然后又通过null对其进行覆盖,此时的变量就为null! |
| var a=c;a=undefined; | 对一个变量赋值,然后又通过null对其进行覆盖,此时的变量就为undefined! |
05|Object include object,function,and Array
Object:对象,其实从字面意思上面来讲还是比较好理解的,就是对象的意思,但是在JavaScript中Object对象不仅仅包含,Object,还包括function(函数),Array(数组)
其中关于数据类型的转换对对象来说就没有这个说法,此时你可能会问:为什么呢?
因为对象称之为:复杂类型或者是合成类型,对于我们常常来说的对象就是封装了别的类型,就是常常说到的number类型,String类型或者是Boolean类型,还包括function,和Array也是对象!
02|类型和对象的区别
其中类型我们刚刚在上面介绍的时候讲到了,包括了原始类型或者说是普通类型和合成类型或者说是复杂类型!
但是可以明白的是,对象是一种特殊的类型,区别于普通类型之外的但是又包含普通类型的类型!(包含了number,String,Boolean)
如果说要介绍它们的区别,可能要通过内存才能够很清楚很直观的体现出来!
- 数据区分为 Stack（栈内存） 和 Heap（堆内存）
- 简单类型(类型)的数据直接存在 Stack 里
- 复杂类型(对象)的数据是把 Heap 地址存在 Stack 里
这里我通过画图简单介绍一下类型和对象:
stack and heap_02.jpg
stack and heap_03.jpg
stack and heap_01.jpg
说在最后:
可能关于类型和对象的解释总结的不够到位,但是我会慢慢学习相关的一些知识,对原有的Blog进行补充说明,如有疑问还请联系我的Github:ProbeDream !
在javaScript中有关对象的概念还不清楚的朋友可以参考阮一峰老师的javaScript教程:对象
网友评论