超全Javascript数据类型检测方式超全Javascript数据类型检测 JavaScript中为了准确判断一个变量

超全Javascript数据类型检测

JavaScript中为了准确判断一个变量的类型，可以有多种方法。下面是一些JavaScript数据类型检测方法：

一、 typeof

1. 检测基本数据类型： 除了null以外都能返回正常的值

2. 检测引用类型： 除function外都返回'object'

    // 基本类型除了null
    typeof 123 // 'number'
    typeof 'abc' // 'string'
    typeof true // 'boolean'
    typeof undefined // 'undefined'
    typeof NaN // 'number' 注意！
    typeof null // 'object' 注意！！！
   

    // 引用类型
    typeof {} // 'object'
    typeof [] // 'object'
    typeof function(){} // 'function'
    typeof RegExp // 'function' 注意正则返回function
   

   注意：一般用于基本类型检测（除null）

---

二、 instanceof： 是用来判断 A 是否为 B 的实例(检测引用类型)

instanceof 是基于原型链来工作的，它不仅仅检查对象是否直接由某个构造函数创建，还会检查对象是否继承自该构造函数的原型。

[] instanceof Array;  //true
[] instanceof Object; //true 注意注意
{} instanceof Object; //true
new Date() instanceof Date;  //true
"123" instanceof String;  //false
new String('123') instanceof String; // true

1. null 和 undefined：null 和 undefined 是原始数据类型，它们没有原型链，因此 null instanceof Anything 和 undefined instanceof Anything 都会返回 false。
2. 基本数据类型：对于字符串、数字、布尔值等基本数据类型，它们不是对象，因此没有原型链，所以 instanceof 对这些类型无效，总是返回 false。
3. 修改 prototype 和 constructor：由于 instanceof 依赖于 prototype 和 constructor 属性，因此如果这些属性被修改/重写，可能会影响 instanceof 的结果。

---

三、 constructor： 本意是获取构造函数/获取实例所属的类

每个对象都有一个constructor属性，该属性指向创建该对象的构造函数的引用。所以我们可以使用constructor来间接判断当前对象的类型。

[].constructor === Array;  //true
[].constructor === Object; // false
{}.constructor === Object; //true
RegExp.constructor === Function; // true
"123".constructor === String;  //true  注意！！不推荐
true.constructor === Boolean;  //true 注意！！ 不推荐

1.constructor === Number // 报错  注意！！ 不推荐
(1).constructor === Number // true 不推荐

注意：

1. null和undefined 没有constructor，不能用其判断；
2. constructor不稳定，，因为开发者开可能会把类的原型进行重写, 这样检测出来的结果就是不准确的。
3. 基本数据类型一般不使用constructor进行检测，而是使用typeof。

"123".constructor === String; // true 虽然浏览器控制台会返回true, 但不代表所有js环境下运行会正常，其他环境可能抛出错误。浏览器的控制台中没有报错，可能是因为该环境在后台对原始值进行了自动包装的结果。

---

四、Object.prototype.toString.call(value)

用来检测数据类型比较准确。

Object.prototype.toString() 方法返回的是一个表示该对象的内部 [[Class]] 属性的字符串，这个字符串对于不同的数据类型是唯一的，即使对象的自定义 toString() 方法被重写，也不会影响到 Object.prototype.toString 的行为。

Object.prototype.toString.call('12');   // [object String]
Object.prototype.toString.call(112) ;   // [object Number]
Object.prototype.toString.call(false);   // [object Boolean]
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(document));  // [object HTMLDocument]
Object.prototype.toString.call(window);  //[object global] window 是全局对象 global 的引用

Object.prototype.toString.call(undefined);  // [object Undefined] 注意！！
Object.prototype.toString.call(null);  // [object Null] 注意！！

---

五、其他-实用场景

1. 数组检测： 

• [] instanceof Array; //true (若被改写，可能会不准确)
• [].constructor == Array; //true (若被改写，可能会不准确)
• Object.prototype.toString.call([]); // [object Array]
• Array.isArray([]) // true

2. 空数组检测：

• Array.isArray(arr) && arr.length === 0
• JOSN.stingify(arr) === '[]'

3. 对象检测：

• {}.constructor == Object; //true (若被改写，可能会不准确)
• Object.prototype.toString.call({}); // [object Object]

4. 空对象检测：

• Object.prototype.toString.call(obj) === " [object Object ]" && Object.keys(obj).length === 0

• JOSN.stingify(obj) === '{}'

  注意，JOSN.stingify(arr) === '[]'、JOSN.stingify(obj) === '{}' 适合体量小，数组或对象中不存在循环引用的情况。

5. NaN检测

1. isNaN() 方法：

• ES5方法，用于检查给定的值是否为NaN。
• 会尝试将参数转换为数字。如果参数不能被转换为数字，或者转换后的结果为NaN，则isNaN()会返回true。

1. Number.isNaN() 方法：

• ES6引入的方法，用于判断一个值是否严格等于NaN。
• 不会尝试将传入的参数转换为数字。如果参数的值和类型都是NaN，则返回true；否则返回false。

1. 例子：

    console.log(isNaN(NaN)); // true 
    console.log(isNaN(0 / 0)); // true 
    console.log(isNaN("NaN")); // true，注意这里！字符串"NaN"被转换成了数字NaN
    console.log(isNaN("123")); // false，因为"123"被转换成了数字123 
    console.log(isNaN("Hello")); // true，因为"Hello"不能被转换为有效的数字
    console.log(isNaN(true)); // false，因为true被转换成了数字1 
    console.log(isNaN(undefined)); // true，因为undefined被转换成了NaN 
    console.log(isNaN({})); // true，因为对象被转换成了NaN（实际上是先调用对象的valueOf()或toString()，如果返回的是非原始值则继续尝试，直到得到原始值为止，但对象的情况比较复杂，通常会导致转换为NaN）
   
    console.log(Number.isNaN(NaN)); // true 
    console.log(Number.isNaN(0 / 0)); // true 
    console.log(Number.isNaN("NaN")); // false  不进行类型转换
    console.log(Number.isNaN("123")); // false 不进行类型转换
    console.log(Number.isNaN("Hello")); // false 不进行类型转换
    console.log(Number.isNaN(true)); // false 不进行类型转换
    console.log(Number.isNaN(undefined)); // false 不进行类型转换
    console.log(Number.isNaN({})); // false 不进行类型转换