JavaScript篇：typeof 的魔法：原来你是这样判断类型的！

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个工作6年的前端老司机。今天咱们来聊聊JavaScript中那个既熟悉又陌生的typeof操作符。别看它平时用起来简单，里面的门道可不少！

一、typeof 的基本使用

先来个最简单的例子：

javascript 复制代码

console.log(typeof 42); // "number"
console.log(typeof '我'); // "string"
console.log(typeof true); // "boolean"

看起来很简单对吧？但如果你以为typeof就这么点能耐，那可就太小看它了！

二、typeof 的"奇葩"表现

这里有几个容易踩坑的例子：

javascript 复制代码

console.log(typeof null); // "object"  （黑人问号脸？）
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"

看到没？null居然返回"object"，这可是JavaScript著名的历史遗留问题！当年我在项目里就被这个坑过，debug了半天才发现是类型判断出了问题。

三、typeof 的工作原理

其实typeof判断类型的原理很简单：

对于原始类型（除null外），直接返回对应类型字符串
对于函数，返回"function"
对于其他对象 （包括数组、日期等），统一返回"object"
对于null，这是个特例，因为历史原因返回"object"

四、实战中的小技巧

在实际开发中，我经常用这样的组合判断：

javascript 复制代码

function checkType(value) {
    if (value === null) return 'null';
    return typeof value === 'object' 
        ? Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
        : typeof value;
}

console.log(checkType([])); // "array"
console.log(checkType(new Date())); // "date"

五、为什么要有typeof？

想象一下没有typeof的世界：

javascript 复制代码

// 要这样判断类型吗？（太可怕了！）
if (value.constructor === String) {...}
if (value instanceof Array) {...}

typeof提供了一种快速判断基本类型的方法，虽然不完美，但在大多数情况下已经够用了。

六、新型替代方案

现在我们有更多选择：

javascript 复制代码

// ES6+ 的替代方案
console.log(Array.isArray([])); // true
console.log(typeof 我 === 'undefined'); // 检查未定义

七、总结

typeof是JS内置的类型判断操作符
对原始类型判断准确（除null外）
对引用类型大部分返回"object"
函数会返回"function"
实际开发中可能需要组合其他判断方法

记住：typeof null === 'object'不是bug，是feature！（手动狗头）

你在项目中还遇到过哪些typeof的坑？欢迎在评论区分享你的故事～