JS中检测数据类型的几种方式及优缺点小结
作者:碧霄中游 发布时间:2024-04-16 09:14:41
1、typeof 用来检测数据类型的运算符
typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
局限性:
1)typeof null ->"object"
2)检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
console.log(typeof [12, 23]);//->"Object"
2、instanceof/constructor
检测某一个实例是否属于某一个类
使用instanceof/constructor可以检测数组和正则
console.log([] instanceof Array);//->true
console.log(/^$/ instanceof RegExp);//->true
console.log([] instanceof Object);//->true
console.log([].constructor === Array);//->true
console.log([].constructor === Object);//->false
constructor可以避免instanceof检测数组的时候,用Object也是true的问题
console.log({}.constructor === Object);//true<br>console.log([].constructor === Object);//false
局限性:
1)用instanceof检测的时候,只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到它),检测出来的结果都是true
var oDiv = document.getElementById("div1");
//HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object
console.log(oDiv instanceof HTMLDivElement);//->true
console.log(oDiv instanceof Node);//->true
console.log(oDiv instanceof Object);//->true
2)基本数据类型的值是不能用instanceof来检测的
console.log(1 instanceof Number);//->false
数组创建的两种方式(对象、正则、函数...)
对于引用数据类型来说,我们两种方式创建出来的都是所属类的实例,而且都是对象数据类型的值,是没有区别的
var ary = [];
var ary = new Array;
对于基本数据类型来说,虽然不管哪一种方式创建出来的都是所属类的一个实例(在类的原型上定义的方法都可以使用),但是字面量方式创建出来的是基本数据类型,而实例方式创建出来的是对象数据类型
var num1 = 1;
var num2 = new Number("1");
console.log(typeof num1,typeof num2);//->"number" "object"
3)在类的原型继承中,instanceof检测出来的结果其实是不准确的
function Fn() {}
var f = new Fn;
console.log(f instanceof Array);//->false f不是一个数组,它就是一个普通的实例(普通的对象)
虽然Fn继承了Array,但是f没有length和数字索引哪些东西,所以f应该不是数组才对,但是用instanceof检测的结果却是true,因为f虽然不是数组,但是在f的原型链上可以找到Array
function Fn() {
}
Fn.prototype = new Array;//->Fn子类继承了Array这个父类中的属性和方法
var f = new Fn;
console.log(f instanceof Array);//->true
3、Object.prototype.toString.call(value) ->找到Object原型上的toString方法,让方法执行,并且让方法中的this变为value(value->就是我们要检测数据类型的值)
Object.prototype.toString常用来判断对象值属于哪种内置属性,它返回一个JSON字符串——"[object 数据类型]"。
由于许多引用类型都重写了Object继承来的的toStrong方法,所以我们通常使用call或者apply借用Object.prototype.toString函数来判断数据类型。
当然,这样调用的默认前提是Object.prototype.toString没有被重写。
toString:一个方法,转换为字符串数据类型用的方法
每一个数据类型所属类的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype...
除了Object上的toString,其他类原型上的toString都是把当前的数据值转换为字符串的意思
null和undefined比较的特殊:他们所属类Null/Undefined的原型上也有toString,只不过不让我们用而已,不仅如此其实类的原型都给屏蔽了
HTML元素对象的toString:虽然它的原型链很长,但是在其它类的原型上都没有toString,只有在最底层Object.prototype这上才有
var oDiv = document.getElementById("div1");
oDiv.toString(); //->调用的其实也是Object.prototype.toString...
//alert、document.write 这两种输出的方式其实都是把要输出的内容先转换为字符串,然后再输出的<br>
alert([]); //->""
alert(true); //->"true"
alert({}); //->这个就要调用Object.prototype上的toString了 ->"[object Object]"
//定义toString变量是为了简便书写,同时降低作用域链检索的性能损耗
var toString = Object.prototype.toString;
console.log(toString.call(1));//[object Number]
console.log(toString.call(undefined));//[object Undefined]
console.log(toString.call(null));//[object Null]
console.log(toString.call(false));//[object Boolean]
console.log(toString.call("s"));//[object String]
console.log(toString.call({}));//[object Object]
console.log(toString.call(/[a]/g));//[object RegExp]
console.log(toString.call(function(){}));//[object Function]
is系列函数的简易实现
在明白数据类型怎么检测后,下面我们来简单实现is系列检测函数。
var dataType = {
'[object Null]' : 'null',
'[object Undefined]' : 'undefiend',
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regexp',
'[object Object]' : 'object',
'[object Error]' : 'error'
},
toString = Object.prototype.toString;
function type(obj) {
return dataType[toString.call(obj)];
}
//生成is系列函数
function createValidType() {
for(var p in dataType) {
var objType = p.slice(8, -1);
(function(objType) {
window['is' + objType] = function(obj) {
return type(obj) === objType.toLowerCase();
}
})(objType)
}
}
createValidType();
console.log(isObject({}));//true
console.log(isDate(new Date()));//true
console.log(isBoolean(false));//true
console.log(isString(1));//false
console.log(isError(1));//false
console.log(isError(new Error()));//true
console.log(isArray([]));//true
console.log(isArray(1));//false
上面代码里分别实现了isNull、isUndefined、isBoolean、isNumber、isString、isFunction、isArray、isDate、isRegExp、isObject、isError这11个检测函数。同时也实现了type函数,用以检测数据类型。
console.log(type({}));//"object"
console.log(type(new Date()));//"date"
console.log(type(false));//"boolean"
console.log(type(1));//"number"
console.log(type(1));//"number"
console.log(type(new Error()));//"error"
console.log(type([]));//"array"
console.log(type(1));//"number"
createValidType函数巧用闭包保存数据状态的特性,批量生成is系列函数。
以上所述是小编给大家介绍的JS中检测数据类型的几种方式及优缺点小结网站的支持!
来源:http://www.cnblogs.com/allenlei/archive/2016/12/11/6161022.html
猜你喜欢
- 映射类型 — dict字典可用多种方式来创建:使用花括号内以逗号分隔键: 值对的方式: {‘jack
- 一、Echarts简介Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而
- upyter Notebook已经逐渐取代IDE成为了多平台上写简单Python脚本或应用的几家选择。Jupyter Notebook可以通
- 如何写入超长的字符串? 我们可使用Command写入,来完成大容量的字符串的操作: dim&n
- Python 变量类型 变量存储在内存中的值。这就意味着在创建变量时会
- 本文实例讲述了python中split方法用法。分享给大家供大家参考。具体分析如下:split 是非常重要的字符串方法,它是join的逆方法
- SQLServer中有五种约束,Primary Key约束、Foreign Key约束、Unique约束、Default约束和Check约束
- 前言:我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x,但是目前无论是学习还是使用python,python
- 运行平台: WindowsPython版本: Python3.xIDE: Spyder今天我们想实现的功能是对单个目标图片的提取如图所示:图
- 1。注意用SQL分析器可以看select出来的东西select right(convert(varchar(30),getdate(),12
- 1. grpc开源包的安装# conda$ conda create -n grpc_env python=3.9# install grp
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- 1.元字符: . 它匹配除了换行字符外的任何字符,在 alternate 模式(re.DOTALL)下它甚至可以匹配换行 ^ 匹配行首。除非
- 简介模拟登录淘宝已经不是一件新鲜的事情了,过去我曾经使用get/post方式进行爬虫,同时也加入IP代理池进行跳过检验,但随着大型网站的升级
- zip通常用于将两个列表合并在一起以同时进行迭代遍历注意:直接使用zip输出结果为<zip at 0x1d72cf30bc8>,
- 画之前肯定要知道规格图,我找了一个大致的图。参考图片:绘制大星的方法很简单,五角星的补角是144度。绘制小五角星有点麻烦,因为我国国旗上的小
- 一、python中进程间通信业务场景:在当前遇到的业务场景中,我们需要启一个间隔任务,这个间隔任务跑一个算法,然后把算法的结果进行一些处理,
- 一、Python包python包在开发中十分常见,一般通过导入包含特定功能的python模块包进行使用。当然,也可以自己创建打包模块,然后发
- 昨天Steve的 讲座涉及了一个我从没考虑的领域,在没法优化后台服务器的时候,如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里,我
- 前几天,我们Python猫交流学习群 里的 M 同学提了个问题。这个问题挺有意思,经初次讨论,我们认为它无解。然而,我认为它很有价值,应该继