JavaScript怎么判断数据类型?8 种方式分享

青灯夜游
发布: 2023-02-17 18:19:41
转载
4528 人浏览过

JavaScript怎么判断数据类型?本篇文章给大家分享JS 判断数据类型的 8 种方式,有效帮助工作和面试,面试官看了微微一笑。

JavaScript怎么判断数据类型?8 种方式分享

1、typeof

  • 只能识别基础类型和引用类型

注意:nullNaNdocument.all的判断

console.log(typeof null); // object console.log(typeof NaN); // number console.log(typeof document.all); // undefined
登录后复制

2、constructor

  • constuctor指向创建该实例对象的构造函数

注意nullundefined没有constructor,以及constructor可以被改写

String.prototype.constructor = function fn() { return {}; }; console.log("云牧".constructor); // [Function: fn]
登录后复制

3、instanceof

  • 语法:obj instanceof Type
  • 功能:判断obj是不是Type类的实例,只可用来判断引用数据
  • 实现思路:Type的原型对象是否是obj的原型链上的某个对象
  • 注意:右操作数必须是函数或者 class

手写instanceof

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({})); // false console.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)); // Number console.log(typeOf("1")); // String console.log(typeOf(true)); // Boolean console.log(typeOf(null)); // Null console.log(typeOf(undefined)); // Undefined console.log(typeOf(Symbol(1))); // Symbol console.log(typeOf({})); // Object console.log(typeOf([])); // Array console.log(typeOf(function () {})); // Function console.log(typeOf(new Date())); // Date console.log(typeOf(new RegExp())); // RegExp
登录后复制

6、鸭子类型检测

  • 检查自身属性的类型或者执行结果的类型
  • 通常作为候选方案
  • 例子:kindofp-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、等比较

  • 原理:与某个固定值进行比较
  • 适用场景:undefinedwindowdocumentnull

underscore.js:

总结

方法 基础数据类型 引用类型 注意事项
typeof × NaN、object、document.all
constructor √ 部分 可以被改写
instanceof × 多窗口,右边构造函数或者class
isPrototypeof × 小心 null 和 undefined
toString 小心内置原型
鸭子类型 - 不得已兼容
Symbol.toString Tag × 识别自定义对象
等比较 特殊对象

加餐:ES6 增强的 NaN

NaN 和 Number.NaN 特点

  • typeof后是数字

  • 自己不等于自己

  • delete不能被删除

isNaN

  • 如果非数字,隐式转换传入结果如果是NaN,就返回true,反之返回false
console.log(isNaN(NaN)); // true console.log(isNaN({})); // true
登录后复制

Number.isNaN

  • 判断一个值是否是数字,并且值是否等于NaN
console.log(Number.isNaN(NaN)); // true console.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不可查找NaNincludes则可以
const arr = [NaN]; console.log(arr.indexOf(NaN)); // -1 console.log(arr.includes(NaN)); // true
登录后复制

【推荐学习:javascript高级教程

以上是JavaScript怎么判断数据类型?8 种方式分享的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:juejin.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!