JS中检测数据类型的四种方法
1、typeof 用来检测数据类型的运算符
->typeof value
->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
->局限性:
1)typeof null ->"object"
2)检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
->console.log(typeof typeof typeof [12, 23]);//->"string" 两个或者多个typeof一起使用时,返回值一定是"string"; 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); 局限性:
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->就是我们要检测数据类型的值) ->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这两种输出的方式其实都是把要输出的内容先转换为字符串,然后在输出的
alert([]);//->""
alert(true);//->"true"
alert({});//->这个就要调用Object.prototype上的toString了 ->? 4、Object.prototype.toString是用来返回对应值的所属类信息的
var oDiv = document.getElementById("div1");
var obj = {};
oDiv.toString();//->"[object HTMLDivElement]"
obj.toString();//->"[object Object]" 原理:
->obj首先找到原型上toString方法,并且让toString执行,toString方法执行的时候,里面的this是obj,同理oDiv.toString(),toString方法中的this是oDiv
->执行toString方法,返回当前方法中this的数据类型 ->"[object 当前this的直属类]",例如:"[object HTMLDivElement]"/"[object Object]" Object.prototype.toString.call(12);//->执行原型上的toString,并且让方法中的this变为12,也就相当于返回的是12的直属类的信息 ->"[object Number]"
Object.prototype.toString.call("zhufeng");//->"[object String]"
依此类推:
"[object Boolean]"/"[object Null]"/"[object Undefined]"/"[object Object]"/"[object Array]"/"[object RegExp]"/"[object Function]"/"[object Math]"/"[object Date]"...
->所有的数据类型都可以用它来检测,而且非常的精准 value:要检测数据类型的值 type:判断是否为这个数据类型
function isType(value, type) {
var res = Object.prototype.toString.call(value);//-> "[object 直属类]"
return res === "[object " + type + "]";
98->"[object Array]"
字符串拼接->"[object Array"]"
两个相等了返回true
} 优化:->忽略第二个传递进来参数的大小写
function isType(value, type) {
var reg = new RegExp("^\\[object " + type + "\\]$", "i");
return reg.test(Object.prototype.toString.call(value));
}
var ary = [];x
var flag = isType(ary, "array");
console.log(flag);//->true说名是数组,false说明不是数组 ->true
flag = isType(1, "string");
console.log(flag);//->false ~function () {
var utils = {}, numObj = {
isNum: "Number",
isStr: "String",
isBoo: "Boolean",
isNul: "Null",
isUnd: "Undefined",
isObj: "Object",
isAry: "Array",
isFun: "Function",
isReg: "RegExp",
isDate: "Date"
}, isType = function () {
var outerArg = arguments[0];
return function () {
var innerArg = arguments[0], reg = new RegExp("^\\[object " + outerArg + "\\]$", "i");
return reg.test(Object.prototype.toString.call(innerArg));
}
};
for (var key in numObj) {
if (numObj.hasOwnProperty(key)) {
utils[key] = isType(numObj[key]);
}
}
window.$type = utils;
}();
//console.log($type); var ary = [];
console.log($type.isAry(ary));//->true
console.log($type.isFun(ary));//->false
JS中检测数据类型的四种方法的更多相关文章
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- JS 中检测数组的四种方法
今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...
- JS中检测数据类型的四种方式及每个方式的优缺点
//1.typeof 用来检测数据类型的运算符 //->typeof value //->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number". ...
- 判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 转:判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- JS中判断数据类型的几种方法
1⃣️首先我们来了解一下js中的数据类型 1.基本数据类型:Undefined.Null.Boolean.Number.String(值类型) 2.复杂数据类型:Object(引用类型) (值类型和引 ...
- js中检测数据类型的几种方式
1.typeof 一元运算符,用来检测数据类型.只可以检测number,string,boolean,object,function,undefined. 对于基本数据类型是没有问题的,但是遇到引用数 ...
- JS中检测数据类型的几种方式及优缺点【转】
1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...
- JS中检测数据类型的几种方式及优缺点
1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...
随机推荐
- C、C++编译,链接,extern链接
//b.cpp #inlcude <iostream> void b() { std::cout<<"fun b"; } //a.cpp extern vo ...
- linux下mysql字符集编码问题的修改
安装完的MySQL的默认字符集为 latin1 ,为了要将其字符集改为用户所需要的(比如utf8),就必须改其相关的配置文件:由于linux下MySQL的默认安装目录分布在不同的文件下:不像windo ...
- Sphinx(coreseek) 安装使用以及词库的扩展
1.Sphinx(coreseek) 是啥 一般而言,Sphinx是一个独立的全文搜索引擎:而Coreseek是一个支持中文的全文搜索引擎,意图为其他应用提供高速.低空间占用.高结果相关度的中文全文搜 ...
- 强(strong)、软(soft)、弱(weak)、虚(phantom)引用
https://github.com/Androooid/treasure/blob/master/source/lightsky/posts/mat_usage.md 1.1 GC Root JAV ...
- 转载:更换zImage中的initramfs
From: http://blog.csdn.net/linuxaxis/article/details/8769722 好吧,折腾了两三个星期,USB的问题没搞定,看来功夫还不到家,看了下efuse ...
- HTML注释引起的问题
因为规范要求需要对页面进行说明,添加作者等信息,所以在cshtml的代码中添加了html注释,包括之前使用jsp也是这样做的: 在页面布局的时候,需要对高度进行动态计算,IE8以上没有问题,主要是在I ...
- 0x00411202指令引用的0x00000000内存该内存不能为read错误,怎么解决
0X000000该内存不能为read的解决方法 出现这个现象有方面的,一是硬件,即内存方面有问题,二是软件,这就有多方面的问题了. 一.先说说硬件问题,主要方面是: 1.内存条坏了 更换内存条 2.双 ...
- Win7以上 32/64位系统隐藏托盘图标
前两天有朋友找我,让帮忙写个小工具,隐藏windows的托盘图标,想想最近在家也不想做太复杂的事,也好几年没写过windows上的小工具了,就答应了.想来挺简单的事,没想到还是有点小插曲的.特地来博客 ...
- 50款免费名片设计模板 PSD 源文件下载《上篇》
名片它可能是给你的客户留下正面的印象第一步,另一方面,名片是一个企业最重要和最符合成本效益的营销工具之一,尤其是对于刚刚起步的企业.这里收集了50款免费的名片设计模板,提供 PSD 源文件下载. 您可 ...
- suricata学习笔记1--初步认识
1.前言 最近工作需要对网站的关键字进行检测,找出敏感词.这个过程需要对报文进行收集.解码.检测和记录日志.当前只是简单实现功能,根据关键字进行简单的匹配,而没有进行关键字的语义分析.导致的结果就是 ...