js检测数据类型的几种方法总结
文章目录
一、typeof
typeof
在对值类型number
、string
、boolean
、symbol
、undefined
、function
的反应是精准的;- 但对于
对象{ }
、数组[ ]
、null
都会返回object
console.log(typeof ""); // string
console.log(typeof 1); // number
console.log(typeof NaN); // number
console.log(typeof true); // boolean
console.log(typeof Symbol(1)) // "symbol"
console.log(typeof undefined); // undefined
console.log(typeof function(){}); // function
console.log(typeof null); // object (巨坑...)
console.log(typeof []); // object
console.log(typeof {}); //object
二、instanceof
typeof
运算符把对象
、数组
、null
都返回object
,为了弥补这一点,instanceof
从原型的角度,来判断该对象是谁的实例。
- 用
instanceof
判断一个实例是否属于某种类型 -
instanceof
运算符只能用于对象,不能用于原始类型的值
// 检测构造函数B的原型是否有出现在对象A的原型链上。
A instanceof B
[] instanceof Array // true
[].__proto__ == Array.prototype // true
1. 基础类型
console.log("1" instanceof String); // false
console.log(1 instanceof Number); // false
console.log(NaN instanceof Number); // false
console.log(true instanceof Boolean); // false
上面之所以都返回false
是因为不是对象,而是基本类型。
封装成对象后才返回true
,如下:
console.log(new String("1") instanceof String); // true
console.log(new Number(1) instanceof Number); // true
console.log(new Number(NaN) instanceof Number); // true
console.log(new Boolean(true) instanceof Boolean); // true
new是封装成对象,而没有new的只是基础类型转换,还是基础类型
一个是引用类型,一个是基本类型
console.log(new String("1"), "1");
console.log(new Number(1), 1);
console.log(new Number(NaN), NaN);
console.log(new Boolean(true), true);
2. 复杂类型(万物皆对象)
console.log([] instanceof Array); // true
console.log([] instanceof Object); // true
console.log({} instanceof Object); //true
console.log(function(){} instanceof Function); // true
console.log(function(){} instanceof Object); // true
console.log((new Number(1)) instanceof Number); // true
console.log((new Number(1)) instanceof Object); // true
小坑
console.log(undefined instanceof undefined); // 报错
console.log(null instanceof null); // 报错
巨坑
console.log(null instanceof Object); // false
console.log(typeof null); // object
三、constructor
constructor 是每个实例对象都拥有的属性
function Hello() {}; // 构造函数
var h = new Hello(); // 实例化对象
console.log(Hello.prototype.constructor == Hello); // true
console.log(h.constructor == Hello); // true ()
console.log(("1").constructor === String); // true
console.log((1).constructor === Number); // true
console.log((NaN).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(([]).constructor === Array); // true
console.log((function () {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
console.log((Symbol(1)).constructor === Symbol); // true
console.log((null).constructor === Null); // 报错
console.log((undefined).constructor === Undefined); // 报错
用costructor来判断类型看起来是完美的,然而,如果我创建一个对象,更改它的原型,这种方式也变得不可靠了。
function Fn(){};
Fn.prototype=new Array(); // 改变原型
var f=new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true
这里声明了一个Fn的构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。
四、Object.prototype.toString.call()
完美精准
的返回各种数据类型
const a = Object.prototype.toString;
console.log(a.call(1)); // [object Number]
console.log(a.call("1")); // [object String]
console.log(a.call(NaN)); // [object Number]
console.log(a.call(true)); // [object Boolean]
console.log(a.call(Symbol(1))); // [object Symbol]
console.log(a.call(null)); // [object Null]
console.log(a.call(undefined)); // [object Undefined]
console.log(a.call([])); // [object Array]
console.log(a.call({})); // [object Object]
console.log(a.call(function () {})); // [object Function]
function Fn(){};
Fn.prototype=new Array(); // 改变原型
var f=new Fn();
console.log(a.call(Fn)); // [object Function]
稍微简单封装下:
// 定义检测数据类型的功能函数
function checkedType(target) {
return Object.prototype.toString.call(target).slice(8, -1);
}
console.log(checkedType(1)); // Number
console.log(checkedType("1")); // String
console.log(checkedType(NaN)); // Number
console.log(checkedType(true)); // Boolean
console.log(checkedType(Symbol(1))); // Symbol
console.log(checkedType(null)); // Null
console.log(checkedType(undefined)); // Undefined
console.log(checkedType([])); // Array
console.log(checkedType({})); // Object
console.log(checkedType(function () {})); // Function
Object.prototype.toString.call(obj)类型检测原理
首先,这句话的意思是让我们用Object
原型上的toString
方法作用在传入的obj
的上下文中(通过call
将this
指向obj
),那么我们知道数组本身也有toString()
方法,那我们为什么非要用Object
上的呢?
Object.toString() // "function Object() { [native code] }"
Object.prototype.toString() // "[object Object]"
Object
输出的是其函数体function Object() { [native code] }
,而Object
上输出的是其类型。
我们可以看出Object
对象和它的原型链上各自有一个toString()
方法,第一个返回的是一个函数,第二个返回的是值类型。
toString
为Object
的原型方法,而Array 、Function
等类型作为Object的实例,都重写了toString
方法。不同的对象类型调用toString
方法时,根据原型链的知识,调用的是对应的重写之后的toString
方法(Function
类型返回内容为函数体的字符串,Array
类型返回元素组成的字符串…),而不会去调用Object
上原型toString
方法(返回对象的具体类型),所以采用obj.toString()
不能得到其对象类型,只能将obj
转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object
上原型toString
方法。
我们可以验证一下,将数组的toString
方法删除,看看会是什么结果:
var arr=[1,2,3];
console.log(Array.prototype.hasOwnProperty("toString"));//true
console.log(arr.toString());//1,2,3
delete Array.prototype.toString;//delete操作符可以删除实例属性
console.log(Array.prototype.hasOwnProperty("toString"));//false
// 删除后的数组再次使用 toString() 时,会向上层访问这个方法,即 Object 的 toString()
console.log(arr.toString());//"[object Array]"
当我们把Array自身的toString()方法删除之后,再次使用它时,由原型链它会向上查找这个方法,即Object的toString(),也便将Object上的toString()方法作用在数组上,得出其数据类型[object Array]
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499177.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步