如何对JS 中的数据类型进行检测

方法一:typeof

typeof操作符可以用来检测一个值的数据类型,返回一个表示数据类型的字符串。

console.log(typeof 1); // number
console.log(typeof true); // boolean
console.log(typeof "mc"); // string
console.log(typeof Symbol); // function
console.log(typeof function () {}); // function
console.log(typeof console.log()); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object(注意这是一个历史遗留问题,null被错误地判断为"object")
console.log(typeof undefined); // undefined

console.log(typeof null); // object(注意这是一个历史遗留问题,null被错误地判断为"object")

原因

当JavaScript在内部判断一个值的类型时,会使用一个表示类型的标记位。在表示对象的标记位中,null的值为全零,而表示对象的标记位必须至少有一个位为1。由于null的标记位全零,JavaScript将其错误地判断为"object"类型。

优点:能够快速区分基本数据类型

缺点:不能将 Object、Array 和 Null 区分,都返回 object

方法二: 2.instanceof

instanceof操作符可以检测一个对象或者引用类型是否属于某个类或构造函数。
还可以在继承关系中用来判断一个实例是否属于它的父类型。

console.log(1 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log("str" instanceof String); // false
console.log([] instanceof Array); // true
console.log(function () {} instanceof Function); // true
console.log({} instanceof Object); // true

优点:能够区分 Array、Object 和 Function,适合用于判断自定义的类实例对象

缺点:Number,Boolean,String 基本数据类型不能判断

instanceof 和 typeof 的区别

typeof 在对值类型 number、string、boolean 、null 、 undefined、 以及引用类型的 function 的反应是精准的;但是,对于对象{ } 、数组[ ]null 都会返回 object

为了弥补这一点,instanceof 从原型的角度,来判断某引用属于哪个构造函数,从而判定它的数据类型。

方法三:.Object.prototype.toString.call() (最优方案)

这种方法可以准确地返回一个表示值类型的字符串。它适用于所有数据类型,并且可以区分出数组、对象、函数等复杂类型。

var toString = Object.prototype.toString;
console.log(toString.call(1)); //[object Number]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call("mc")); //[object String]
console.log(toString.call([])); //[object Array]
console.log(toString.call({})); //[object Object]
console.log(toString.call(function () {})); //[object Function]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(null)); //[object Null]

优点:精准判断数据类型

缺点:写法繁琐不容易记,推荐进行封装后使用

原理:toString()方法会返回一个表示该对象的字符串Object.prototype获取我们对象的原型。.call是为了改变toString函数内部的this指向并,将要检测的值作为方法的上下文(即this),我们可以确保返回的字符串是准确的对象类型,同时也防止toString()方法被重写

你可能感兴趣的:(前端,html,JavaScript,javascript,前端)