JavaScript中判断数据类型的方法总结

 更新时间:2016年05月24日 15:31:30   作者:Aaron  
比如要判断一个变量是否是数组类型,PHP中有is_array()函数可以直接判断,然而js中我们需要...-- well,下面我们就来详细看一下JavaScript中判断数据类型的方法总结

typeof
typeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量。假如你做如下判断:

//haorooms是全局变量
if(haorooms!=undefined){
}//js会报错,说"Uncaught ReferenceError: haorooms is not defined"

解决的方法是我们如下写:

 if(typeof haorooms!=undefined){
 }

用了typeof之后,就不会报错了!这是typeof的应用之一!

此外,typeof还可以进行数据类型的判断!如下:

var haorooms="string"; console.log(haorooms); //string
var haorooms=1; console.log(haorooms); //number
var haorooms=false; console.log(haorooms); //boolean
var haorooms; console.log(typeof haorooms); //undfined

var haorooms= null; console.log(typeof haorooms); //object
var haorooms = document; console.log(typeof haorooms); //object
var haorooms = []; console.log(haorooms); //object
var haorooms = function(){}; console.log(typeof haorooms) //function  除了可以判断数据类型还可以判断function类型

很明显,对于typeof,除了前四个类型外,null、对象、数组返回的都是object类型;

instanceof
可以用其判断是否是数组。

var haorooms=[];
console.log(haorooms instanceof Array) //返回true 

constructor
constructor就是返回对象相对应的构造函数。
判断各种数据类型的方法:

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

function employee(name,job,born){
  this.name=name;
  this.job=job;
  this.born=born; }

var haorooms=new employee("Bill Gates","Engineer",1985); 
console.log(haorooms.constructor); //输出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}

通过输出haorooms.constructor,可以看出constructor就是返回对象相对应的构造函数。

Object.prototype.toString
前面我们提到了可以运用 constructor 属性来判定物件类型,让我们再来讲讲 Object.protype.toString 这个方法

Object.prototype.toString.apply({}) // "[object Object]"
Object.prototype.toString.apply([]) // "[object Array]"
Object.prototype.toString.apply(NaN)// "[object Number]"
Object.prototype.toString.apply(function(){}) // "[object Function]"

运用这种方式我们可以正确的判断一个变量的基本型态,但是如果是自订类型的话,却无法得知真正的类型,因为结果依然会是 [object Object]

其他
jQuery 也有类型判断的方法,下面是一例

$.isWindow(window) // true

怎么做的呢

core.js#479
isWindow: function( obj ) {
  return obj != null && obj == obj.window;
}

所以开一个这样的 Object:

var fakeWindow;
fakeWindow = {};
fakeWindow.window = fakeWindow;
$.isWindow(fakeWindow) // true

你就骗过他了。

小结
在 JavaScript 中要正确判断类型,当仔细去钻研的时候,真是一件麻烦事,根据不同的情境去设计你的判断式是相当重要的,我们也必须要去思考如何用最简洁的方式判断正确的类型,当然这篇还有很多地方没有介绍到,例如 isPrototypeOf 这个方法,JavaScript 是一个有许多历史包袱的语言,但也是不断的在进步,运用它的时候,要注意,有太多的方式是双面刃,切记要小心运用。

相关文章

  • easyui-edatagrid.js实现回车键结束编辑功能的实例

    easyui-edatagrid.js实现回车键结束编辑功能的实例

    下面小编就为大家带来一篇easyui-edatagrid.js实现回车键结束编辑功能的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Javascript节流函数throttle和防抖函数debounce

    Javascript节流函数throttle和防抖函数debounce

    这篇文章主要介绍了Javascript节流函数throttle和防抖函数debounce,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 微信小程序开发教程之增加mixin扩展

    微信小程序开发教程之增加mixin扩展

    Mixin是一种思想,用部分实现的接口来实现代码复用。可以用来解决多继承的问题,又可以用来扩展功能。下面这篇文章主要给大家介绍了关于为微信小程序增加mixin扩展的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • 常用的javascript function代码

    常用的javascript function代码

    一些javascript常见函数,方便当作学习参考
    2008-05-05
  • uniapp监听页面滚动2种常用方法

    uniapp监听页面滚动2种常用方法

    在uni-app中,监听页面滚动可以使用onPageScroll生命周期函数或@scroll事件监听器,onPageScroll适用于监听整个页面的滚动事件,而@scroll事件监听器适用于监听特定组件如scroll-view的滚动,这两种方法的选择取决于监听需求的不同,需要的朋友可以参考下
    2024-09-09
  • js动态创建、删除表格示例代码

    js动态创建、删除表格示例代码

    生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号,具体的实现过程如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • javascript命名约定(变量 函数 类 组件)

    javascript命名约定(变量 函数 类 组件)

    这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量,函数,类或者是组件的通用约定,虽然这些规则并不是强制性的,但是呢,他们却被一些JS社区所广泛采用,所以,了解他们还是很有必要的
    2023-03-03
  • 简单的JS控制button颜色随点击更改的实现方法

    简单的JS控制button颜色随点击更改的实现方法

    下面小编就为大家带来一篇简单的JS控制button颜色随点击更改的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 让innerText在firefox火狐和IE浏览器都能用的写法

    让innerText在firefox火狐和IE浏览器都能用的写法

    下面的代码主要是用来解决firefox浏览器不支持innerText的问题,需要的朋友可以参考下。
    2011-05-05
  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下
    2016-03-03

最新评论