javascript 伪数组实现方法


Posted in Javascript onOctober 11, 2010

这篇文章来回答javascript通用循环遍历方法forEach中最后提到的关于伪数组的问题。
什么是伪数组
能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。
这种对象有很多,比较特别的是arguments对象,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象。
来看个示例:

var fakeArray01 = {0:'a',1:'b',length:2};//这是一个标准的有伪数组对象 
var arr01 = Array.prototype.slice.call(fakeArray01); 
alert(arr01[0]);//a 
var arr02 = [].slice.call(fakeArray01); 
alert(arr02[0]);//a

slice 可以用来获取数组片段,它返回新数组,不会修改原数组。
示例中可以看到fakeArray被成功的转换成了Array对象。也许大家对Array.prototype.slice.call这种写法比较陌生,其实我们也可以通过[].slice.call这种形式实现同样的效果,那为什么我们要通过prototype的形式实现呢,答案是以prototype的形式执行程序效率更高,同样代码也更加优美。
伪数组的实现
让我们再深入的看一下伪数组的实现。
我们来看一些特殊的用例:
var fakeArray01 = {a:'a',b:'b',length:2};//没有length下标对应的值 
var arr01 = Array.prototype.slice.call(fakeArray01); 
alert(arr01[0]);//undefined 
var fakeArray02 = {0:'a',1:'b',length:'num'};//length不是数值 
var arr02 = Array.prototype.slice.call(fakeArray02); 
alert(arr02[1]);//undefined

同样fakeArray01和fakeArray02被转换成了真正的数组,但是数组中的值都为undefined
查看 V8 引擎 array.js   的源码,可以将 slice 的内部实现简化为:
function slice(start, end) { 
var len = ToUint32(this.length), result = []; 
for(var i = start; i < end; i++) { 
result.push(this[i]); 
} 
return result; 
}

可以看出,slice 并不需要 this 为 array 类型,只需要有 length 属性即可。并且 length 属性可以不为 number 类型,当不能转换为数值时,ToUnit32(this.length) 返回 0.
根据以上结论可以得出:fakeArray01被转换成了lenth为2的数组,其值都被初始化为undefined,fakeArray02被转换成了length为0的数组,自然访问下标为1的元素返回undefined
IE的问题
针对于标准浏览器slice实现已经可以解释所有的问题,但是IE在处理NodeList时出现了问题。IE中无法将NodeList转换为真正的数组,会出错。这又是为什么呢?严格说,在IE内部定义了一个抽象类Arraioid,Array和Arguments都继承与此,所以可以用slice。但DOM对象是通过COM接入到JScript的,slice检测的时候失效。
Jquery与伪数组
Jquery内部大量运用了伪数组。可以说整个Jquery对象,都是构建在伪数组的基础之上的,好让我们来看一些Jquery的实际运用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>fakeArray</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
var body = $("body"); 
alert(body.get(0).tagName); 
}); 
</script> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html>

再简单不过的程序了,好,让我们来看一下其内部的实现原理:
jQuery.fn = jQuery.prototype = { 
init: function( selector, context ) { 
var match, elem, ret, doc; 
// Handle $(""), $(null), or $(undefined) 
if ( !selector ) { 
return this; 
} 
// Handle $(DOMElement) 
if ( selector.nodeType ) { 
this.context = this[0] = selector; 
this.length = 1; 
return this; 
} 
// The body element only exists once, optimize finding it 
if ( selector === "body" && !context ) { 
this.context = document; 
this[0] = document.body; 
this.selector = "body"; 
this.length = 1; 
return this; 
} 
//... ... 
}, 
get: function( num ) { 
return num == null ? 
// Return a 'clean' array 
this.toArray() : 
// Return just the object 
( num < 0 ? this.slice(num)[ 0 ] : this[ num ] ); 
} 
}

最后,我们来解释一下,程序的执行细节.但是在这之前,还得说一下关于Jquery的内部的一些东西。
用过Jquery的用户应该都知道$()函数,它是Jquery的选择器代表。我们可能通过$()函数去选取页面中的元素(具体语法可参数Jquery帮助文档)。实际上当我们执行$()函数时,程序去执行上面列出的init方法,我们来看一下在调用$(document)时所发生的事件:
//$(document) 
init: function( selector, context ) { 
var match, elem, ret, doc; 
// Handle $(DOMElement) : 处理DOM元素, 
if ( selector.nodeType ) { 
this.context = this[0] = selector; //给属性0赋予selector值,此时就是document对象 
this.length = 1; //创建伪数组,更新下标 
return this; //返回Jquery对象 
} 
//... ... 
}

$("body")是同样的道理,不再多说了。
我们知道Jquery里所有的操作返回的都是Jquery对象,那我们如何得到其所对应的dom对象呢,Jquery为我们提供了一个get方法,这是专门用来从jquery对象中取得DOM对象用的,由此,便有了body.get(0),那为什么又是get(0)而不是get()呢,因为Jquery的所有操作都是针对于数组进行的。所以,在get方法里,我们要传一个下标值,来得到具体的元素。现在该看get方法的具体实现了:
get: function( num ) { 
return num == null ? 
//如果没有num,则直接返回DOM数组 
this.toArray() : 
//如果指定的num,则返回指定下标的元素 
//this.slice是jquery的另一个方法,它内部其实还是调用Array.prototype.slice来实现将伪数组转换为真实的数组 
( num < 0 ? this.slice(num)[ 0 ] : this[ num ] ); 
}

关于伪数组就到这吧,我想应该已经差不多了。
注:有机会的话,将来可能会出一个"超越Jquery"系列,专门分析Jquery内部执行细节。但是由于Jquery内部的有各种歪门邪道的手法还不是很理解,所以这是将来的问题了。
参考:
http://lifesinger.org/blog/2010/05/array-prototype-slice/
Javascript 相关文章推荐
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
Javascript缓存API
Jun 14 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JS中Attr的用法详解
Oct 09 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 #Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
基于jQuery的实现简单的分页控件
Oct 10 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
destoon之一键登录设置
2014/06/21 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Angular中$compile源码分析
2016/01/28 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
如何基于js判断浏览器版本
2020/02/20 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python中global用法实例分析
2015/04/30 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python飞机大战游戏实例讲解
2020/12/04 Python
python简单实现插入排序实例代码
2020/12/16 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
写给保洁员表扬信
2014/01/08 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
四年级小学生评语
2014/12/26 职场文书
担保书格式
2015/01/20 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python