javascript怎么判断数据类型？本篇文章给大家分享js 判断数据类型的 8 种方式，有效帮助工作和面试，面试官看了微微一笑。
1、typeof
只能识别基础类型和引用类型
注意：null、 NaN、 document.all 的判断
console.log(typeof null); // objectconsole.log(typeof NaN); // numberconsole.log(typeof document.all); // undefined
2、constructor
constuctor 指向创建该实例对象的构造函数
注意 null 和 undefined 没有 constructor，以及 constructor 可以被改写
String.prototype.constructor = function fn() { return {};};console.log("云牧".constructor); // [Function: fn]
3、instanceof
语法：obj instanceof Type功能：判断 obj 是不是 Type 类的实例，只可用来判断引用数据实现思路： Type 的原型对象是否是 obj 的原型链上的某个对象注意：右操作数必须是函数或者 class
手写 instanceof：
立即学习“Java免费学习笔记（深入）”；
function myInstanceof(Fn, obj) { // 获取该函数显示原型 const prototype = Fn.prototype; // 获取obj的隐式原型 let proto = obj.__proto__; // 遍历原型链 while (proto) { // 检测原型是否相等 if (proto === prototype) { return true; } // 如果不等于则继续往深处查找 proto = proto.__proto__; } return false;}
4、isPrototypeof
是否在实例对象的原型链上基本等同于 instanceof
console.log(Object.isPrototypeOf({})); // falseconsole.log(Object.prototype.isPrototypeOf({})); // true 期望左操作数是一个原型，{} 原型链能找到 Object.prototype
5、Object.prototype.toString
利用函数动态 this 的特性
function typeOf(data) { return Object.prototype.toString.call(data).slice(8, -1);}// 测试console.log(typeOf(1)); // Numberconsole.log(typeOf("1")); // Stringconsole.log(typeOf(true)); // Booleanconsole.log(typeOf(null)); // Nullconsole.log(typeOf(undefined)); // Undefinedconsole.log(typeOf(Symbol(1))); // Symbolconsole.log(typeOf({})); // Objectconsole.log(typeOf([])); // Arrayconsole.log(typeOf(function () {})); // Functionconsole.log(typeOf(new Date())); // Dateconsole.log(typeOf(new RegExp())); // RegExp
6、鸭子类型检测
检查自身属性的类型或者执行结果的类型通常作为候选方案例子：kindof 与 p-is-promise
p-is-promise：
const isObject = value => value !== null && (typeof value === "object" || typeof value === "function");export default function isPromise(value) { return ( value instanceof Promise || (isObject(value) && typeof value.then === "function" && typeof value.catch === "function") );}
kindof：
function kindof(obj) { var type; if (obj === undefined) return "undefined"; if (obj === null) return "null"; switch ((type = typeof obj)) { case "object": switch (Object.prototype.toString.call(obj)) { case "[object RegExp]": return "regexp"; case "[object Date]": return "date"; case "[object Array]": return "array"; } default: return type; }}
7、Symbol.toStringTag
原理：Object.prototype.toString 会读取该值适用场景：需自定义类型注意事项：兼容性
class MyArray { get [Symbol.toStringTag]() { return "MyArray"; }}const arr = new MyArray();console.log(Object.prototype.toString.call(arr)); // [object MyArray]
8、等比较
原理：与某个固定值进行比较适用场景：undefined、 window、 document、 null 等
underscore.js：
阿里云-虚拟数字人
阿里云-虚拟数字人是什么？ …
2 查看详情
总结
typeof√×NaN、object、document.allconstructor√ 部分√可以被改写instanceof×√多窗口，右边构造函数或者classisPrototypeof×√小心 null 和 undefinedtoString√√小心内置原型鸭子类型-√不得已兼容Symbol.toString Tag×√识别自定义对象等比较√√特殊对象
加餐：ES6 增强的 NaN
NaN 和 Number.NaN 特点
typeof 后是数字
自己不等于自己
delete 不能被删除
isNaN
如果非数字，隐式转换传入结果如果是 NaN，就返回 true，反之返回 false
console.log(isNaN(NaN)); // trueconsole.log(isNaN({})); // true
Number.isNaN
判断一个值是否是数字，并且值是否等于 NaN
console.log(Number.isNaN(NaN)); // trueconsole.log(Number.isNaN({})); // false
其他判断是否 NaN 的方法
function isNaNVal(val) { return Object.is(val, NaN);}function isNaNVal(val) { return val !== val;}function isNaNVal(val) { return typeof val === "number" && isNaN(val);}// 综合垫片if (!("isNaN" in Number)) { Number.isNaN = function (val) { return typeof val === "number" && isNaN(val); };}
indexOf 和 includes
indexOf 不可查找 NaN，includes 则可以
const arr = [NaN];console.log(arr.indexOf(NaN)); // -1console.log(arr.includes(NaN)); // true
【推荐学习：javascript高级教程】
以上就是JavaScript怎么判断数据类型？8 种方式分享的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/543503.html
微信扫一扫 
支付宝扫一扫 
