JS类型检测大全:从零基础到高级应用

文章目录

    • 1. typeof 操作符
      • typeof null 为什么是 object
    • 2. `instanceof` 操作符
    • 3. `Object.prototype.toString.call()`(最准确的)
    • 4. Array.isArray()
    • 5. `constructor` 属性
    • 总结

在JavaScript中,有多种方法可以用来检测数据类型。每种方法都有其特定的用途和局限性。下面是几种常用的类型检测方法及其特点:

1. typeof 操作符

typeof 可以用来检测基本数据类型(除了nullundefined之间的区分)。

  • 优点:简单易用。
  • 缺点:无法准确区分 null数组,对象,都会返回 "object"。其他判断都正确
console.log(typeof ½); // "number"
console.log(typeof 'str'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" 
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"

typeof null 为什么是 object

在最初的 JS 实现中,typeof 操作符的设计目的是返回一个字符串,指示未经计算的操作数的类型。然而,在处理null时,由于null最初被设计为表示“无对象”,因此将其类型视为 "object"。这个决定导致了typeof null返回 "object"

解决办法

  1. 使用严格相等运算符(===
if (value === null) {console.log("这是一个 null");
}
  1. 使用 Object.prototype.toString.call()
    这是最准确的方法,可以明确地区分 null 与其他类型。
if (Object.prototype.toString.call(value) === "[object Null]") {console.log("这是一个 null");
}
  1. 自定义类型检查
    写一个函数用来检测
function getType(value) {if (value === null) {return "null";}return typeof value;
}console.log(getType(null)); // "null"
console.log(getType(42)); // "number"
console.log(getType("hello")); // "string"

2. instanceof 操作符

instanceof 用来检查一个对象在其原型链中是否存在一个构造函数的prototype属性

  • 优点:可以用来区分不同的引用类型。
  • 缺点:不能用来检测基础类型。跨iframe使用时可能会出现问题。
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function(){} instanceof Function); // true

3. Object.prototype.toString.call()(最准确的)

这是最可靠的一种类型检测方法,可以准确地区分所有类型,包括基础类型和引用类型。
使用Object对象的原型方法toString方法来判断

优点:非常准确,支持所有类型。
缺点:语法稍微复杂一点。

  • 基本类型
console.log(Object.prototype.toString.call(1)); // "[object Number]"
console.log(Object.prototype.toString.call('str')); // "[object String]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(BigInt(123456789012345678901234567890n))); // "[object BigInt]"
  • 引用类型
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"
console.log(Object.prototype.toString.call(new RegExp("abc"))); // "[object RegExp]"
console.log(Object.prototype.toString.call(new Map())); // "[object Map]"
console.log(Object.prototype.toString.call(new Set())); // "[object Set]"
console.log(Object.prototype.toString.call(new WeakMap())); // "[object WeakMap]"
console.log(Object.prototype.toString.call(new WeakSet())); // "[object WeakSet]"
console.log(Object.prototype.toString.call(new Error())); // "[object Error]"
  • 特殊对象
console.log(Object.prototype.toString.call(Math)); // "[object Math]"
console.log(Object.prototype.toString.call(JSON)); // "[object JSON]"
console.log(Object.prototype.toString.call(Promise.resolve())); // "[object Promise]"
  • 自定义检测方法 -便捷使用
function getType(value) {return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}console.log(getType(42)); // "number"
console.log(getType("Hello, World!")); // "string"
console.log(getType(true)); // "boolean"
console.log(getType(undefined)); // "undefined"
console.log(getType(null)); // "null"
console.log(getType(Symbol("symbol"))); // "symbol"
console.log(getType({})); // "object"
console.log(getType([])); // "array"
console.log(getType(function() {})); // "function"
console.log(getType(new Date())); // "date"
console.log(getType(new RegExp("abc"))); // "regexp"
console.log(getType(new Map())); // "map"
console.log(getType(Promise.resolve())); // "promise"

4. Array.isArray()

专门用于检测是否为数组。
优点:简单明了,专用于数组检测。
缺点:只能用于数组。

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

5. constructor 属性

通过检查对象的constructor属性来确定其构造函数。
优点:可以用于大多数引用类型。
缺点:constructor 对象访问它的构造函数,如果创建一个对象改变它的原型,则可能不准确。对于基础类型无效。

console.log((2).constructor == Number); //true
console.log((true).constructor == Boolean); //true
console.log(("string").constructor == String); //trueconsole.log(([]).constructor === Array); // true
console.log(({}).constructor === Object); // true
console.log((function(){}).constructor === Function); // true// 改变原型之后
function Fn(){}Fn.prototype  = new Array();
var f= new Fn();console.log(f.constructor === Fn);//false
console.log(f.constructor === Array);//true

总结

  • 对于基础类型,推荐使用 typeof 或 Object.prototype.toString.call()。
  • 对于引用类型,尤其是需要区分具体类型时,Object.prototype.toString.call() 是最佳选择。
  • 如果只需要判断是否为数组,Array.isArray() 是最直接的方法。
  • instanceof 在某些情况下也很有用,特别是当你需要检查对象是否是由特定构造函数创建的时候。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885403.shtml

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

相关文章

基于SSM的校园美食交流系统【附源码】

基于SSM的校园美食交流系统 效果如下: 管理员主页面 用户主页面 美食信息页面 美食资讯页面 修改密码页面 论坛中心页面 研究背景 随着高校信息化建设的不断推进,校园生活日益丰富多样,学生对于美食的需求与探索也愈发旺盛。然而&#xff…

css实现div被图片撑开

固定好盒子的宽度&#xff0c;高度随传过来的图片大小决定 <div class"tab-con"> <img:src"concertInfo.detail"alt""> </div>.tab-con {margin-bottom: 20px;width: 700px;img {width: 700px;height: auto;object-fit: cont…

PICO+Unity MR空间网格

官方链接&#xff1a;空间网格 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

斗破QT编程入门系列之前言:认识Qt:获取与安装(四星斗师)

本系列是在学习完C之后&#xff0c;然后通过Qt构建界面来&#xff0c;赋予枯燥的代码新的样貌&#xff0c;这样我们才能开发出更人性化的程序&#xff0c;同时会进一步提高初学者对编程的兴趣&#xff0c;大家加油&#xff0c;斗破Qt来了。 斗破Qt目录&#xff1a; 斗破Qt编程…

PyTorch核心概念:从梯度、计算图到连续性的全面解析(三)

文章目录 Contiguous vs Non-Contiguous TensorTensor and ViewStrides非连续数据结构&#xff1a;Transpose( )在 PyTorch 中检查Contiguous and Non-Contiguous将不连续张量&#xff08;或视图&#xff09;转换为连续张量view() 和 reshape() 之间的区别总结 参考文献 Contig…

家庭宽带如何开启公网ipv4和ipv6

好久没更新了&#xff0c;最近在家里折腾nas。一来自己有下电影的习惯&#xff0c;二来手机的icloud容量也不够了。所以买了群晖的423,但是nas要想用的畅快&#xff0c;外网访问必不可少。所以我之前研究了下&#xff0c;打家里的电信快带打通了外网。 一般nas的服务商基本都会…

ORACLE创建用户之后查询不到创建的用户

CREATE USER hr1 IDENTIFIED BY hr123DEFAULT TABLESPACE test_spacTEMPORARY TABLESPACE temp_spacQUOTA UNLIMITED ON test_spac;如果是按照这样创建的&#xff0c;Oracle 会将 hr1 转换为大写&#xff0c;因此在数据库中存储的用户名为 HR1 查询的时候要这样编写sql语句 S…

【Linux】Ansible集中化运维工具(详解)安装、常用模块、playbook脚本

文章目录 一、Ansible安装及远程控制1、关闭防火墙和SELinux2、安装ansible3、配置SSH无密码登录1、在管理机上生成一对密钥2、将公钥下发到远程主机3、保管密钥 4、主机目录 二、常用模块1、setup模块2、copy模块3、file模块4、shell模块5、script模块6、ping模块7、group模块…

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类网络连接中包含环路的 神经网络的总称。 给定一个序列&#xff0c;RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度&#xff0c;历史状态被循环累积&#xff0c;并作为…

Flink处理无界数据流

Apache Flink 是一个专为处理无界和有界数据流而设计的流处理框架。处理无界数据流的关键在于能够实时处理不断到达的数据&#xff0c;并且保证处理的正确性和高效性。以下是Flink处理无界数据流的主要步骤和技术&#xff1a; 1. 数据源 (Source) 无界数据流的第一个步骤是从…

oracle服务器意外宕机数据库启动失败故障处理记录

客户反馈由于服务器意外宕机&#xff0c;导致数据库业务不能正常运行&#xff0c;经过一番努力后通过redo日志恢复成功&#xff01; 故障描述&#xff1a;ORA-00600: 内部错误代码, 参数: [krctcr_4], [1179922061], [1179942042], [], [], [], [], [], [], [], [], [] 现将主要…

第二十九篇——线性代数:“矩阵”到底怎么用?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 数学中的线性代数&#xff0c;再生活中的落地和应用&#xff0c;是我这个…

nodejs:下载,安装,系统环境配置,更换镜像

​​​​下载 地址&#xff1a;https://nodejs.org/zh-cn/download/prebuilt-installer 安装包 开始安装 安装完成 给文件夹添加权限 创建两个文件夹 node_cache node_global 更新环境变量 修改环境变量&#xff0c;新的全局模块路径&#xff0c;这样在任何位置运行命令时都…

AMD显卡低负载看视频掉驱动(chrome edge浏览器) 高负载玩游戏却稳定 解决方法——关闭MPO

2024.11.9更新 开关mpo ulps 感觉有用但是还是掉驱动&#xff0c;现在确定是window顶驱动问题 按网上的改注册表和组策略会让自己也打不上驱动 目前感觉最好的办法就是&#xff0c;重置此电脑&#xff0c;然后你就摆着电脑挂个十分钟半小时别动&#xff0c;一开始他是不显示…

案例精选 | 河北省某检察院安全运营中异构日志数据融合的实践探索

河北省某检察院是当地重要的法律监督机构&#xff0c;肩负着维护法律尊严和社会公平正义的重要职责。该机构依法独立行使检察权&#xff0c;负责对犯罪行为提起公诉&#xff0c;并监督整个诉讼过程&#xff0c;同时积极参与社会治理&#xff0c;保护公民权益&#xff0c;推动法…

srs http-flv处理过程

目录 处理tcp请求,创建HttpConn 解析 http request创建consumer 读取consumer数据转封装为flv 处理tcp请求,创建HttpConn 调用堆栈如下: srs!SrsHttpConn::SrsHttpConn(ISrsHttpConnOwner*, ISrsProtocolReadWriter*, ISrsHttpServeMux*, std::__1::basic_string<ch…

解题--多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 此算法用…

【论文阅读】火星语义分割的半监督学习

【论文阅读】火星语义分割的半监督学习 文章目录 【论文阅读】火星语义分割的半监督学习一、介绍二、联系工作3.1Deep Learning for Mars3.2 数据集可以分为三类&#xff1a;3.3 半监督学习 三、提出的火星图像分割数据集四、方法四、实验 S 5Mars: Semi-Supervised Learning …

springboot集成onlyoffice(部署+开发)

前言 最近有个项目需求是实现前端页面可以对word文档进行编辑&#xff0c;并且可以进行保存&#xff0c;于是一顿搜索&#xff0c;找到开源第三方onlyoffice&#xff0c;实际上onlyOffice有很多功能&#xff0c;例如文档转化、多人协同编辑文档、文档打印等&#xff0c;我们只用…

蓝桥杯 懒洋洋字符串--字符串读入

题目 代码 #include <iostream>using namespace std;int main(){int n;cin>>n;char s[210][4];int ans0;for(int i0;i<n;i){scanf("%s",s[i]);}for(int i0;i<n;i){char as[i][0];char bs[i][1];char cs[i][2];// cout<<a<< <<b…