JavaScript的数据类型检测

文章类型:Vue

发布者:hp

发布时间:2023-02-20

检测类型主要包含typeof、instanceof、constructor、hasOwnporperty 、is Array、valueOf、Object.prototype.toString.call这些方法来进行判断

第一种方式typeof 能正确检测出字符串、数字、布尔值、函数、undefined、Symbol,object类型不准确,会把数组,正则,null都会输出为object

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 无效

第二种方式 instanceof, 检测当前实例是不是属于某个类,instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性返回为布尔值,

能正常检测出函数、数组、正则,时间

弊端:

1:对于基本类型采取字面量方式创建和实例创建结果检测结果不同

主要原因是每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据,进行创建实例->指定办法->销毁实例

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

2:只有在实例原型上,检测结果才准确,在类原型链基础中,结果未必准确

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

3:不能检测null和undefined

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

第三种方式 constructor ,constructor检测 Object与instanceof不一样,可以处理基本数据类型的检测

var aa=[1,2];
console.log(aa.constructor===Array);//true

console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true

弊端:

1:null 和 undefined 是无效的对象

2:函数的 constructor 是不稳定的,主要体现在类的原型重新,如果覆盖了constructor,检测结果不准确

        function a(){

}
function b(){

}
b.prototype=new Array()
var f = new b
console.log(a.constructor===Function ) //true
console.log(b.constructor===Function ) //true
console.log(f.constructor===Function ) //false
console.log(f.constructor===Array ) //true

第四种hasOwnporperty 检测当前属性是否为对象的私有属性

let obj = {
name:"lxw"
};
console.log(obj.hasOwnProperty('name'));//true
console.log(obj.hasOwnProperty('lxw'));//false

第五种is Array ,判断是否为数组

        console.log(Array.isArray([]));//true
console.log(Array.isArray(new Array()));//true

第六种valueOf,可以看到数据最本质内容(原始值)

          let b= new String('123456');
console.log(b.valueOf());//12345
console.log(typeof b.valueOf())//string

第七种Object.prototype.toString.call最准确的方式 获取Object.portotype上的toString方法,让方法的this变为需要检测的数据类型值,

并且让这个方法执行返回当前方法中的this的所属类信息,也就是所属类信息

1:对于Number、String,Boolean,Array,RegExp、Date、Function原型上的toString方法都是把当前的数据类型转换为字符串的类型(它们的作用仅仅是用来转换为字符串的)

2:Object上的toString并不是用来转换为字符串的,回当前值得所属类详细信息,固定结构:’[object 所属的类]'

3:其中第一个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的引用