JS 类型判断不用愁：4 种方法，覆盖所有场景

前言在JavaScript世界里“类型判断”就像给变量“验明正身”——只有摸清每个变量的“身份”才能避免代码里的“乌龙事件”。今天就结合实操代码把typeof、instanceof、Object.prototype.toString.call()、Array.isArray()这几个方法讲明白新手也能轻松拿捏一、先搞懂JS的两种数据类型在开始判断之前我们先明确JS的基础分类这是判断类型的前提1.原始类型基本类型—— 不可再分的“最小单元”原始类型是JS中最基础的数据类型// 原始类型示例你的代码片段 let n 123; // number数字类型 let s hello; // string字符串类型 let f true; // boolean布尔类型 let u undefined; // undefined未定义类型 let nu null; // null空值类型 let sy Symbol(1); // Symbol唯一标识类型 let big 123123123n; // BigInt大整数类型解决普通数字精度问题2.引用类型复杂类型—— 由原始类型组合而成引用类型是“容器”里面可以装原始类型或其他引用类型// 引用类型示例你的代码片段 let arr []; // Array数组 let obj {}; // Object普通对象 let fn function() {}; // Function函数 let date new Date(); // Date日期对象⚠️ 关键区别引用类型存的是“地址”指针而原始类型存的是“具体值”——这也是后续类型判断出现差异的核心原因二、常用类型判断方法详解下面结合代码逐一拆解4种常用判断方法优缺点、使用场景一次性说清附代码验证和补充解释~1. typeof —— 最常用但有“小盲区”typeof是最基础的判断方法用法超简单typeof 变量或typeof(变量)typeof判断除null外的所有原始类型console.log(typeof n); // number console.log(typeof(s)); // string console.log(typeof f); // boolean console.log(typeof u); // undefined console.log(typeof sy); // symbol console.log(typeof big); // biginttypeof原始类型里除了null它都能精准判断❌ typeof的“盲区”判断引用类型null的坑console.log(typeof(nu)); // object坑明明是null console.log(typeof(arr)); // object坑明明是数组 console.log(typeof(obj)) // object正确但不够精准 console.log(typeof(date)) // object坑明明是日期 console.log(typeof(fn)) // function唯一能正确判断的引用类型为什么会这样typeof是通过“二进制编码”判断类型的二进制前三位是0的会统一识别为object。所有引用类型数组、对象、日期等的二进制前三位都是0所以typeof判断它们都返回object而null的二进制全是0也被误判为object这是JS的历史遗留bug至今没修复2. instanceof —— 引用类型“专属判断器”typeof搞不定引用类型instanceof就登场了它的用法是变量 instanceof 构造函数核心是“通过隐式原型链查找”判断归属function myinstanceof(L, R) { // 先排除原始类型除了nullnull在这里会被过滤 if (typeof(L) ! object typeof(L) ! function || L null) { return false } // 沿着隐式原型链__proto__一直往上找 while (L.__proto__ ! null) { // 如果找到构造函数的原型R.prototype就返回true if (L.__proto__ R.prototype) { return true } L L.__proto__ // 没找到继续往上找 } return false // 找到最顶层Object.prototype.__proto__ null仍没找到返回false } console.log(myinstanceof([], Array)); // true数组是Array构造的 console.log(myinstanceof([], Object)); // true数组的原型链最终指向Object console.log(myinstanceof(null, Object));// falsenull不是对象被提前过滤❌ instanceof的“短板”搞不定原始类型比如let n 123number类型用instanceof判断会返回false因为原始类型没有原型链无法通过原型查找判断归属console.log(123 instanceof Number); // false原始类型number不是Number对象 console.log(new Number(123) instanceof Number); // true这是Number对象属于引用类型3. Object.prototype.toString.call(x) —— 全能判断王如果说typeof有盲区instanceof有短板那这个方法就是“全能选手”能精准判断所有类型核心原理Object.prototype.toString.call(x)的执行逻辑你注释里写的很完整我们补充得更易懂一点调用Object.prototype上的toString方法注意不是变量自身的toString比如数组的toString会返回字符串而这个是Object的原生方法将括号里的x也就是要判断的变量作为toString方法里的this值通过ToObject方法将this值转为对象如果是原始类型会自动包装成对应对象比如123会变成Number对象获取这个对象的[[class]]内部属性这个属性是JS内部的无法直接访问它的值就是创建这个对象的构造函数名称返回格式为“[object 构造函数名称]”的字符串比如判断字符串会返回“[object String]”。✅ 实操演示function getType(x) { const val Object.prototype.toString.call(x); // 得到[object 类型名] const valType val.slice(8, -1); // 截取字符串去掉[object 和]得到纯类型名 return valType; } // 测试所有类型精准无错 console.log(getType(n)); // Number注意首字母大写和typeof的返回值区分 console.log(getType(s)); // String console.log(getType(f)); // Boolean console.log(getType(u)); // Undefined console.log(getType(nu)); // Null终于能正确判断null了 console.log(getType(sy)); // Symbol console.log(getType(big)); // BigInt console.log(getType(arr)); // Array console.log(getType(obj)); // Object console.log(getType(fn)); // Function console.log(getType(date)); // Date这个方法是唯一能精准判断null的方法而且不管是原始类型还是引用类型都能返回最准确的类型名日常开发里用它准没错4. Array.isArray(x) —— 数组“专属判断”虽然Object.prototype.toString.call(x)能判断数组但针对数组还有一个更简洁的方法Array.isArray(x)原理和你写的x.__proto__ Array.prototype一致都是判断变量的原型是否是Array的原型。console.log(Array.isArray(arr)); // true console.log(Array.isArray([])); // true console.log(Array.isArray({})); // false小技巧如果只是判断是否是数组用Array.isArray(x)比toString方法更简洁性能也更好三、总结不同场景该用哪个方法怕记混一张表格搞定直接对号入座判断场景推荐方法备注快速判断原始类型除nulltypeof简单高效新手首选判断引用类型数组、函数、日期等instanceof / Object.prototype.toString.call(x)instanceof适合判断“是否属于某个构造函数”toString适合精准判断类型判断nullObject.prototype.toString.call(x) / x nulltypeof会误判必须用这两种方法判断数组Array.isArray(x)最简洁、最高效需要精准判断所有类型通用场景Object.prototype.toString.call(x)全能选手无盲区看到这里相信你已经搞懂JS类型判断啦其实核心就是分清“原始类型”和“引用类型”再根据场景选对方法以后写代码再也不用为“变量是什么类型”发愁啦