javascript之判断专题

javascript有数组,对象,函数,字符串,布尔,还有Symbol,set,map,weakset,weakmap。

判断这些东西也是有很多坑,像原生的typeof,instanceOf有一些bug,有些能满足90%的情况,也有些不太如人意。

所以各大类库都出了一些判断的函数,以is开头的xxx。

1,判断null
typeof null//‘object‘,所以不能用typeof判断。typeof的一个坑。

null大家都是用 null===null判断的。jquery阿underscore都是这么写:

function isNull(obj){return obj===null}

2.undefined

typeof undefined==="undefined",还不能直接写undefined,而jq等类库和underscore都是这么写的:

function isUndefined(obj){return obj===void 0;}

3.NaN

typeof NaN==="number",js内置的isNaN在输入字符串,对象都返回true,白瞎这个名字了,不过倒是有人用这个判断数字,!isNaN(number)。所以判断NaN的时候是:

function isNaN(obj){return obj!==obj}

jquery,underscore等类库也都是这么判断,看来大家意见差不多。

3.window对象

jquery的判断window对象

//判断window
function isWindow(){
    window==document//IE678 true
    document==window//IE678 false
}

3.判断基础类型Number,boolean,function,string。

//typeof判断string,number,boolean,function可满足90%的需求
//但是。。。
typeof new Boolean(1);//"object"
typeof new Number(1);//"object"
typeof new String(1);//"object"

这些要判断也蛮简单的,上一下underscore的源码吧。

_.isFunction / _.isString / _.isNumber / _.isDate / _.isRegExp都是这样。。用Object.prototype.toString.call(obj)判断

刚刚试了下,Object.toString.call和原型链上的toString返回的不一样-0-。

_.isFunction = function(obj) {
    return Object.protorype.toString.call(obj) == ‘[object Function]‘;
};

underscore的boolean的判断还是蛮全的,包括字面量,对象形式的boolean:

_.isBoolean = function(obj) {
    return obj === true || obj === false || toString.call(obj) == ‘[object Boolean]‘;
};

4.object

typeof 太多东西都是object了,看看underscore咋判断

_.isObject = function(obj) {
    return obj === Object(obj);
};
//这里
typeof null//‘object‘
typeof []//object
typeof /\d/i //"object"
typeof window.alert //IE678 "object"

5.element

_.isElement = function(obj) {
    return !!(obj && obj.nodeType == 1);
};

6.Arguments

这是underscore的判断Arguments,和源码,注释很清楚也不多说。

_.isArguments = function(obj) {
    return toString.call(obj) == ‘[object Arguments]‘;
};
// 验证isArguments函数, 如果运行环境无法正常验证arguments类型的数据, 则重新定义isArguments方法
if(!_.isArguments(arguments)) {
    // 对于环境无法通过toString验证arguments类型的, 则通过调用arguments独有的callee方法来进行验证
    _.isArguments = function(obj) {
        // callee是arguments的一个属性, 指向对arguments所属函数自身的引用
        return !!(obj && _.has(obj, ‘callee‘));
    };
}

7.Array

判断数组是最麻烦的,前面的还好,数组默认的0,1,2,3的下标,一个length属性,一些Array方法,判断的时候还要保证obj不是类数组,还要保证不是Arguments。。

我们看一下这些类库探索Array的路程

开始是

return arr.instanceof Array;

后来

return !!arr&&arr.constructor==Array;
return typeof arr.sort==‘function‘
return try{
    Array.prototype.toString.call(o);
    return true;
}catch(e){
    return false;
}

从instanceof判断,constructor的判断到Array的toString方法的判断,可谓是用尽心思,最新版的jquery的判断array好像把这好多方法集合在一起,写的老长。

underscore的判断还是用它的toString.call判断:

_.isArray = nativeIsArray ||
function(obj) {
    return toString.call(obj) == ‘[object Array]‘;
};

如果js原生支持isArray就先用原生的,这个nativeIsArray在一开始被设置为Array的isArray方法。

各大框架也有类数组的判断,这个更麻烦,老长的代码,判断原理是类数组的length属性能被重写,而数组的length属性不能被重新,代码就不贴了。

总结一下原生判断的一些坑。

//typeof 的陷阱
typeof null//‘object‘
typeof []//object
typeof document.childNodes //safari "function"
typeof document.createElement(‘embed‘)//ff3-10 "function"
typeof document.createElement(‘object‘)//ff3-10 "function"
typeof document.createElement(‘applet‘)//ff3-10 "function"
typeof /\d/i
typeof window.alert //IE678 "object"
//instanceof不能跨文档比较 iframe里面的数组实例不是父窗口的Array实例
instanceof
//contructor的陷阱
//旧版本ie下dom bom对象的constructor属性没有暴露出来

好,今天就写这么多,谢谢观看,如有错误,请指出,大家共同学习~

  

时间: 2024-08-08 05:36:31

javascript之判断专题的相关文章

JavaScript类型判断

JavaScript的数据类型可以分为:标准类型和对象类型. 标准类型有:undefined Null Boolean Date Number Object 对象类型(构造器类型)有:Boolean Date Number Object Array Date Error Function RegExp 用来判断数据类型的一般有四种方式,分别是: 1.typeof 可以识别标准类型(Null除外) 不能识别对象类型(Function除外) 2.Prototype.toString() 可以识别标准

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将

在JavaScript中判断整型的N种方法

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

javascript如何判断当前浏览器是否支持cookie

javascript如何判断当前浏览器是否支持cookie:浏览器在默认状态下都是支持cookie的,但是也可以人为的禁用.代码如下: function check() { if(window.navigator.cookieEnabled) { return true; } else { alert("浏览器已经禁用cookie"); return false; } } 上面的函数可以实现验证cookie的效果.cookieEnabled属性可以参阅Navigator对象的cooki

javascript如何判断是手机还是电脑访问本网页

1 var system ={}; 2 var p = navigator.platform; 3 system.win = p.indexOf("Win") == 0; 4 system.mac = p.indexOf("Mac") == 0; 5 system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 6 if(system.win||system.mac||syst

(转)JavaScript中判断对象类型的种种方法

我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

JavaScript中判断变量类型最简洁的实现方法(#################################)

这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短.最简洁的实现方法,需要的朋友可以参考下 我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是number类型. 复制代码代码如下: 1 2 3 function isNumber(obj) {     return typeof obj === 'number' } 这个函数对于整数和浮点数都没有问题,但对于NaN值也返回true这让

每天一个JavaScript实例-判断图片是否加载完成

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>每天一个JavaScript实例-判断图片是否加载完成</title> <script> window.onload= function(){ //clearTimeout(clock); alert("加载完成"); } v

JavaScript中判断为整数的多种方式

原文:JavaScript中判断为整数的多种方式 之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示.但实际操作中比如数组索引.位操作则是基于32位整数. 方式一.使用取余运算符判断 任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. function isInteger(obj) { return obj%1 === 0 } isInteger(3