JS中检测数据类型的几种方式及优缺点小结


Posted in Javascript onDecember 12, 2016

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中检测数据类型的几种方式及优缺点小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
一分钟理解js闭包
May 04 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
vue 虚拟DOM的原理
Oct 03 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 #Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 #Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 #Javascript
js原生之焦点图转换加定时器实例
Dec 12 #Javascript
IntersectionObserver API 详解篇
Dec 11 #Javascript
You might like
基于mysql的论坛(1)
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python程序如何进行保存
2020/07/03 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
2013年保送生自荐信格式
2013/11/20 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
体育运动口号
2014/06/09 职场文书
教师个人自我评价
2015/03/04 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
公司年会晚会开幕词
2019/04/02 职场文书