JavaScript类型检测详解

张金宝发布于2019-08-20 10:28 / 1423人阅读

摘要：种原始类型对象属性种原始类型中种原始类型为，，，，发现除外的其他种基本类型均可以用来识别因为会得到，所以直接用来检测对象的对象包括内置对象，，等和自定义对象。其他检测方法，都各有缺陷，不能精确。属性检测属性是否在实例对象中应该用。

本篇介绍一下如何检测JavaScript各种类型。

• 5种原始类型
• 对象
• Function
• Array
• 属性

5种原始类型
JavaScript中5种原始类型为string，number，boolean，undefined，null

var name = "Jack";
var age = 32;
var single = false;
var app;    //undefined

console.log(typeof name);   //string
console.log(typeof age);    //number
console.log(typeof single); //boolean
console.log(typeof app);    //undefined
console.log(typeof null);   //object

发现除null外的其他4种基本类型均可以用typeof来识别：

if(typeof name === "string") { name += "Zhang"; }
if(typeof age === "number") { age++; }
if(typeof single === "boolean" && single) { … }
if(typeof app === "undefined")  { app = {}; }

因为typeof null会得到object，所以直接用===来检测null：
if(el === null) { … }
对象
JavaScript的对象包括内置对象（Date，RegExp ，Error等）和自定义对象。
（注意，Function和Array虽然也都是内置对象，但下一节多带带讲）
对象不能像基本类型那样用typeof来检测了，因为检测出来的结果都是object：

console.log(typeof new Date());    //object
console.log(typeof new RegExp());  //object
console.log(typeof new Error());   //object
console.log(typeof new Person());  //用typeof检测出自定义对象也是object

要改用instanceof来检测：

var date = new Date();
var reg = new RegExp();
var err = new Error();
var me = new Person();

if(date instanceof Date) {    //检测日期
    year = date.getFullYear(); 
}
if(reg instanceof RegExp) {    //检测正则表达式
    reg.test(...); 
}
if(err instanceof Error) {    //检测异常
    throw err; 
}
if(me instanceof Person) {    //检测自定义对象
    ... 
}

但自定义对象有个问题，假设浏览器frameA里和frameB里都定义了Person。 frameA里定义了me对象，用me instanceof Person检测出来为true。但当自定义对象me传给frameB后，在frameB里instanceof会是false。
本节一开头就说了，Function和Array虽然也都是内置对象，但留到下一节讲。原因就是Function和Array也有和自定义对象相同的上述问题。因此Function和Array一般不用instanceof

Function
上面说了用instanceof检测Function不能跨frame。因此用typeof来检测，它可跨frame：
var func = function(){};
if(typeof func === "function") { … }
但IE8以前用typeof来检测DOM系函数会得到object，因此IE8以前改用in：

console.log(typeof document.getElementById);        //object，不是function
console.log(typeof document.getElementsByTagName);  //object，不是function
console.log(typeof document.createElement);         //object，不是function

//IE8以前的IE浏览器，要改用in来检测是否支持DOM函数

if("getElementById" in document) { … }        
if("getElementsByTagName" in document) { … }
if("createElement" in document) { … }

Array
上面说了用instanceof检测Array不能跨frame。ES5之前都自定义检测方法。其中最精确的方法：依赖Array的toString会返回固定字符串”[Object Array]”的事实来检测：

function isArray(arr) {
    return Object.prototype.toString.call(arr) === "[Object Array]";
}

该方法精确且优雅，因此被很多库所采纳，最终在ES5被作为isArray方法引入了Array，参照MDN。现在你不需要自定义检测方法了，直接用isArray()即可。
其他检测方法，都各有缺陷，不能100%精确。但作为一种思路是可以借鉴的。例如依赖Array是唯一包含sort方法的对象的事实来检测：

function isArray(arr) {
    return typeof arr.sort === "function";
}

如果是自定义对象也定义了sort方法，该方法就失效了。
属性
检测属性是否在实例对象中应该用hasOwnProperty。如果你不关心属性是在实例对象中还是在原型对象中，可以简单点用in
例如检测字面量对象属性：

var Person = {
    name: "Jack",
    age: 33
};
if("name" in Person) { … }                 //true
if(Person.hasOwnProperty("name")) { … }    //true

例如实例对象属性：

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.location = "Shanghai";

var me = new Person("Jack", 33)
if("name" in me) { … }                 //true
if(me.hasOwnProperty("name")) { … }    //true
if("location" in me) { … }             //true
if(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好：

if (object[propName])            //Not Good，你怎么知道属性值不是0或1？
if (object[propName] === null)        //Not Good，你怎么知道属性值不是null？
if (object[propName] === undefined)    //Not Good，你怎么知道属性值不是undefined？

总结
**用typeof检测string，number，boolean，undefined，Function
用===检测null
用isArray()检测Array
用instanceof检测内置对象（除Function和Array）和自定义对象
用hasOwnProperty检测属性是否在实例对象中。如果你不关心属性是在实例对象中还是在原型对象中，可以简单点用in**

更多资源上：去转盘网；或者加我的QQ群一起讨论学习js，css等技术（QQ群：512245829）

idc机房托管私有云数据类型详解 javascript详解 SQL数据类型详解 javascript闭包详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80160.html

详解javascript类型判断

引言 javascript数据有六大基本类型:Number,String,Boolean,Null,Undefined,Symbol,一种引用类型Object typeof检测基本类型 typeof可以用来检测除null之外的基本类型,还可以检测函数showImg(https://segmentfault.com/img/bVCLRr);showImg(https://segmentfault....

blair 2019-08-20 10:47 评论0 收藏0
【JS基础】Object 对象的原型概念详解

摘要：使用操作符，创建一个对象，并且执行构造函数方法。使用可以返回一个字典型对象对象原型每一个对象都有一个内置的属性指向构造它的函数属性而构造函数的则指向构造函数本生。对象概念在 javascript 中, 一切引用类型均为对象。如 function Foo () {} 中，Foo本身就是一个对象的引用。创建对象方式字面量方式 new 构造函数函数声明 Object.creat...

appetizerio 2019-08-22 14:05 评论0 收藏0
FCC成都社区·前端周刊第 2 期

摘要：详情正式发布于号正式发布，版本代号为。上个月有次下载量，大大超过了的下载量。但对于伪类选择器，其总是显示为未使用。详情新增允许第三方嵌入的网站可请求访问第一方网站的，但这并不是指放宽了同源策略。 01. Propel：JS的科学计算框架 Propel 是一种 JavaScript 科学计算框架，类似于 Python 中的科学计算库 NumPy，也就是说利用 JS 也可以进行机器学习啦。...

Muninn 2019-08-30 14:17 评论0 收藏0
FCC成都社区·前端周刊第 2 期

摘要：详情正式发布于号正式发布，版本代号为。上个月有次下载量，大大超过了的下载量。但对于伪类选择器，其总是显示为未使用。详情新增允许第三方嵌入的网站可请求访问第一方网站的，但这并不是指放宽了同源策略。 01. Propel：JS的科学计算框架 Propel 是一种 JavaScript 科学计算框架，类似于 Python 中的科学计算库 NumPy，也就是说利用 JS 也可以进行机器学习啦。...

tinna 2019-08-22 15:51 评论0 收藏0
FCC成都社区·前端周刊第 2 期

摘要：详情正式发布于号正式发布，版本代号为。上个月有次下载量，大大超过了的下载量。但对于伪类选择器，其总是显示为未使用。详情新增允许第三方嵌入的网站可请求访问第一方网站的，但这并不是指放宽了同源策略。 01. Propel：JS的科学计算框架 Propel 是一种 JavaScript 科学计算框架，类似于 Python 中的科学计算库 NumPy，也就是说利用 JS 也可以进行机器学习啦。...

zero 2019-08-02 10:04 评论0 收藏0