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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
Angular.JS中的this指向详解
May 17 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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+mysql写的简单留言本实例代码
2008/07/25 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
Java Mybatis框架入门基础教程
2015/09/21 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
详解python变量与数据类型
2020/08/25 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
面试求职的个人自我评价
2013/11/16 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
自考生自我评价分享
2014/01/18 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
班主任高考寄语
2015/02/26 职场文书
家长意见书
2015/06/04 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Python 匹配文本并在其上一行追加文本
2022/05/11 Python