JavaScript范例检测详解

本篇引见一下怎样检测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)

    原文作者:痞子猫
    原文地址: https://segmentfault.com/a/1190000006701195
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞