JS中检测数据类型的几种方式及优缺点【转】
1、typeof 用来检测数据类型的运算符
typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
局限性:
1)typeof null ->"object"
2)检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
1
|
console.log( typeof [12, 23]); //->"Object" |
2、instanceof/constructor
检测某一个实例是否属于某一个类
使用instanceof/constructor可以检测数组和正则
1
2
3
4
5
6
|
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的问题
1
|
console.log({}.constructor === Object); //true<br>console.log([].constructor === Object);//false |
局限性:
1)用instanceof检测的时候,只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到它),检测出来的结果都是true
1
2
3
4
5
|
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来检测的
1
|
console.log(1 instanceof Number); //->false |
数组创建的两种方式(对象、正则、函数...)
对于引用数据类型来说,我们两种方式创建出来的都是所属类的实例,而且都是对象数据类型的值,是没有区别的
1
2
|
var ary = []; var ary = new Array; |
对于基本数据类型来说,虽然不管哪一种方式创建出来的都是所属类的一个实例(在类的原型上定义的方法都可以使用),但是字面量方式创建出来的是基本数据类型,而实例方式创建出来的是对象数据类型
1
2
3
|
var num1 = 1; var num2 = new Number( "1" ); console.log( typeof num1, typeof num2); //->"number" "object" |
3)在类的原型继承中,instanceof检测出来的结果其实是不准确的
1
2
3
|
function Fn() {} var f = new Fn; console.log(f instanceof Array); //->false f不是一个数组,它就是一个普通的实例(普通的对象) |
虽然Fn继承了Array,但是f没有length和数字索引哪些东西,所以f应该不是数组才对,但是用instanceof检测的结果却是true,因为f虽然不是数组,但是在f的原型链上可以找到Array
1
2
3
4
5
|
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这上才有
1
2
3
4
5
6
7
|
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系列函数。
转载自:http://www.cnblogs.com/allenlei/p/6161022.html
JS中检测数据类型的几种方式及优缺点【转】的更多相关文章
- JS中检测数据类型的几种方式及优缺点
1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...
- JS中检测数据类型的四种方式及每个方式的优缺点
//1.typeof 用来检测数据类型的运算符 //->typeof value //->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number". ...
- js中检测数据类型的几种方式
1.typeof 一元运算符,用来检测数据类型.只可以检测number,string,boolean,object,function,undefined. 对于基本数据类型是没有问题的,但是遇到引用数 ...
- JS中检测数据类型的四种方法
1.typeof 用来检测数据类型的运算符->typeof value->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."st ...
- 在javaScript中检测数据类型的几种方式
类型检测的方法 typeof instanceof Object.protype.toString constructor duck type:鸭子类型 typeof 返回一个字符串,适合函数对象和基 ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
随机推荐
- 将本地项目提交到coding上托管
1: 注册coding并新建项目test2:在终端 cd 到要提交的项目 使用git init创建.git文件夹3:使用git pull <项目地址>https的那个4:git a ...
- httpie 取代 curl
接口测试有人喜欢postman(for windows or mac) 如果长期用linux工作,可能更喜欢命令的方式,比如curl最近深入了解了下django-rest-framwork,他们推荐了 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- PostgreSQL 允许远程访问设置方法
安装PostgreSQL数据库之后,默认是只接受本地访问连接.如果想在其他主机上访问PostgreSQL数据库服务器,就需要进行相应的配置. 配置远程连接PostgreSQL数据库的步骤很简单,只需 ...
- - > code vs 3038 3n+1问题(递归)
3038 3n+1问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 3n+1问题是一个简单有趣而又没有解决的数 ...
- bat命令总结
1.复制文件 copy cd.dll %windir%\system32 2.复制文件夹 /s 复制目录和子目录,除了空的. /e复制目录和子目录,包括空的. xcopy %dir%\template ...
- Centos YUM 升级PHP
升级到5.3.3 1.删除已安装文件 yum remove php-* 2.安装 PHP 5.3 yum -y install php53* 升级到5.6 1.删除已安装文件 ...
- 给钛度产品的一些建议(Note)
背景:上一只鼠标坏了,今天299从京东如了一只钛度鼠标,核心用料据说都很高端,设计也不错.但是实际用起来发现了很多码农常识问题和产品建议,遂反馈给钛度客服,并记录于此. 传送门: http://bbs ...
- Unity Animation System(动画系统)
动画系统: 支持:动画融合,混合,叠加动画,行走循环的时间同步,动画层,控制动画的各个方面(时间,速度,融合权重) 带有每顶点1.2或4骨骼的蒙皮网格,以及支持基于物理的布娃娃系统和程序动画. ...
- ElasticSearch性能优化官方建议
ES 手册 如何提高ES的性能 不要返回较大的结果集 ES是设计成一个搜索引擎的,只擅长返回匹配查询较少文档,如果需要返回非常多的文档需要使用Scroll. 避免稀疏 因为ES是基于Lucene来索引 ...