前端知识点---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.mzph.cn/pingmian/60094.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MAC 安装 brew及其常用命令

​文章:Mac安装brew的四种方法(指定能行) 以下是在 Mac 上使用 Homebrew 清理缓存和无用包的详细指南: 1. 查看系统状态 # 诊断系统问题 brew doctor# 查看已安装的包 brew list# 查看系统占用空间 brew cleanup -n # 预览需要…

基于Multisim数字电子秒表0-60S电路(含仿真和报告)

【全套资料.zip】数字电子秒表电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.秒表最大计时值为60秒; 2. 2位数码管显示,分辨率为1秒; 3.具有清零…

安卓智能指针sp、wp、RefBase浅析

目录 前言一、RefBase1.1 引用计数机制1.2 设计目的1.3 主要方法1.4 如何使用1.5 小结 二、sp和wp2.1 引用计数机制2.2 设计目的2.3 主要方法2.3.1 sp2.3.2 wp 2.4 如何使用2.5 小结 四、参考链接 前言 安卓底层binder中,为什么 IInterface要继承自RefBase &#x…

【论文笔记】Prefix-Tuning: Optimizing Continuous Prompts for Generation

🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: Prefix-Tuning: Optimizin…

【Web前端】从回调到现代Promise与Async/Await

异步编程是一种让程序能够在等待某些操作完成的同时继续执行其他任务的关键技术,打破了传统编程中顺序执行代码的束缚。这种编程范式允许开发者构建出能够即时响应用户操作、高效处理网络请求和资源加载的应用程序。通过异步编程,JavaScript 能够在执行耗…

如何自己实现事件的订阅和发布呢?

1.原理 核心思想是基于发布/订阅模式,用一个共享的数据结构来管理事件和事件监听器。主要功能包括事件订阅、取消订阅、发布事件等功能。 实现思路 定义事件和监听器接口:首先定义一个 Event 类和一个 EventListener 接口,所有事件和监听器…

【CSS】“flex: 1“有什么用?

flex 属性的组成 flex 属性是一个复合属性,包含以下三个子属性: flex-grow:决定元素在容器中剩余空间的分配比例。默认值为 0,表示元素不会扩展。当设置为正数时,元素会按照设定比例扩展。flex-shrink:决…

计算机课程管理:Spring Boot与工程认证的协同创新

3系统分析 3.1可行性分析 通过对本基于工程教育认证的计算机课程管理平台实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于工程教育认证的计算机课程管理平…

vuepress配置谷歌广告-通过vue-google-adsense库

在 VuePress 中可以使用 vue-google-adsense 插件来配置 Google AdSense 广告,这个库可以简化在 VuePress 项目中插入广告的过程。 以下是使用 vue-google-adsense 配置广告的步骤: 1. 安装 vue-google-adsense 库 在你的 VuePress 项目根目录下安装 …

深度学习:解码器如何与编码器交互的过程

解码器如何与编码器交互的过程 在序列到序列的神经网络模型中,解码器与编码器的交互是实现有效翻译、文本生成等任务的关键环节。这种交互主要是通过编码器-解码器注意力机制(通常称为跨注意力机制)来实现的,它允许解码器在生成每…

通过VirtualBox虚拟机安装和调试编译好的 ReactOS

1. 首先创建一个虚拟机配置脚本 setup_vm.bat: batch echo off :: setup_vm.bat :: 设置路径 set "REACTOS_BUILDE:\Reactos_WinDriver\reactos-master\build" set "VM_PATHE:\VMs\ReactOS_Debug" set "VBOX_MANAGEC:\Program Files\Ora…

Kubernetes-Kubectl篇-01-常用命令

kubectl 常见命令 登录命令 根据机器ip使用kubectl登录机器(field-selector): #!/bin/bash export targetIp"6.0.90.240"#alias kubectlkubectl alias kubectlkubectl --kubeconfig/Users/king/.kube/sa128.configpodinfokubectl get pod --all-namespaces --fiel…

【SpringBoot】18 上传文件到数据库(Thymeleaf + MySQL)

Git仓库 https://gitee.com/Lin_DH/system 介绍 使用 Thymeleaf 写的页面&#xff0c;将&#xff08;txt、jpg、png&#xff09;格式文件上传到 MySQL 数据库中。 依赖 pom.xml <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j --><depende…

Kubernetes实现故障转移和微服务弹性伸缩

以下是在Kubernetes&#xff08;k8s&#xff09;中实现故障转移和高可用的方法及详细操作步骤&#xff1a; 一、通过Kubernetes Deployment实现故障转移&#xff08;多实例部署&#xff09; 方法概述&#xff1a; 通过创建Deployment资源并设置多个副本&#xff0c;Kubernete…

Sharding运行模式、元数据、持久化详解

运行模式 单机模式 能够将数据源和规则等元数据信息持久化&#xff0c;但无法将元数据同步至多个Sharding实例&#xff0c;无法在集群环境中相互感知。 通过某一实例更新元数据之后&#xff0c;会导致其他实例由于获取不到最新的元数据而产生不一致的错误。 适用于工程师在本…

Go语言进阶之Context控制并发

Context Context是Go语言中一个用于传递请求范围的上下文信息的标准库包&#xff0c;其主要用于处理并发操作中请求的生命周期的管理。 协程如何退出 利用协程退出的例子来说明Context的作用&#xff0c;以及没有使用Context&#xff0c;应该如何在没有执行完代码时提前退出…

挖掘web程序中的OAuth漏洞:利用redirect_uri和state参数接管账户

本文探讨了攻击者如何利用OAuth漏洞&#xff0c;重点是滥用redirect_uri和state参数以接管用户账户。如果redirect_uri参数验证不严&#xff0c;可能会导致未经授权的重定向到恶意服务器&#xff0c;从而使攻击者能够捕获敏感信息。同样&#xff0c;state参数的错误实现可能使O…

数据中心类DataCenter(二)

数据中心类DataCenter&#xff08;二&#xff09; 前言 在上一集我们对数据中心类DataCenter做了以下内容&#xff0c;我们对他进行设置单例模式&#xff0c;我们讨论并写入了一些我们数据中心类需要管理的数据&#xff0c;重点介绍了我们验证码id的重要性&#xff0c;在最后…

ORACLE 闪回技术简介

闪回技术是若干技术的集合 包含对数据库整体的闪回 对表的闪回 对事务的闪回 经典面试题面试题&#xff1a;简述Oracle数据库闪回技术&#xff1f; 1.闪回Oracle数据库 2.闪回表 3.闪回事务 数据库闪回 要想实现数据库闪回 1.必须配置数据库的恢复区 SQL> show parameter …

Python世界:力扣题解1712,将数组分成三个子数组的方案数,中等

Python世界&#xff1a;力扣题解1712&#xff1a;将数组分成三个子数组的方案数&#xff0c;中等 任务背景思路分析代码实现测试套件本文小结 任务背景 问题来自力扣题目1712. Ways to Split Array Into Three Subarrays&#xff0c;大意如下&#xff1a; A split of an intege…