前言

在任何编程语言中，对数据的操作都是一个很重要的知识点，因为数据是支持任何项目能够运转的根基可以说没有数据，就没有程序程序就好比一个舞台，而数据就是台上的演员、歌手..等等不同的角色，它们在程序中扮演着不可替代的作用。

今天我们要聊聊在js中的各个数据类型的区别，各自的功能，以及如何精确地判断数据类型，还有怎样将数据类型转换为另一种数据类型。

数据类型

js中的数据类型包括两大类

一、基本数据类型

①Number:表示整数和浮点数

②String:用于表示文本，字符串

③Boolean:表示逻辑，共有两个值true或者false

④Null:表示为一个刻意设置为空的对象，表示没有任何值

⑤Undefined:表示变量已经被声明，但未被初始化

⑥BigInt(es10新增):用来存储大于 2^53 - 1（即 Number.MAX_SAFE_INTEGER）的整数，用于表示任意大小的安全整数。

⑦Symbol(es6新增):一种唯一且不可变的数据类型，常用于对象的键名以避免属性名的冲突。

这时候肯定有小伙伴会说：“不是还有NAN这种类型吗”，但实际上NAN(Not a Number)也属于Number,尽管它代表非数字。

原始数据类型的特点是：基本数据类型一旦被创建，其值就不能被修改，对他们进行操作时修改值其实并不是修改它的值，底层而是创建一个新的数据进行操作后再返回

注意：Undefined和Null的区别，这个小白们甚至有基础的同学们也很容易搞混的两个数据类型。null这种类型在js语言诞生之时就设计出来了，被作为表示'无'或者空值的手段，null最初是被设计为对象类型的特殊值，用于表示一个空对象的引用。但是后来随着js的发展，设计者们意识到需要有一个单独的值来表示一个变量被声明但是没有被赋值，或者访问一个不存在的变量或对象属性时的默认返回值。因此，undefined作为一个新的类型被引入。在现在的js编程实践中，undefined和null建议明确区分使用，undefined更多地反映了变量未被赋值地初始状态或未定义的属性时的自然结果。而null更多地被用作一个显示的空值，表示一个变量预期会有值，但现在是空的。

二、引用数据类型

①对象(Object):最通用的引用类型，可以用来存储键值对的一个集合，可以包含值或者函数。

②数组(Array):特殊类型的对象，用于存储有序的数据集合，数组的元素可以是任意类型的数据。

③函数(Function):也属于对象，可以被赋值给变量，或者作为其他对象的属性，也可以被被调用来执行特定任务。

除了以上三种还有一些特殊或派生的引用类型如日期(Date)、正则(RegExp)等...

数据类型判断

在了解完了js中所有的数据类型之后,我们在对数据进行操作时，难免会遇到一些需要对数据进行判断的操作，在判断数据的类型满足条件之后，再执行其他的流程，所以数据类型判断也是很重要的知识点，接下来我们来了解了解它该进行什么操作才能够判断数据的类型。

1.对于基本数据类型 -->typeof xxx

在js中有一个方法叫做typeof，不需要用对象为前缀进行调用，直接将变量的值放在typeof 之后或者加上一个括号就能够返回一个布尔值。使用如下：

typeof arr | or | typeof(arr)

2.对于引用数据类型 -->instanceof

instanceof的使用方法：要判断的数据 instanceof 原型 例如：arr instanceof Array

该方法的原理主要是通过测试该对象是否出现在某个构造函数或者其原型链上任意构造函数的实例。使用如下：

但是大家心中肯定会想：“有没有一个方法，无论什么类型，都能够正确的判断它的类型呢？” 还真有这个方法--->Object.prototype.toString()

3.对于任何类型 --->Object.prototype.toString(obj)

只不过在这个方法上，需要加上call()方法，就可以拿到obj的数据类型，只不过返回值是一个由"[object"和”class“和"]"拼接得到的字符串。

要想只拿到obj具体的类型，在返回结果之后加上slice(8,-1)切割一下就可以了。

这里我们把它包装成了一个type()方法,结果也如预期所示，能够完成获取类型的功能。

数据类型转换

数据类型转换主要分为三类：

①基本数据类型转基本数据类型

②引用数据类型转基本数据类型

③基本数据类型转引用数据类型

④一些隐式类型转换..

一、基本数据类型转基本数据类型

可以直接使用显示转换，用原始数据类型的构造方法中传参数，就能将数据类型成功转换。

console.log(Number(undefined))//NaNconsole.log(Number(null))//0console.log(Number(true))//1console.log(Number(false))//0console.log(Number(0))//0console.log(Number('abc'))//NaNconsole.log(Number('123'))//123console.log(Number(''))//0console.log(Number('123abc'))//NaNconsole.log(Number('   '))//0console.log(Number(' 1  2'))//NaN

基本数据类型互转的基本规则如下图，这张图基本上涵盖了所有的特殊情况。

二、引用数据类型转基本数据类型

因为一般不会转向null和undefined，这两种特殊值在转换为其他类型时有特定行为，如在布尔上下文中被视为false，在数值转换中null为0，undefined为NaN。而在js中symbol类型是唯一的，不能进行类型转换。所以主要分为三种情况

①引用类型转布尔

所有引用类型转布尔类型都是true

②引用类型转数字

Number({})---->它的底层逻辑为

//1、ToNumber({}) //先调用ToNumber()

//2、let primValue = ToPrimitive({},Number) //如下为ToPrimitive底层操作逻辑

--判断接收到的值是不是原始值，是则直接返回

--否则，调用valueOf方法，如果得到了原始值，则返回（判断是否为包装类）

--否则，调用toString方法，如果得到了原始值，则返回

--报错

③引用类型转字符串

String({})---->底层逻辑与②相似，只不过第二步和第三步会调换位置(编写者考虑到性能问题，这样的顺序安排能够使大部分的转换操作效率提升。)

//1、ToString({}) //先调用ToString()

//2、let primValue = ToPrimitive({},Number) //如下为ToPrimitive底层操作逻辑

--判断接收到的值是不是原始值，是则直接返回

--否则，调用toString方法，如果得到了原始值，则返回

--否则，调用valueOf方法，如果得到了原始值，则返回（判断是否为包装类）

--报错

如下代码就能很清晰地展示出引用数据类型对象obj转换为Number数据类型的逻辑。

// 自定义对象，包含valueOf和toString方法 let obj = {    valueOf: function() {        console.log("valueOf called");        return "123"; // 返回字符串，之后会被转换为Number },     toString: function() {         console.log("toString called");         return "456"; // 备用转换路径 } }; // 尝试将对象转换为Number let num = Number(obj);console.log(num); // 输出：123

三、基本数据类型转引用数据类型

原始值可以通过构造函数包装成对应的对象类型。

console.log(typeof (new String('abc')));//objectconsole.log(typeof (new Number(123)));//objectconsole.log(typeof (new Boolean(true)));//objectconsole.log(typeof (new Boolean(false)));//object

由于null和undefined没有对应的构造函数，所有没有办法通过该方法转为对象。

转换表如下：

字符串

数值

true

false

boolean

object

new String(字符串)

new Number(数值)

new Boolean(true)

new Boolean(false)

四、隐式类型转换

其实我们在平时编码时，有时并不都是像上面这样人为操作能够展示出来的数据转换，时常会碰到一些隐式类型转换。而这些隐式类型转换通常是通过上面讲到的抽象方法ToPrimitive() 来完成的

①条件判断

比如if([]){}在if中只放了一个空数组对象，此时就会进行隐式类型转换，将[]转换为boolean值，为true。

②一元操作符

例如下代码(会将操作符后的数据隐式转换为Number类型进行运算)

let str = '123' console.log(+str);//123

③二元运算符

会将操作符两边的数据都转换为Number，再进行数值运算。

④==

在平时会经常用到这个运算符，来匹配值是否相同，它的隐式转换逻辑为：

---如果两边类型相同，则直接比较值

---如果两边类型不相同，则通过以下规则操作数据类型

--如果x和y中有对象，则对该对象调用ToPrimitive()转换为原始值进行比较。

--如果x和y中有布尔和字符串都转换为数值进行比较。

--有一种很刁钻的情况null==undefined-->true这个得记住

小结

js中的数据类型，以及对数据的相关操作是学习js中很重要的一环，大家要记住，数据类型的准确处理是编写高质量代码的关键。适时地利用typeof、instanceof、Object.prototype.toString.call()等工具进行类型判断，结合显式与隐式的类型转换技巧，能够确保你的程序既健壮又易于维护。同时，要理解这个很重要的函数："ToPrimitive()",它在我们进行隐式转化的过程中起到了极其核心的作用。最后，实践出真知，希望大家能够将本文介绍的理论知识应用到实际项目中。