JS中数据类型的正确判断方法实例
作者:so丶简单 发布时间:2024-04-16 09:05:35
目录
前言
typeof是否能正确判断类型?
instanceof是否能正确判断类型?
Object.prototype.toString.call()
constructor
Array.isArray()
正则判断
总结
前言
Javascript是一门动态类型的语言,一个变量从声明到最后使用,可能经过了很多个函数,而数据类型也会发生改变,那么,对一个变量的数据类型判断就显得尤为重要。
typeof是否能正确判断类型?
typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。
由于由于历史原因,在判断原始类型时,typeof null会等于object。而且对于对象(Object)、数组(Array)来说,都会转换成object。例子如下:
typeof 1 // 'number'
typeof "1" // 'string'
typeof null // 'object'
typeof undefined // 'undefined'
typeof [] // 'object'
typeof {} // 'object'
typeof function() {} // 'function'
所以我们可以发现,typeof可以判断基本数据类型,但是难以判断除了函数以外的复杂数据类型。于是我们可以使用第二种方法,通常用来判断复杂数据类型,也可以用来判断基本数据类型。
对于返回值为object,有三种情况:
值为null
值为object
值为array
对于null,我们可以直接用===来进行判断,那么数组和对象呢?不急,我们接着说。
instanceof是否能正确判断类型?
instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。
instanceof是通过原型链来判断的,但是对于对象来说,Array也会被转换成Object,而且也不能区分基本类型string和boolean。可以左边放你要判断的内容,右边放类型来进行JS类型判断,只能用来判断复杂数据类型,因为instanceof 是用于检测构造函数(右边)的 prototype 属性是否出现在某个实例对象(左边)的原型链上。例如:
function Func() {}
const func = new Func()
console.log(func instanceof Func) // true
const obj = {}
const arr = []
obj instanceof Object // true
arr instanceof Object // true
arr instanceof Array // true
const str = "abc"
const str2 = new String("abc")
str instanceof String // false
str2 instanceof String // true
单独使用instanceof好像也是不行的,但是我们对于typeof已经得出结论,不能区分数组和对象,那么,我们结合下instanceof,来写一个完整的判断逻辑
function myTypeof(data) {
const type = typeof data
if (data === null) {
return 'null'
}
if (type !== 'object') {
return type
}
if (data instanceof Array) {
return 'array'
}
return 'object'
}
Object.prototype.toString.call()
上面我们通过typeof和instanceof实现了一版类型判断,那么是否有其他渠道,使我们的代码更加简洁吗?答案就是使用Object.prototype.toString.call()。
每个对象都有一个toString()方法,当要将对象表示为文本值或以预期字符串的方式引用对象时,会自动调用该方法。默认情况下,从Object派生的每个对象都会继承toString()方法。如果此方法未在自定义对象中被覆盖,则toString()返回
Object.prototype.toString.call(new Date()) // [object Date]
Object.prototype.toString.call("1") // [object String]
Object.prototype.toString.call(1) // [object Numer]
Object.prototype.toString.call(undefined) // [object Undefined]
Object.prototype.toString.call(null) // [object Null]
所以综合上述知识点,我们可以封装出以下通用类型判断方法:
function myTypeof(data) {
var toString = Object.prototype.toString;
var dataType = data instanceof Element ? "element" : toString.call(data).replace(/\[object\s(.+)\]/, "$1").toLowerCase()
return dataType
};
myTypeof("a") // string
myTypeof(1) // number
myTypeof(window) // window
myTypeof(document.querySelector("h1")) // element
constructor
constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型。
注意:
1.null和undefined没有constructor;
2.判断数字时使用(),比如 (123).constructor,如果写成123.constructor会报错
3.constructor在类继承时会出错,因为Object被覆盖掉了,检测结果就不对了
function A() {};
function B() {};
A.prototype = new B();
console.log(A.constructor === B) // false
var C = new A();
console.log(C.constructor === B) // true
console.log(C.constructor === A) // false
C.constructor = A;
console.log(C.constructor === A); // true
console.log(C.constructor === B); // false
Array.isArray()
Array.isArray() 用于确定传递的值是否是一个 Array。如果对象是 Array ,则返回true,否则为false。
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false
正则判断
我们可以把对象和数组转成一个字符串,这样就可以做格式判断,从而得到最终的类型。
function myTypeof(data) {
const str = JSON.stringify(data)
if (/^{.*}$/.test(data)) {
return 'object'
}
if (/^\[.*\]$/.test(data)) {
return 'array'
}
}
来源:https://juejin.cn/post/7000300249235357709
猜你喜欢
- 开窗函数:在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成。为了解决这些问题,在
- 数据库系统的安全性包括很多方面。由于很多情况下,数据库服务器容许客户机从网络上连接,因此客户机连接的安全对MySQL数据库安全有很重要的影响
- 写在前面周日下午在家学习,看到一个关于切片的问题,在网上找了一些资料,做个总结。上代码func main() {sl := make([]i
- 1.视图的概述 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据。视图将一个查询的结果作为一个表来使用,因此视图可
- 前言emmm…9月1日开学季,手头只有红底证件照,但是学院要求要蓝底,这可咋办呢。懒得下ps了。自己撸起来吧。方法一:
- 1.Case函数的用法 (1)使用类似:switch-case与if-else if。 (2)语法: case [字段] when 表达式
- 一、xlsxwriter 基本用法,创建 xlsx 文件并添加数据官方文档:http://xlsxwriter.readthedocs.or
- MySQL设置当前时间为默认值的问题我们经常会遇到,下面就为您介绍MySQL设置当前时间为默认值的实现全步骤,希望对您能有所启迪。数据库:t
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- 本文为 djangorestframework-simplejwt 使用记录。(官方文档) 1. 安装 pip inst
- 索引的概念MySQL索引是一种用于加速数据库查询的数据结构,它类似于书籍的目录,能够快速指导我们找到需要的信息。MySQL索引可以根据一定的
- 近日,某个QQ 群里的一个朋友提出一个问题,如何将一个DB 的表结构同步给另一个DB。针对这个问题,我进行了思考与实践,具体的实现代码如下所
- 一、怎么样取得最新版本的MySQL?要安装MySQL,首先要当然要取得它的最新版本,虽然大家都知道在FreeBSD的Packages中可以找
- logging分为4个模块: loggers, handlers, filters, and formatters.●loggers: 提供
- 对于添加一个文件的路径我用的第一个方法就是sys.path.append()博主比较懒,就直接截图了啊对于上级文件路径和再上一级的路径可以直
- 概述今天主要分享下mysql数据库应该如何正确的删除binlog日志,这里要注意不要强制使用rm命令进行清除。否则mysq-bin.inde
- 目录一、概念描述二、序列的可迭代性三、经典的迭代器模式四、生成器也是迭代器五、实现惰性迭代器六、使用生成器表达式简化惰性迭代器总结一、概念描
- 在网站中经常会生成表格,CSV和Excel都是常用的报表格式,CSV相对来说比较简单,如果大家有疑问我会相继发布一些CSV的实例,这里主要介
- 相信很多人在浏览网页时,经常会碰到需要输入验证码才可以继续浏览的情况吧,遇到这种问题,大多数人只能进行繁琐的注册验证,今天小编教大家只要使用
- 本文实例讲述了C#查询SqlServer数据库并返回单个值的方法。分享给大家供大家参考。具体实现方法如下:static public str