JS中的数据类型的转换和普通类型和对象的区别

这段时间在学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:

1. 先通过String()方法,对需要进行转换的值进行转换!
2. 因为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教程:对象