当前位置: 首页 > news >正文

前端知识点---Javascript中检测数据类型函数总结

文章目录

  • 01 typeof 运算符
  • 02 instanceof 运算符
  • 03 Array.isArray()
  • 04 Object.prototype.toString.call()
  • 05 constructor 属性
  • 06 isNaN() 和 Number.isNaN() (常用)
  • 07 isFinite() 和 Number.isFinite()
  • 08 typeof null 是 "object" 的问题

01 typeof 运算符

返回值是一个字符串
全部类型都是可以检测的

typeof 42;            // "number"
typeof "hello";       // "string"
typeof true;          // "boolean"
typeof undefined;     // "undefined"
typeof null;          // "object" (这是历史遗留问题)
typeof Symbol();      // "symbol"
typeof BigInt(123);   // "bigint"
typeof {};            // "object"
typeof [];            // "object"
typeof function(){};  // "function"

注意:无法区分 null 和普通对象,数组和普通对象都会返回 “object”。

02 instanceof 运算符

用于检测对象是否是构造函数
检测引用类型时非常有用(如数组、对象、自定义类等)。

[] instanceof Array; // true
{} instanceof Object; // true
new Date() instanceof Date; // true
function(){} instanceof Function; // true

适用场景:
检查对象的具体类型,尤其是用户定义的类或构造函数。

03 Array.isArray()

专门用于检查值是否是数组。
Array.isArray([]); // true
Array.isArray({}); // false
适用场景:
专门区分数组和其他对象。

04 Object.prototype.toString.call()

可以准确检测所有内置对象的类型,返回更具体的类型信息。

Object.prototype.toString.call(42); // “[object Number]”
Object.prototype.toString.call(“hello”); // “[object String]”
Object.prototype.toString.call(true); // “[object Boolean]”
Object.prototype.toString.call(null); // “[object Null]”
Object.prototype.toString.call(undefined); // “[object Undefined]”
Object.prototype.toString.call([]); // “[object Array]”
Object.prototype.toString.call({}); // “[object Object]”
Object.prototype.toString.call(function(){}); // “[object Function]”
Object.prototype.toString.call(new Date()); // “[object Date]”
Object.prototype.toString.call(/regex/); // “[object RegExp]”
Object.prototype.toString.call(new Map()); // “[object Map]”
Object.prototype.toString.call(new Set()); // “[object Set]”
Object.prototype.toString.call(new WeakMap()); // “[object WeakMap]”

适用场景:
适用于更精确的数据类型检查,尤其是区分类似类型(如数组与对象、正则与对象等)。

05 constructor 属性

通过 constructor 可以访问对象的构造函数,从而判断对象的类型。

(42).constructor === Number; // true
(“hello”).constructor === String; // true
(true).constructor === Boolean; // true
({}).constructor === Object; // true
([]).constructor === Array; // true
(function() {}).constructor === Function; // true

适用场景:
检查引用类型的具体构造函数。
注意:
可能被篡改或重写,因此不总是可靠。

06 isNaN() 和 Number.isNaN() (常用)

isNaN():判断值是否为 NaN(非数字值或计算失败返回 NaN 时)。
Number.isNaN():判断值是否严格为 NaN(类型安全)。

isNaN(“hello”); // true (被隐式转换后是NaN)
isNaN(NaN); // true

Number.isNaN(“hello”); // false
Number.isNaN(NaN); // true

07 isFinite() 和 Number.isFinite()

isFinite():检测值是否是有限数(可以自动转换类型)。
Number.isFinite():检测值是否是有限数,但不进行类型转换。

isFinite(42); // true
isFinite(“42”); // true (字符串被转换为数字)
isFinite(Infinity); // false
isFinite(NaN); // false

Number.isFinite(42); // true
Number.isFinite(“42”); // false (严格检测类型)

08 typeof null 是 “object” 的问题

由于历史原因,typeof null 返回 “object”,所以使用 typeof 检测时需要注意。

Object.prototype.toString.call(null) === “[object Null]”; // 更准确

总结
typeof 简单、快速检测基本类型 检查基础数据类型
instanceof 检查某对象是否为某类实例 检查引用类型和自定义类
Array.isArray() 专门检测数组 确认某变量是否是数组
Object.prototype.toString.call() 精确识别所有内置类型对象 高精度类型判断
constructor 查看对象的构造函数 检查引用类型构造器
isNaN / Number.isNaN 检测 NaN 判断是否为无效数字
isFinite / Number.isFinite 检测有限数字 检查是否有限数
每种方法都有自己的适用场景,根据需要选择合适的方法。

http://www.lryc.cn/news/482700.html

相关文章:

  • aspose如何获取PPT放映页“切换”的“持续时间”值
  • 【MQTT】代理服务比较RabbitMQ、Mosquitto 和 EMQX
  • 【C#/C++】C++/CL中String^的含义和举例,C++层需要调用C#层对象时...
  • Python学习从0到1 day26 第三阶段 Spark ② 数据计算Ⅰ
  • 【详细】如何优雅地删除 Docker 容器与镜像
  • Spring Spring Boot 常用注解总结
  • Flink独立集群+Flink整合yarn
  • 动态规划 之 简单多状态 dp 问题 算法专题
  • qt QPixmapCache详解
  • Redis中的持久化
  • Unity 如何优雅的限定文本长度, 包含对特殊字符,汉字,数字的处理。实际的案例包括 用户昵称
  • SMO+PLL滑膜观测器、MARS模型参考自适应观测器simulink仿真
  • 例题解析:利用异或运算(XOR)找出单独的数
  • 如何处理微信小程序大量未捕获的异常
  • C#-StringBuilder
  • SQLI LABS | Less-39 GET-Stacked Query Injection-Intiger Based
  • linux安装zookeeper和kafka集群
  • 洞悉 Linux 系统运行细节,使用 atop 监测和回看系统负载状态
  • “双十一”电商狂欢进行时,在AI的加持下看网易云信IM、RTC如何助力商家!
  • Python调用企业微信的扫一扫
  • 速盾:CDN和OBS能共用流量包吗?
  • 第8章 利用CSS制作导航菜单
  • C# 集合与泛型
  • el-date-picker 设置开始时间和结束时间
  • 【Docker】 常用命令
  • docker compose - 设置名字
  • 工业拍卖平台、信息发布、租赁商城平台系统适用于全行业解决方案。
  • 一个win32 / WTL下多线程库(CThread类)的使用心得
  • 使用wordpress搭建简易的信息查询系统
  • PAT甲级 1076 Forwards on Weibo(30)