js判断类型:typeof Object.prototype.toString instanceof constructor有什么区别?一文讲清楚

相信很多小伙伴在使用js的过程中,经常会需要对js的数据类型进行判断,而js中可以对数据类型进行判断的方法有很多种,最常见的有typeof、Object.prototype.toString、instanceof、constructor这四种,那么他们有什么区别呢?

目录

js数据类型

typeof

为啥typeof会将null判断为object

Object.prototype.toString

instanceof

constructor


js数据类型

先回顾下js的数据类型,js数据类型可分为两大类:

1.基本数据类型:又可以细分为七种:number string boolean undefined null bigint symbol

2.引用数据类型

typeof

基本数据类型均可判断(null除外,typeof会将null判断为object)

引用数据类型只可判断function,其他类型的引用数据均判断为object

javascript 复制代码
//基本数据类型
et str='string'
console.log(typeof str) //string

let num=1
console.log(typeof num) //number

let ifRight=true
console.log(typeof ifRight) // boolean

let var1
console.log(typeof var1)  //undefined

let var2=null
console.log(typeof var2)   //注意这里打印的是object

let sym=Symbol('sym')
console.log(typeof sym) //symbol

let bInt=BigInt('1234567890')
console.log(typeof bInt) //bigint

//引用数据类型
function func(){return '3'}
console.log(typeof func) //function

let arr=new Array()
console.log(typeof arr)    //object

为啥typeof会将null判断为object

之前有次面试,面试官提了一嘴,当时没答上来,后来查了查感觉还挺有意思,贴个当时找的图

Object.prototype.toString

toString()是object的原型方法, 会返回一个格式为[object xxx]的内部属性,xxx就是对象的数据类型。

Object.prototype.toString可以判断所有的数据类型。

缺点:无法区分string(基本数据类型)和String(对象),number和Numbe等也同理

javascript 复制代码
let str='string'
let str2=new String() //使用String构造函数创建

let num=1
let ifRight=true
let var1
let var2=null
let sym=Symbol('sym')
let bInt=BigInt('1234567890')
function func(){return '3'}
let arr=new Array()

console.log(Object.prototype.toString.call(str)) // [object String]
console.log(Object.prototype.toString.call(str2)) // [object String],和str的一样

console.log(Object.prototype.toString.call(num)) // [object Number]
console.log(Object.prototype.toString.call(ifRight))  // [object Boolean]
console.log(Object.prototype.toString.call(var1))  // [object Undefined]
console.log(Object.prototype.toString.call(var2))  // [object Null]
console.log(Object.prototype.toString.call(sym))  // [object Symbol]
console.log(Object.prototype.toString.call(bInt))  // [object BigInt]
console.log(Object.prototype.toString.call(func))  // [object Function]
console.log(Object.prototype.toString.call(arr))  // [object Array]

instanceof

instanceof运算符用来检测构造函数的ptototype属性是否出现在某个实例对象的原型链上,

所以只能用来判断引用数据类型,不能对基本数据类型进行判断。

javascript 复制代码
let str1=new String()
let str='string' //基本数据类型string
let map =new Map()
let arr1=new Array()
function func(){return '3'}




console.log(str1 instanceof String)  //true
console.log(str1 instanceof Object)  //true

console.log(str instanceof String)  //false 基本数据类型不可检测
console.log(str instanceof Object)  //false 基本数据类型不可检测

console.log(map instanceof Map)      //true
console.log(arr1 instanceof Array)   //true
console.log(func instanceof Function) //true

缺点:当一个页面存在多个ifream(也就是存在多个全局变量window),此时instanceof的判断会被来自不同ifream的数据所干扰,导致数据不可信。

constructor

利用原型上的prototype.constructor指向 实例的构造函数来进行判断。

基本数据类型/引用数据类型均可判断。

缺点:和Object.prototype.toString一样,无法区分string(基本数据类型)和String(对象),number和Numbe等也同理

javascript 复制代码
let str1=new String()
let str='string'
let ifRight=true
let map =new Map()
let arr1=new Array()
function func(){return '3'}

console.log(str1.constructor===String)  //true
console.log(str.constructor===String)  //true 基本数据也可判断,但是无法和String区分
console.log(str.constructor===Object)  //false
console.log(ifRight.constructor===Boolean)  //true 基本数据类型

console.log(map.constructor===Map)     //true
console.log(arr1.constructor===Array)   //true
console.log(func.constructor===Function)  //true
相关推荐
时光の尘1 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭15 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师16 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者20 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟21 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448038 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟39 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光43 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用44 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网