JavaScript数据类型判定与类数组转换详解

作者:纸飞机时间:2026-10-29 12:59:47浏览:494

本文总结JavaScript中检测数据类型的三种主要方法:typeof、constructor及Object.prototype.toString,并分析jQuery、Ext.js和mass Framework在类型判断与类数组转换上的实现差异,重点解析旧版IE兼容性及特殊对象处理。

JavaScript数据类型检测方法概述

在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;
}

constructor属性检测的局限性

通过constructor属性进行类型检测可以覆盖大多数情况,但null需要特殊处理,直接进行比较即可。该方法存在两个主要缺陷:首先,在iframe环境中无法正确检测数组类型;其次,在旧版Internet Explorer浏览器中,DOM和BOM对象的constructor属性无法被访问。

Object.prototype.toString的应用

推荐使用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方法进行检测,是因为JavaScript中不同的内置对象都会重新定义自己的toString方法,返回特定的类型字符串。

下面讨论一些特殊数据类型的检测逻辑。

JavaScript数据类型检测方法概述

特殊类型与浏览器兼容性分析

上述调试过程基于IE8浏览器环境。由于在JavaScript中undefined并非严格意义上的关键字,在IE8及更低版本(后续版本不允许赋值)中是可以被赋值的。查阅jQuery.type源码可知,对于undefined的检测实际上是由typeof undefined完成的,这意味着jQuery.type在旧版IE中无法准确检测出undefined。若需获取纯净的undefined值,可以使用void 0。

JavaScript数据类型检测方法概述

此外,对于DOM和BOM对象,在旧版IE中使用Object.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属性且length值大于等于0(不可修改),但它们不属于类数组。

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;

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

作者最新文章