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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
传智播客学习之java 反射
2009/11/22 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
向领导表决心的话
2014/03/11 职场文书
给校长的一封建议书
2014/03/12 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
社区活动总结报告
2014/05/05 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
检讨书怎么写
2015/01/23 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server