欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript数据类型判定的总结笔记

程序员文章站 2022-05-07 11:00:56
用typeof 来检测数据类型 javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object...

用typeof 来检测数据类型
javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。

但是如果尝试用typeof 来检测对象类型都一律返回"object"并不能加以区分

typeof null // "object"
typeof []  // "object"
typeof document.childnodes //"object"
typeof /\d/ //"object"
typeof new number() //"object"

用constructor 属性来检测类型的构造函数

[].constructor === array  //true
document.childnodes === nodelist  //true
/\d/.constructor === regexp   //true
 
function isregexp(obj) {
  return obj && typeof obj === "object" && obj.constructor === regexp;
} //检测正则表达式对象
 
function isnull(obj){
  return obj === null;
}

用construct检测可以完成大多数的类型检测,null特殊直接比较。然而iframe中的数组类型确无法检测出正确类型,这是用construct检测的一个缺陷;同时在旧版本ie下dom和bom的construct是无法访问的

利用 object.prototype.tostring 来判断

object.prototype.tostring.call([]) //"[object array]"
object.prototype.tostring.call(/\d/) // "[object regexp]"
object.prototype.tostring.call(1)//"[object number]"

来看看jquery源码中是如何使用tostring方法的

/*
* jquery javascript library v1.11.2
*/
var class2type = {};  //用来保存js数据类型
 
jquery.each("boolean number string function array date regexp object error".split(" "), function(i, name) {//构造class2type存储常用类型的映射关系,遍历基本类型并赋值,键值为 [object 类型]
 class2type[ "[object " + name + "]" ] = name.tolowercase();
});
type: function( obj ) {
  if ( obj == null ) {//首先如果是null则返回null字符串
   return obj + "";
  }
//接着判断给定参数类型是否为object或者function,是的话在映射表中寻找 tostring后的键值名称并返回,不是的话利用typeof就可以得到正确类型。
  return typeof obj === "object" || typeof obj === "function" ?
   class2type[ tostring.call(obj) ] || "object" :
   typeof obj;
 },
/****************************/ 
jquery.type(/\d/)  //"regexp"
jquery.type(new number())  //"number"

这里能够使用tostring方法来检测是因为不同对象都会重新定义自己的tostring方法

说说一些特殊类型的检测

JavaScript数据类型判定的总结笔记

上述调试是在ie8中进行的,因为undefined 在javascript中并不是关键字,在ie8以下(之后的版本不可以赋值)是可以赋值的,查看jquery.type源码可知,对于 undefined检测由是 typeof undefined完成的。jquery.type并不能在旧的ie中检测出undefined的正确性。想要获得纯净的undefined可以使用 void 0

JavaScript数据类型判定的总结笔记

另外,对于dom,bom对象在旧的ie中使用objec.prototype.tostring检测出来的值均为 “[object object]”

JavaScript数据类型判定的总结笔记

但是在chrome下的结果却完全不同(chrome可以检测出真实类型)

JavaScript数据类型判定的总结笔记

了解一下jquery检测特殊类型

iswindow: function( obj ) {//ecma规定window为全局对象global,且global.window === global
 return obj != null && obj == obj.window;
},
isplainobject: function( obj ) {
 var key;
 if ( !obj || jquery.type(obj) !== "object" || obj.nodetype || jquery.iswindow( obj ) ) {
  return false;
 }
 try {//判断它最近的原形对象是否含有isprototypeof属性
  if ( obj.constructor &&
   !hasown.call(obj, "constructor") &&
   !hasown.call(obj.constructor.prototype, "isprototypeof") ) {
   return false;
  }
 } catch ( e ) {
  return false;
 }
 if ( support.ownlast ) {
  for ( key in obj ) {
   return hasown.call( obj, key );
  }
 }

mass framework相对jquery中改善的地方

var class2type = {//将可能出现的类型都映射在了class2type对象中,从而减少isxxx函数
  "[object htmldocument]": "document",
  "[object htmlcollection]": "nodelist",
  "[object staticnodelist]": "nodelist",
  "[object domwindow]": "window",
  "[object global]": "window",
  "null": "null",
  "nan": "nan",
  "undefined": "undefined"
 };
type: function(obj, str) {
   var result = class2type[(obj == null || obj !== obj) ? obj : serialize.call(obj)] || obj.nodename || "#"; //serialize == class2type.tostring
   if (result.charat(0) === "#") { //兼容旧式浏览器与处理个别情况,如window.opera
    //利用ie678 window == document为true,document == window竟然为false的神奇特性
    if (obj == obj.document && obj.document != obj) {//对dom,bom对象采用nodetype(单一)和item(节点集合)进行判断
     result = "window"; //返回构造器名字
    } else if (obj.nodetype === 9) {
     result = "document"; //返回构造器名字
    } else if (obj.callee) {
     result = "arguments"; //返回构造器名字
    } else if (isfinite(obj.length) && obj.item) {
     result = "nodelist"; //处理节点集合
    } else {
     result = serialize.call(obj).slice(8, -1);
    }
   }
   if (str) {
    return str === result;
   }
   return result;
  }

类数组

类数组是一类特殊的数据类型存在,他们本身类似array但是又不能使用array的方法,他们有一个明显的特点就是含有length属性,而且 键值是以整数有序的排列的。这样的数组可以通过 array.slice() 这样的方法转换成真正的数组,从而使用array提供的方法。

常见类数组:arguments,document.forms,document.getelementsbyclassname(等一些列节点集合nodelist,htmlcollection),或者是一些特殊对象,如下所示:

var arraylike={ 
   0:"a", 
   1:"b", 
   2:"c", 
   length:3 
}

通常情况下通过array.slice.call既可以转换类数组,但是旧ie的htmlcollection,nodelist不是object 的子类,不能使用该方法,这时候需要构建一个空数组,然后将遍历节点push就如空数组中,返回新生成的数组即可,同时要区别出window 和 string对象,因为这类的对象同样含有length>=0(length不可被修改),但是不是类数组。

jquery如何处理类数组的

makearray: function( arr, results ) {
 var ret = results || [];
 if ( arr != null ) {
  if ( isarraylike( object(arr) ) ) {
   jquery.merge( ret,
    typeof arr === "string" ?
    [ arr ] : arr
   );  //jquery.merge 合并数组 ,若是字符串则封装成数组河滨,不是则世界合并
  } else {
   push.call( ret, arr );
  }
 }
 return ret;
}

ext.js是如何处理类数组的

toarray: function(iterable, start, end) {
    if (!iterable || !iterable.length) {
     return [];  //非类数组类型直接返回[]
    }
    if (typeof iterable === 'string') {
     iterable = iterable.split('');  //分解字符串
    }
    if (supportssliceonnodelist) {
     return slice.call(iterable, start || 0, end || iterable.length); //对于nodelist支持
    }
    var array = [],
     i;
    start = start || 0;
    end = end ? ((end < 0) ? iterable.length + end : end) : iterable.length;
    for (i = start; i < end; i++) {
     array.push(iterable[i]);
    }
    return array;
   }

mass framework.js是如何处理类数组的

slice: w3c ? function(nodes, start, end) { //var w3c = doc.dispatchevent; ie9开始支持w3c的事件模型
 return factorys.slice.call(nodes, start, end);
} : function(nodes, start, end) {
 var ret = [],
   n = nodes.length;
 if (end === void 0 || typeof end === "number" && isfinite(end)) {
  start = parseint(start, 10) || 0;
  end = end == void 0 ? n : parseint(end, 10);
  if (start < 0) {
   start += n;
  }
  if (end > n) {
   end = n;
  }
  if (end < 0) {
   end += n;
  }
  for (var i = start; i < end; ++i) {
   ret[i - start] = nodes[i];
  }
 }
 return ret;

以上就是本文的全部内容,希望对大家的学习有所帮助