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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
详解vue的diff算法原理
May 20 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
js实现列表按字母排序
Aug 11 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中file_exists函数使用详解
2015/05/08 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
分析python请求数据
2018/08/19 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Why we need EJB
2016/10/20 面试题
制定岗位职责的原则
2013/11/08 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
物业保洁员管理制度
2015/08/05 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers