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


Posted in Javascript onJuly 31, 2015

用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;

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

Javascript 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 #Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 #Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 #Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
基于bootstrap3和jquery的分页插件
Jul 31 #Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
You might like
php通过COM类调用组件的实现代码
2012/01/11 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Prototype Object对象 学习
2009/07/12 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
拆迁委托协议书
2014/09/15 职场文书
承租经营合作者协议书
2014/10/01 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015年班组长工作总结
2015/04/10 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL