JavaScript的数据类型

骑猪看日落 2022-03-28 09:16 163阅读 0赞

一、JavaScript有几种类型的值，它们之间的差别是什么

1.JavaScript主要有两大类型的值：基本类型，引用类型。

其中，

1）基本类型包括undefined、null、boolean、number、string、symbol

2）引用类型包括对象、数组和函数

2、基本数据类型的特点是

1）值是不可改变的，也就是当你定义了这个数据的值之后，除非重新赋值，否则调用这个数据不会使这个值改变

2）存放在栈区：原始数据类型直接存储在栈的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放在栈中存储。

3）值的比较：“==”只进行值的比较，虽然会进行数据类型的转换，但是不会对数据类型进行比较

“===”不仅对值进行比较，也会在对数据类型进行转换之后进行比较。

3、引用数据类型的特点是

1）值是可变的：引用类型的值是可变的意思是，引用类型的属性和方法是可以重新定义并且可以添加或删除的，所以这个对象的值是可变的。

2）同时保存在栈内存以及堆内存：因为引用类型的拥有多个属性和方法，所以它所占用的空间比较大，所以如果将引用类型存放在栈区，将会影响到程序运行的性能。所以在战区存放了引用类型的指针，这个指针指向堆区的地址。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

3）比较是引用的比较。

当从一个变量向另一个变量赋的值是引用类型的时候，会将这个变量的对象（栈区的指针）复制一份放到新变量分配的空间。如下

var a={age:20};
    
    var b=a;
    
    b.age=21;
    
    console.log(a.age==b.age)//true

引用类型存储在堆中的对象，与此同时，在栈中存储了指针，而这个指针指向正是堆中实体的起始位置。变量 a 初始化时，a 指针指向对象\{age:20\}的地址，a 赋值给 b 后,b 又指向该对象\{age:20\}的地址，这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

此时，如果取消某一个变量对于原对象的引用，不会影响到另一个变量。

var a={age:20};
    
    var b=a;
    
    a = 1;
    
    b // {age:20}

上面代码中，a 和 b 指向同一个对象，然后 a 的值变为 1，这时不会对 b 产生影响，b 还是指向原来的那个对象。

二、数据类型如何检测

1、typeof

typeof 返回一个表示数据类型的字符串。但不能判断null，array等

数组和对象返回的都是 object，这时就需要使用 instanceof 来判断

typeof Symbol(); // symbol 有效
    
    typeof ''; // string 有效
    
    typeof 1; // number 有效
    
    typeof true; //boolean 有效
    
    typeof undefined; //undefined 有效
    
    typeof new Function(); // function 有效
    
    typeof null; //object 无效
    
    typeof [] ; //object 无效
    
    typeof new Date(); //object 无效
    
    typeof new RegExp(); //object 无效

2.instanceof

instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。i**nstanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性**。

[] instanceof Array; //true
    
    {} instanceof Object;//true
    
    new Date() instanceof Date;//true
    
    new RegExp() instanceof RegExp//true

关于数组的类型判断，还可以用 ES6 新增Array.isArray()

Array.isArray([]);   // true

instanceof 三大弊端：

\* 对于基本数据类型来说，字面量方式创建出来的结果和实例方式创建的是有一定的区别的

console.log(1 instanceof Number)//false
    
    console.log(new Number(1) instanceof Number)//true

从严格意义上来讲，**只有实例创建出来的结果才是标准的对象数据类型值**，也是标准的 Number 这个类的一个实例；对于字面量方式创建出来的结果是基本的数据类型值，不是严谨的实例，但是由于 JS 的松散特点，导致了可以使用 Number.prototype 上提供的方法。

\* 只要在当前实例的原型链上，我们用其检测出来的结果都是 true。在类的原型继承中，我们最后检测出来的结果未必准确。

\* 不能检测 null 和 undefined

对于特殊的数据类型 null 和 undefined，他们的所属类是 Null 和 Undefined，但是浏览器把这两个类保护起来了，不允许我们在外面访问使用。

var arr = [1, 2, 3];
    
    console.log(arr instanceof Array) // true
    
    console.log(arr instanceof Object);  // true
    
    function fn(){}
    
    console.log(fn instanceof Function)// true
    
    console.log(fn instanceof Object)// true

3.严格运算符===

只能用于判断 null 和 undefined，因为这两种类型的值都是唯一的。

var a = null
    
    typeof a // "object"
    
    a === null // true

undefined 还可以用 typeof 来判断

var b = undefined;
    
    typeof b === "undefined" // true
    
    b === undefined // true

4.constructor

constructor 作用和 instanceof 非常相似。但 constructor 检测 Object 与 instanceof 不一样，还可以处理基本数据类型的检测。

var aa=[1,2];
    
    console.log(aa.constructor===Array);//true
    
    console.log(aa.constructor===RegExp);//false
    
    console.log((1).constructor===Number);//true
    
    var reg=/^$/;
    
    console.log(reg.constructor===RegExp);//true
    
    console.log(reg.constructor===Object);//false

constructor 两大弊端：

\* **null 和 undefined 是无效的对象，**因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。

\* 函数的 constructor 是不稳定的，这个主要体现在把类的原型进行重写，在重写的过程中很有可能出现把之前的 constructor 给覆盖了，这样检测出来的结果就是不准确的

function Fn(){}
    
    Fn.prototype = new Array()
    
    var f = new Fn
    
    console.log(f.constructor)//Array

5.Object.prototype.toString.call()

Object.prototype.toString.call() 最准确最常用的方式。首先获取 Object 原型上的 toString 方法，让方法执行，让 toString 方法中的 this 指向第一个参数的值。

关于 toString 重要补充说明：

\* 本意是转换为字符串，但是某些 toString 方法不仅仅是转换为字符串

\* 对于 Number、String，Boolean，Array，RegExp、Date、Function 原型上的 toString 方法都是把当前的数据类型转换为字符串的类型（它们的作用仅仅是用来转换为字符串的）

\* Object 上的 toString 并不是用来转换为字符串的。

Object 上的 toString 它的作用是返回当前方法执行的主体（方法中的 this）所属类的详细信息即"\[object Object\]",其中第一个 object 代表当前实例是对象数据类型的(这个是固定死的)，第二个 Object 代表的是 this 所属的类是 Object。

Object.prototype.toString.call('') ;   // [object String]
    
    Object.prototype.toString.call(1) ;    // [object Number]
    
    Object.prototype.toString.call(true) ; // [object Boolean]
    
    Object.prototype.toString.call(undefined) ; // [object Undefined]
    
    Object.prototype.toString.call(null) ; // [object Null]
    
    Object.prototype.toString.call(new Function()) ; // [object Function]
    
    Object.prototype.toString.call(new Date()) ; // [object Date]
    
    Object.prototype.toString.call([]) ; // [object Array]
    
    Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
    
    Object.prototype.toString.call(new Error()) ; // [object Error]
    
    Object.prototype.toString.call(document) ; // [object HTMLDocument]
    
    Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220328/ec9e9da918e34f74bbbddf01b6270bbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220328/1c7a36f2dc8a45ba9f83543cc1677e4d.png