JS数据类型判断的几种常用方法
JavaScript 中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十几种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助。
typeof 判断(最常用)
typeof
是 JS 提供的一个运算符,专门用来检测一个变量的类型 。 typeof
有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。
function doSomething() { console.log('Hello World!'); } console.log(typeof 1); // number console.log(typeof 'Hello'); // string console.log(typeof []); // object console.log(typeof {}); // object console.log(typeof doSomething); // function console.log(typeof true); // boolean console.log(typeof new Date()); // object console.log(typeof new RegExp()); // object console.log(typeof JSON.stringify({ name: 'zhencanhua' })); // string console.log(typeof null); // object console.log(typeof undefined); // undefined console.log(typeof (new Error('error!'))); // object console.log(typeof a); // undefined console.log(typeof Symbol()); // symbol console.log(typeof new Set()); // object console.log(typeof new Map()); // object
从上面打印结果可以看出,typeof
不能区分引用型数据的类型和 null。另我们可以使用 Array.isArray(arr) 将数组类型的数据从中筛选出来。
instanceof 判断(了解)
instanceof
用来检测构造函数的 prototype
属性是否出现在某个实例对象的原型链上。 语法:object(实例对象) instanceof constructor(构造函数)。是的话返回 true,否则返回 false。所以, instanceof
运算符只能用作对象的判断。 针对 typeof
不能判断的引用型数据,我们可以使用 instanceof
运算符。
let arr1 = [1, 2, 3]; let obj1 = { name: '小明' }; function Persion() { } let persion1 = new Persion(); console.log(arr1 instanceof Array); // true console.log(arr1 instanceof Object); // true,Array 是Object的子类 console.log(obj1 instanceof Object); // true console.log(obj1 instanceof Array); // false console.log(Persion instanceof Function, Persion instanceof Object); // true true console.log(null instanceof Object); // false console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true // String对象和Date对象都属于Object类型 let str1 = 'Hello'; let str2 = new String(); let str3 = new String('你好'); let myDate = new Date(); console.log(str1 instanceof String, str1 instanceof Object); // false, false console.log(str2 instanceof String, str2 instanceof Object); // true, true console.log(str3 instanceof String, str3 instanceof Object); // true, true console.log(myDate instanceof Date, myDate instanceof Object); // true, true
从上面的判断可以看出,instanceof
的使用限制很多,而且还不能很清晰方便的判断出一个实例是数组还是对象或方法。
针对上面方法的弊端,我们可以使用 Object.prototype上的原生toString()方法来检测数据的类型。
Object.prototype.toString.call() 判断(最靠谱)
Object 是 JS 提供的原生对象, Object.prototype.toString对任何变量都会返回这样一个字符串"[object class]",class 就是 JS 内置对象的构造函数的名字。 call是用来改变调用函数作用域的。
Object.prototype.toString() 在toString方法被调用时执行下面的操作步骤:
- 获取this对象的[[Class]]属性的值。(所以使用call来改变this的指向)
- 将字符串"[object ",第一步获取的值, 以及 "]"拼接成新的字符串并返回。
[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性。在规范中,[[Class]]是这么定义的: 内部属性的描述, [[Class]] 是一个字符串值,表明了该对象的类型。
读了上面的说明,用 call 的关键地方就在第1步,获取的是 this 对象,不加 call 改变作用域时 this 指向的是Object.prototype。
function doSomething() { console.log('Hello World!'); } // 使用Object.prototype.toString.call来判断 console.log(Object.prototype.toString.call(1)); // [object Number] console.log(Object.prototype.toString.call('Hello')); // [object String] console.log(Object.prototype.toString.call(false)); // [object Boolean] console.log(Object.prototype.toString.call({})); // [object Object] console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array] console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error] console.log(Object.prototype.toString.call(new Date())); // [object Date] console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp] console.log(Object.prototype.toString.call(doSomething)); // [object Function] console.log(Object.prototype.toString.call(null)); // [object Null] console.log(Object.prototype.toString.call(undefined)); // [object Undefined] console.log(Object.prototype.toString.call(JSON.stringify({ name: 'zhencanhau' }))); // [object String] console.log(Object.prototype.toString.call(Math)); // [object Math] console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol] console.log(Object.prototype.toString.call(new Set())); // [object Set] console.log(Object.prototype.toString.call(new Map())); // [object Map]
但在实际应用时我们只想获取返回的结果中数组的第二项,比如"[object Number]",我们只想要Number这段字符,那么我们可以写个函数进行过滤:
// 通过定义一个公共函数获取数据类型 function getTypeName(val) { let str = Object.prototype.toString.call(val); return /^\[object (.*)\]$/.exec(str)[1]; } console.log(getTypeName(false)); // Boolean console.log(getTypeName()); // Undefined console.log(getTypeName(null)); // Null
上面的问题完美解决。
constructor 判断(比较常用)
每一个对象实例都可以通过 constrcutor
对象来访问它的构造函数 。JS 中内置了一些构造函数:Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor
是否与其构造函数相等来判断数据的类型。
var arr = []; var obj = {}; var date = new Date(); var num = 110; var str = 'Hello'; var getName = function(){}; var sym = Symbol(); var set = new Set(); var map = new Map(); arr.constructor === Array; // true obj.constructor === Object; // true date.constructor === Date; // true str.constructor === String; // true getName.constructor === Function; // true sym.constructor === Symbol; // true set.constructor === Set; // true map.constructor === Map // true
但是这种方式仍然有个弊端,就是 constructor
所指向的的构造函数是可以被修改的。
function Name(name) { this.name = name; } function Stuent(age) { this.age = age; } // 将构造函数Name的实例赋给Student的原型,Student的原型的构造函数会发生改变,将不再指向自身。 Stuent.prototype = new Name('张三'); Stuent.prototype.constructor === Name; // true Stuent.prototype.constructor === Stuent; // false
以上就是我在项目中用到过的数据类型的判断方法,具体使用哪一种,还需要根据自己的实际需求来判断选择。
到此这篇关于JS数据类型判断的几种常用方法的文章就介绍到这了,更多相关JS 数据类型判断内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
php中浮点型(float)和整型(integer)数据类型详解
文章分析了关于php中浮点型(float)和整型(integer)数据类型的用法区别以及在那种情况下会出现数据长度不够。 取值只能为True或者False,当其他类型转化为boolean类...2016-11-25- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要是对c#中数据类型占用的字节数进行了详细的介绍。需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20