JS中的类型判断,你真的完全理解吗

前言

在刚开始学JS的时候,经常自己做点小demo玩玩,然后自己去不断完善一些功能,有次在做一个界面的时候用到了类型判断,正当我觉得一切正常的时候,突然发现我们常用的typeof方法会将空值识别为object?!于是赶紧深入了解,才发现简简单单的类型判断居然有这么多门道。

正文

  1. typeof 操作符

Typeof这个方法可谓是我心中的白月光,在JavaScript判断类型的时候最先想到的通常都是这个玩意,我们可以使用typeof操作符来判断一个值的数据类型。typeof操作符返回一个表示操作数类型的字符串。它对于大多数基本数据类型都能够准确判断,但对于对象和null的判断则有一些特殊之处。

js 复制代码
    console.log(typeof null);
    console.log(typeof []);
    console.log(typeof function fn() {});

很显然,这种方法并不能很好地解决数组和null这两种类型的值的类型判断。但是为什么null偏偏会被判断成为对象呢?其实这就是JavaScript这门语言设计之初的一个bug。Typeof方法本质上就是将数据转变为二进制的值,然后根据前三位去判断类型。对象的前三位全都是0,但好巧不巧的是,null的二进制被设计成了全都是0,这也就是为什么null会被typeof识别成object,属于是瞒天过海了。所以,我们需要一些更高级的玩意

  1. instanceof 操作符

相对于typeof直接搜人家身份,instanceof操作符可要高级多了,instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。它通常用于判断一个对象是否是某个特定类的实例。就好比不再是简简单单查你身份,而是连你的家属都查了。这里举个简单的例子

js 复制代码
function Person() {} 
const person = new Person();
console.log(person instanceof Person); // true

相比于typeof,instanceof显然要可靠得多,判断的类型也不再是JavaScript中自带的值,不过美中不足的是,他依然会将数组判断为object,并且返回值为布尔值,也就意味着它不能直接告诉你这个值是什么类型,只能告诉你是或者不是

  1. Object.prototype.toString.call()

说到这里不免会有些生气:难道我堂堂JavaScript就没有点能精确判断类型的方法了吗?当然不会, Object.prototype.toString.call()就可以完美判断出类型。在 JavaScript 中,每个对象都有一个内部属性 Class,它用于标识对象的类别。这个属性的值是一个字符串,表示对象的具体类型。

Object.prototype.toString 方法被重写,使得当调用它时,会返回包含 Class 值的字符串。这样就可以通过判断返回的字符串来确定对象的类型。例如,对于数字类型的值 42,其 Class 值为 Number,所以 Object.prototype.toString.call(42) 返回的字符串就是 [object Number]

同样地,对于字符串、布尔值、undefined、null 等类型,它们的 Class 值分别为 "String"、"Boolean"、"Undefined" 和 "Null"。

而对于对象和数组类型,它们的 \[Class] 值分别为 ObjectArray。因此,通过 Object.prototype.toString.call() 方法可以准确地判断出对象和数组的类型

总结

希望各位通过以上的介绍能够更加深入地了解了JavaScript中类型判断的几种常见方法,能够帮助到大家。在实际开发中,根据不同的需求选择合适的类型判断方式是非常重要的。最后祝各位0 waring(s) 0 error(s)

相关推荐
尾善爱看海1 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
驳是2 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea2 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持2 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者2 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn3 小时前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
计算机魔术师5 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师5 小时前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯5 小时前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒5 小时前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端