1. 数据类型与typeof先从基础聊起1.1 typeof到底能判断什么在日常开发里“数据类型”这几个词估计没人陌生。前端同学每天和字符串、数字、对象打交道后端同学整天讨论字段类型和JSON结构。而在JavaScript里排序类型用得最多的操作符就是typeof。它能返回一个数据在底层类型系统中的大致分类比如字符串、数字、布尔值等等。可也正是这个看起来人畜无害的操作符藏了不少陷阱。这篇文章既适合刚学会JS的初学者也适合写过一两年业务代码但没细究过类型判断的老手。我会把typeof的坑一个个挖出来再给出能直接抄作业的解决方案。1.2 原始类型和对象类型分家不分家要搞懂typeof的陷阱先得知道JavaScript的类型分两大类原始类型primitive和对象类型object。原始类型包括string、number、boolean、undefined、null、symbol、bigint它们都是直接的、不可变的值。对象类型则是引用类型比如普通对象、数组、函数、日期、正则等。typeof在设计时主要想区分“原始值”和“对象”所以它的返回值基本上是沿着这条线走的。问题是这条线画得有点歪null被划到了对象那边函数又被特殊照顾数组和普通对象不加区分于是才有了下面这些经典场面。这里得展开一下typeof的历史。最早的JavaScript实现里值在内存中用一个类型标签来表示对象类型的标签是0而null作为空指针它的类型标签恰好也是0。这就导致typeof null变成了object。这件事后来被ECMAScript官方承认是Bug但为了兼容海量历史代码一直保留到了今天。如果去问一个没踩过坑的萌新null是什么类型他大概率会答错。现在可以在Node或浏览器环境里验证一下typeof null // object typeof undefined // undefined typeof [] // object (数组也是对象) typeof {} // object typeof function(){} // function typeof new String(hello) // object由此可见typeof的返回值其实只有几种模板string、number、boolean、undefined、object、function、symbol、bigint。别小看这八种返回值后面每一个都可能让你摔跟头。1.3 一张表看清typeof返回规则为了方便记忆我整理了一张对照表平时写代码想到就可以查输入值typeof返回值备注hellostring字符串字面量42number数字字面量trueboolean布尔字面量undefinedundefinedundefined 关键字nullobject历史遗留Bug实际是空值Symbol()symbolES6 新增10nbigintES2020 新增{}object普通对象[]object数组也是对象function(){}function可调用对象本质是对象new String(x)object包装对象是对象class Foo {}function类声明本质上也是函数这张表看完你应该已经意识到typeof适合判断原始类型但对于对象类型的具体分类它的能力非常有限。2. typeof的六大经典陷阱我一个个踩过2.1 陷阱一null和数组都被当成“object”这是最出名的一个坑。先说null。如果我们要判断一个变量是不是普通对象很多人会写typeof value object。这看起来没问题但当value是null或数组时判断结果也都是true。想象一个场景后端接口返回的字段在数据为空时给了null前端拿到后做属性访问直接报“Cannot read properties of null”。这类问题我见过不下十次。数组也一样。判断一个值是不是数组typeof完全帮不上忙因为typeof []返回object。有同学会退一步用Array.isArray(value)单独判断这当然可以但如果你要处理更泛化的类型判断比如区分普通Object、Array、Date、RegExp光靠typeof就不够用了。正确做法判断null用value null。判断数组用Array.isArray(value)。判断普通对象可以在排除null和数组之后再用typeof value object。如果还想更精确地区分对象子类型就得上后面会讲到的Object.prototype.toString大杀器。2.2 陷阱二函数成为了“特殊公民”typeof对函数返回function这本是一个很方便的特性。但要注意函数并不是JavaScript中的独立数据类型它本质还是对象只是带有[[Call]]内部方法可以被调用。于是当你想判断一个值是不是可调用的回调函数时typeof function基本够用。但这里还藏着两个额外的小坑class Foo {}这种类声明typeof Foo function。所以你以为在判断“普通函数”其实类也是function。async function、generator function它们的typeof同样返回function。好在业务中一般只是需要判断“能不能调用”所以这个陷阱影响不算大。但如果你希望判断它到底是一个普通函数、构造函数还是异步函数typeof就完全无能为力了。遇到这种需求只能靠Object.prototype.toString、async函数构造器或者更细致的原型链检测来做。2.3 陷阱三包装对象搞乱原始类型的判断JavaScript有个非常反直觉的设计原始类型有对应的包装对象。字符串原始值hello和通过new String(hello)创建的对象虽然行为上可能很像但类型判断完全不同前者typeof返回string后者返回object。我第一次遇到这个坑是在写一个字符串处理函数时。业务代码里传入的参数有时是String对象有时是字面量函数内部用typeof判断结果把String对象当成了对象类型走错了分支。后来发现只要代码里用了new String()、new Boolean()、new Number()这些看起来像原始类型的值其实都是对象。日常开发一般不会主动new这些包装对象但某些第三方库或历史代码会这么干。如果你需要区分它们不要直接用typeof可以考虑用Object.prototype.toString。比如Object.prototype.toString.call(new String(a))返回[object String]原始字符串也返回[object String]。虽然这里两个都是String标签但至少不会和普通对象混淆。要分辨“原始字符串”和“String对象”还得再组合typeofif (typeof value string) { // 原始字符串 } else if (value instanceof String) { // String包装对象 }不过现实中我建议尽量规避包装对象因为它在大多数场景下没有任何性能或语义优势反而制造了一堆判断难题。2.4 陷阱四未声明变量也能被typeof救回来这个陷阱曾经坑过我。刚学JS时我在控制台敲了一个不存在的变量名结果居然没报错打印的是undefinedtypeof undeclaredVar // undefined但如果你直接写undeclaredVar会抛出ReferenceError。这个特性的本意是让你安全地检测某个全局变量是否存在比如在旧环境里判断typeof jQuery ! undefined。然而代价是拼写错误也可能被悄悄掩盖。你原本想访问someObject.prop如果拼错了某个位置就会返回undefined而不是直接报错排查起来很花时间。所以我后来给自己定了一个规矩只有在检测全局变量、或者处理第三方环境挂载对象是否存在的场景才用typeof去“试探”其他情况下访问具体属性前先确认变量本身已经正确初始化。比如项目里需要检测微信JSSDK是否存在可以这么写if (typeof wx ! undefined wx) { // 使用wx }但如果是函数内部想判断一个对象的某个属性是否存在应该用property in obj或者Object.hasOwn而不是靠typeof去猜。2.5 陷阱五NaN和Infinity也都是number类型typeof NaN返回numbertypeof Infinity也返回number。听起来好像没问题但NaN是一个特殊值它表示“不是数字”。比如parseInt(abc)会得到NaN用typeof判断时它确实是number。很多同学因此写if (typeof value number value NaN)然后发现永远不成立因为NaN NaN为false。这件事的关键在于NaN是唯一一个不等于自身的值。正确的做法是使用Number.isNaN()它是ES6专门为NaN设计的判断方法不会像全局isNaN那样先把参数强制转换成数字。举例isNaN(abc) // true因为abc会被转换成数字 isNaN(123) // false因为123能转换成123 Number.isNaN(abc) // false因为参数必须是number类型 Number.isNaN(123) // false Number.isNaN(NaN) // true如果你要判断一个值是不是Infinity可以使用value Infinity或Number.isFinite(value)。这里也提醒一句从接口拿到的数字如果经过字符串序列化可能变成Infinity字符串这时候需要先做类型转换再判断。2.6 陷阱六Symbol、BigInt带来的版本兼容坑ES6之后新增了Symbol类型ES2020又新增了BigInt类型。typeof对这两个类型分别返回symbol和bigint这是很好的支持。问题在于老环境在较老的浏览器或运行时中Symbol()和BigInt可能未定义直接使用会报错。现代环境可以这样安全检测typeof Symbol() // symbol typeof 10n // bigint另外有一点很容易忽略Symbol.toStringTag能改变Object.prototype.toString的结果。比如const fakeArray { [Symbol.toStringTag]: Array }; Object.prototype.toString.call(fakeArray); // [object Array]这个属性本来是给自定义类型提供标签的但如果你不确定对象来源它可能造成“假类型”判断。所以在处理不受信数据时不能只凭Object.prototype.toString的标签就下结论可以再配合Array.isArray、value instanceof Date等原生能力做交叉验证。3. 绕开陷阱一套通用的类型判断方案3.1 Object.prototype.toString.call()一锤定音上一节说了那么多坑现在该给出正解了。JavaScript里最通用、最不容易被误判的类型检查方法是借用Object.prototype.toString来取类型标签。它会返回类似[object Null]、[object Array]的字符串。原理在于所有内置对象都有一个内部标签而Object.prototype.toString恰好能把它暴露出来。一行测试代码就能看到效果Object.prototype.toString.call(undefined) // [object Undefined] Object.prototype.toString.call(null) // [object Null] Object.prototype.toString.call([]) // [object Array] Object.prototype.toString.call({}) // [object Object] Object.prototype.toString.call(new Date()) // [object Date] Object.prototype.toString.call(/a/g) // [object RegExp] Object.prototype.toString.call(new String(hi)) // [object String]有了它前面那些typeof搞不定的情况基本都能区分清楚。你可以把Object.prototype.toString.call(value)理解为“给每个值拍一张类型X光片”照片上的标签就是它的真实身份。3.2 为什么不直接用instanceof和constructor你可能会说“直接用[] instanceof Array不就好了”确实能判断数组但它有几个明显限制。第一跨执行环境比如iframe、多个window时原型链可能不是同一个Array构造器导致instanceof失败。举个例子在父页面和iframe里各有一个Array一个iframe里的数组用父页面的Array去instanceof判断结果可能是false。第二constructor属性是公开可写的一个对象可以很容易地把constructor改成其他构造函数。虽然instanceof检查的是原型链而非constructor属性但如果你依赖constructor判断类型伪造起来非常容易。第三instanceof对原始类型无效hello instanceof String为false尽管new String(hello) instanceof String为true。所以说instanceof更适合用来检查某个对象是不是某个类创建的实例而不是判断基础数据类型。通用类型判断还是Object.prototype.toString更稳。3.3 手写一个通用的type函数既然Object.prototype.toString这么好用我们就可以封装一个自己的类型判断函数把各项目里碎片化的typeof xxx统一起来。这是我常用的一个简洁版本function getType(value) { if (value null) return null; const t typeof value; if (t ! object) return t; return Object.prototype.toString.call(value).slice(8, -1).toLowerCase(); }测试一下getType(hello); // string getType(42); // number getType(null); // null getType([]); // array getType({}); // object getType(new Date()); // date getType(() {}); // function这个函数绕过了typeof null的坑也把数组、日期等都区分开了。不过它也有隐患就是前面提到的Symbol.toStringTag伪造标签。如果你的代码涉及不可信对象建议再加一道防线比如判断标签为“array”时还要满足Array.isArray(value)判断“function”时用typeof value function兜底。宁可多一点校验也不要被伪造标签带偏。3.4 在项目里如何落地这套判断方案有人觉得封装一个全局工具函数是小题大做但我在真实项目中体会很深。当系统中多个模块都要校验用户输入、接口返回数据时如果每个人各写各的判断逻辑早晚会出问题。有一个集中式的类型判断工具团队只需要约定“统一走utils/type.js里的getType”新人也容易上手。比如在表单场景中需要判断字段值是不是一个普通对象可以这样import { getType } from /utils/type; function isPlainObject(value) { return getType(value) object; }这样就不会把null和数组误判为普通对象。顺带一提在Node.js后端代码里同样适用。比如解析请求体、处理配置对象时这种判断能力能省掉不少调试时间。尤其在处理用户传参时null、数组、字符串都可能伪装成“对象”统一判断很有必要。3.5 深入“普通对象”与“纯对象”的区分可能你也听过“Plain Object”这个概念。我经常看到有人用getType(value) object来判断一个值是不是“普通对象”但它只排除了内置对象类型并没有排除类的实例。比如class Person {}创建出来的实例Object.prototype.toString返回的还是[object Object]但严格来说它不是一个Plain Object。如果你需要更严格的“纯对象”判断可以像很多工具库一样结合原型链function isPlainObject(value) { if (getType(value) ! object) return false; const proto Object.getPrototypeOf(value); return proto Object.prototype || proto null; }这个判断的逻辑是一个对象如果直接以Object.prototype为原型或者没有原型Object.create(null)才算纯对象。类的实例、数组、日期都有各自不同的原型所以都能被排除掉。4. 类型转换比typeof更隐蔽的另一个巨坑4.1 隐式类型转换让typeof“变得不直观”typeof本身不会做类型转换但JavaScript的运算和比较会。你在写1 2的时候得到的是字符串121 - 2却得到数值-1。这种隐式转换经常让明明检测过类型的数据在运算过程中悄悄变了脸。尤其是加号它既能做字符串拼接又能做数字加法所以判断不准很容易栽跟头。如果你在代码里检查了typeof value number但value在某个地方被隐式转换成了字符串后面再做数字运算时就会得到几个数字拼接而不是真正的加法结果。比如let count 1; let total count 1; // 11不是 2这就是为什么我在写代码时尽量避免依赖隐式转换尤其在拼接SQL、模板字符串、HTTP参数时需要格外小心。可以用String(value)或Number(value)显式转换至少让意图清晰。4.2 宽松相等的坑0、空字符串、false乱成一锅很多人喜欢用做判断但它会进行隐式类型转换。在转换规则下下面这些都成立null undefined // true 0 // true 0 false // true false // true [] false // true NaN NaN // false这组等式每条单拎出来都有规范解释但对业务开发者来说这些规则就是噩梦。我见过因为value false想判断“空值”结果把0和也当成空值的bug。后来我们团队的代码规范里明确要求能直接用就别用。不会做类型转换0和false就是不一样的东西null和undefined也要分开处理。4.3 判断“空值”和“非法数字”的正确姿势既然提到空值判断这里也得说清楚。到底什么是“空”不同上下文含义不同可能是null、undefined、空字符串、空数组、0、false甚至NaN。我建议把一张“真值表”贴到电脑旁理解哪些值会被if判断为true或false。然后业务上定义统一的空值语义而不是用if (!value)一把梭。判断非法数字时记住这条边界isNaN(abc) true因为它会先把字符串变成数字再判断。Number.isNaN(abc) false因为它要求参数确实是一个number类型且值必须是NaN。如果你的需求只是判断“这个值能不能转成有效数字”可以先用Number(value)转换再判断结果同时处理null、空字符串等特殊情况。比如function safeNumber(value) { if (typeof value number) return value; if (value null || value ) return NaN; return Number(value); }很多老代码里的NaN问题都是因为混用了isNaN和Number.isNaN。理解差异之后排查会快很多。4.4 其他语言和场景里的类型判断差异“数据类型判断”不全是前端话题。热搜词里有人问“flask查看从客户端获取的变量数据类型”“pandas 数据类型转换”说明后端和数据领域也有类似的烦恼。在Python里type()和isinstance()各有用处在Redis里数据类型指的是STRING、LIST、HASH、SET、ZSET这些结构在C语言里类型由编译器保证不需要运行时判断。不过只有JavaScript这种“动态类型隐式转换”的体系会把类型判断变成日常必修课。理解JS的typeof陷阱对读懂其他动态语言也有帮助。比如Python中isinstance(True, int)为True而JS中的true是独立的boolean类型这一点容易让跨语言写脚本的人懵住。不管怎样先掌握一套可复用的判断思路再到具体语言里看它的API会比较省力。5. 项目实战中的踩坑记录与团队规范建议5.1 一个真实事故接口返回null被当成对象去年我在一个后台管理系统里接数据前端表格需要把每个字段渲染成标签。最初我写的判断是这样的if (typeof item.value object) { // 处理对象比如按Object.keys遍历 }结果有个字段没数据后端返回了null。因为typeof null object我的代码走进了处理对象的分支接着遍历Object.keys(null)直接抛异常。页面虽然是局部报错但用户上传的列表展示整个崩溃了排查了半天才发现是类型判断的问题。后来我把所有这类判断统一改成了工具函数if (isPlainObject(item.value)) { Object.keys(item.value).forEach(...) }这次事故之后我对团队立了一个规矩所有从外部接口拿到的字段除非确认是基础类型否则一律先用安全的类型判断过滤。尤其是像null、undefined、数组这些边界必须分开处理。5.2 团队规范禁止直接用typeof做复杂类型判断和同事交流时我发现不只我一个人踩过坑。于是我在项目里推动了一条编码规范除判断函数、symbol、基础原始类型的场景外不推荐直接用typeof判断数组、对象、null。如果需要判断对象子类型统一使用Object.prototype.toString.call()或项目内的通用getType工具函数进行相等比较时默认使用不允许依赖的隐式转换。当然规范不是一刀切。判断函数用typeof是合理的判断全局变量是否存在也可以用typeof带回退。关键是让团队明白每种判断手段适合什么场景而不是靠记忆去拼凑。5.3 TypeScript里的typeof并不是运行时那一套现在很多项目都引入了TypeScript有同学会问“TypeScript里也有typeof它和JS的这个有什么区别”这个很值得解释。TypeScript中的typeof是类型查询操作符出现在类型上下文中用于获取某个变量或属性的类型而不是在运行时返回字符串。例如const config { url: https://example.com, retries: 3 }; type Config typeof config; // Config 的类型就是 { url: string, retries: number }这和JS运行时typeof config返回object完全不同。所以别把两者搞混一个是编译期的类型操作一个是运行时的值操作。在TS项目里如果仍需要在运行时精确判断类型我还是建议用Object.prototype.toString那套方案因为TS的类型系统只在编译期起作用运行时的数据依然要面对所有JavaScript边界。5.4 写在最后的个人心得说实话typeof这个操作符我用了好多年真正把它的边界研究透还是因为某次线上事故。后来每遇到类型判断问题我都会先问自己这个值可能有哪些来源它可能是原始类型还是对象会不会是null会不会跨上下文这几个问题想清楚了判断逻辑基本就稳了。最后分享一个排查技巧遇到任何“明明判断对了还是出错”的类型问题先不要急着查业务逻辑直接打印一行Object.prototype.toString.call(value)看看类型标签到底是什么。多数情况下答案就在那几个字符里。我也是靠这个小习惯省下了无数次在错误分支里打转的时间。希望这篇内容能帮你少走几次弯路。
