[javascript核心-09] 彻底解决js中的类型检测方案

typeof

  1. 基于数据类型的值(二进制)进行检测
  2. 返回结果为字符串
  3. typeof NaN结果为number
  4. typeof null结果为Object.对象存储以000开头,而null也是如此。
  5. typeof不能细分对象,结果都是Object
  6. typeof function(){}结果为function

instanceof

  1. 检测某个构造函数是否出现在某实例的原型链上
  2. 返回结果为boolean值
  3. [] instanceof Arraytrue, [] instanceof Objecttrue。原型可手动修改,因此检测结果也会被篡改。
  4. 不能检测基本数据类型。1 instanceof Numberfalse

constructor

  1. 检测某个函数是否是某实例的构造函数
  2. 返回结果为boolean值
  3. 可以检测基本数据类型
  4. constructor可手动修改,因此检测结果也会被篡改。

Object.prototype.toString.call()

  1. 返回当前实例所属类的信息
Object.prototype.toString.call(1) // '[object Number]'
Object.prototype.toString.call('1') // '[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(Symbol(1)) // '[object Symbol]'
Object.prototype.toString.call(/^/) // '[object RegExp]'
Object.prototype.toString.call(new Date) // '[object Date]'
Object.prototype.toString.call([]) // '[object Array]'
Object.prototype.toString.call({}) // '[object Object]'
Object.prototype.toString.call(()=>{}) // '[object Function]'
Object.prototype.toString.call(1n) // '[object BigInt]'
Object.prototype.toString.call(new Error()) // '[object Error]'

最佳实践

  1. typeof 可以检测基本数据类型的值(除 Null 以外)
  2. 其他的类型可以用Object.prototype.toString.call()

封装数据类型检测的方法

目标:能够对Number,String,Boolean,Null,Undefined,Symbol,RegExp,Date,Array,Object,Function,Error,BigInt全部类型值进行细分检测。

类型检测函数

function toType(obj){const classType = {};['Number','String','Boolean','Null','Undefined','Symbol','RegExp','Date','Array','Object','Function','Error','BigInt'].forEach(name => {classType[`[object ${name}]`] = name.toLowerCase()});function _toType(obj){if(obj == null) return obj + ''return typeof obj === 'object' || typeof obj === 'function' ? classType[toString.call(obj)] || 'object' : typeof obj}return _toType(obj)
}

进行测试:

// 测试
[1,'1',true,null,undefined,Symbol(1),/^/,new Date(),[],{},()=>{},new Error(),100n].forEach(obj => {console.log(toType(obj))
})/*
number
string
boolean
null
undefined
symbol
regexp
date
array
object
function
error
bigint
*/

建立映射表进行比对:

const map = [[1,'number'],['1','string'],[true,'boolean'],[null,'null'],[undefined,'undefined'],[Symbol(1),'symbol'],[/^/,'regexp'],[new Date(),'date'],[[],'array'],[{},'object'],[()=>{},'function'],[new Error(),'error'],[100n,'bigint']
]for (const tuple of map) {console.log(toType(tuple[0]) === tuple[1])
}/*
true
true
true
true
true
true
true
true
true
true
true
true
true
*/

本文github地址:JavaScript_Everything 大前端知识体系与面试宝典,从前端到后端,全栈工程师,成为六边形战士

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

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

相关文章

Windows沙盒的安装与配置

沙盒安装 1、打开控制面板 2、选择程序与功能 3、勾选Windows 沙盒,然后点击确定,等待安装完成即可。 沙盒配置 Windows 沙盒支持简单的配置文件,这些文件为沙盒提供最少的自定义参数集。 此功能可与 Windows 10 内部版本 18342 或 Windows…

使用selenium模拟登录解决滑块验证问题

目录 1.登录入口 2.点击“账号密码登录” 3.输入账号、密码并点击登录 4.滑块验证过程 5.小结 本次主要是使用selenium模拟登录网页端的TX新闻,本来最开始是模拟请求的,但是某一天突然发现,部分账号需要经过滑块验证才能正常登录&#x…

wpf中窗体的移动通用解决方法

需求背景:设置了不允许改变窗口大小(在Window标签中设置ResizeMode为NoResize),之后窗口无法被拖动 1.在Window标签中添加’MouseLeftButtonDown‘,并且生成事件处理程序 2.到后台的相应事件处理程序中添加 base.OnMouseLeftButtonDown(e); …

python pytest脚本执行工具

pytest脚本执行工具 支持获取当前路径下所有.py脚本 添加多个脚本,一起执行 import tkinter as tk from tkinter import filedialog import subprocess import os from datetime import datetimedef select_script():script_path filedialog.askopenfilename(fil…

ChatGPT的使用指南:探索与利用先进对话模型的技巧与方法

ChatGPT是一种先进的对话生成模型,通过模拟自然语言交互,能够与人类用户进行流畅的对话。为了帮助用户更好地利用ChatGPT,本文将介绍ChatGPT的基本用法、优化技巧以及注意事项,以便读者能够最大程度地发挥其潜力。 基本用法 输入…

限时购LimitTimeApplication

目录 1 限时购LimitTimeApplication 1.1 商家删除限时购 1.2 根据商品Id获取一个限时购的详细信息 1.3 获取详情 限时购LimitTimeApplication /// <summary>

SQL小示例

SQL示例 一、前言 安装MySQL 启动MySQL MySQL is configured to only allow connections from localhost by defaultTo connect run:mysql -u rootTo start mysql now and restart at login:brew services start mysql下载客户端工具Sequel Ace并登录 二、示例SQL where过…

windows安装使用 tesseract-ocr

OCR&#xff08;Optical character recognition&#xff0c;光学字符识别&#xff09;是一种将图像中的手写字或者印刷文本转换为机器编码文本的技术。 tesseract-ocr 是由Google开发&#xff0c;支持100多种语言 文档 tessdoc&#xff1a; https://tesseract-ocr.github.io…

浅谈炼钢厂能源计量管理系统的设计与应用

安科瑞 华楠 摘要: 从能源计量和管理的角度&#xff0c;论述了炼钢厂的能源计量管理系统的基本组成及功能。该系统的建立&#xff0c;将使炼钢厂能源介质的计量管理工作实现自动采集、瞬时监测、故障报警、能流监视&#xff1b;完成报表统计、离线输入、成本分析、预测参考等功…

【Java项目实战-牛客社区】--idea创建springboot工程

①. 创建springboot工程&#xff0c;并勾选web开发相关依赖。 。配置Maven ②. 定义Controller类&#xff0c;添加方法 hello。 ③. 运行测试1 使用Spring Initializr方式构建Spring Boot项目 Spring Initializr是一个Web应用&#xff0c;它提供了一个基本的项目结构&#xff…

ansible特点、工具合集、搭建、命令合集

目录 一、ansible特点 二、ansible应用 三、ansible搭建 1、 实验环境&#xff0c;准备三台服务器&#xff0c;关闭防火墙 2、在ansible&#xff08;192.168.1.12&#xff09;服务器上yum安装ansible 3、创建ssh免交互登录 四、ansible配置 五、ansible命令 1&#xf…

手机外壳缺陷视觉检测软硬件方案

单独使用一种光源效果图 同轴光会出现亮度不够的情况&#xff1b;回形面光因为光源中间的圆孔会使图像有阴影&#xff0c;造成图像效果不均衡&#xff0c;所以不采用单独光源打光 使用同轴回形面光源效果图 回形光源照亮产品要寻找的边缘&#xff0c;同轴光源起到补光的作用&a…

SpringCloud学习路线(6)—— 远程调用HTTP客户端Feign

一、Feign替代RestTemplate RestTemplate示例 String url "http://userservice/user/" order.getUserId(); User user restTemplate.getForObject(url, User.class);RestTemplate的缺陷&#xff1a; 代码可读性差&#xff0c;编码体验不统一。参数复杂URL难以维…

需求分析案例:全局错误码设计

本文介绍了我在一些业务系统中遇到的错误提示问题&#xff0c;以及进行需求分析和设计实现的过程&#xff0c;欢迎进行交流和指点&#xff0c;一起进步。 1、需求起源 作为程序员&#xff0c;或多或少&#xff0c;都经历过如下场景&#xff1a; 场景1&#xff1a; 产品经理&a…

智慧校园能源管控系统

智慧校园能源管控系统是一种搭载了物联网技术、大数据技术、大数据等技术性智能化能源管理方法系统&#xff0c;致力于为学校提供更高效、安全性、可信赖的能源供应管理和服务。该系统包括了校内的电力工程、水、气、暖等各类能源&#xff0c;根据对能源的实时检测、数据统计分…

Django 创建应用

第一步&#xff1a;python.exe .\manage.py startapp submit_score 创建后生成的submit_score文件夹&#xff0c;里面文件如下&#xff1a; PS E:\code\portrait> python.exe .\manage.py startapp submit_score PS E:\code\portrait> ls目录: E:\code\portraitMode …

文心一言 VS 讯飞星火 VS chatgpt (63)-- 算法导论6.5 2题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;63&#xff09;-- 算法导论6.5 2题 二、试说明 MAX-HEAP-INSERT(A&#xff0c;10)在堆A(15&#xff0c;13&#xff0c;9&#xff0c;5&#xff0c;12&#xff0c;8&#xff0c;7&#xff0c;4&#xff0c;0&#xff0c;6&#xf…

leetcode 13. 罗马数字转整数

罗马转整数要考虑先后顺序 当排在前面的罗马数字大于后面的罗马数字&#xff0c;就正常化成阿拉伯数字相加 如果小&#xff0c;那就是将小的数转成负数&#xff0c;再加就ok。 但也是需要模拟的&#xff0c;就是哪一字母代表哪个数值。 class Solution:def romanToInt(self, s…

【业务功能篇48】后端接口开发的统一规范

业务背景&#xff1a;日常工作中&#xff0c;我们开发接口时&#xff0c;一般都会涉及到参数校验、异常处理、封装结果返回等处理。而我们项目有时为了快速迭代&#xff0c;在这方面上有所疏忽&#xff0c;后续导致代码维护比较难&#xff0c;不同的开发人员的不同习惯&#xf…

2.3 QLayout一探究竟(上)

2.布局 2.1 布局简介 2.2 Qt四大布局介绍及使用方法 2.2.1 QBoxLayout讲解及示例 2.2.1.1 QHBoxLayout介绍 2.2.1.1 QVBoxLayout介绍 2.2.2 QFormLayout讲解及示例 2.2.3 QGridLayout讲解及示例 2.2.4 QStackedLayout讲解及示例 2.3 QLayout一探究竟 2.3.1 布局的基础单元-QL…