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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
全文搜索和替换
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python模拟三级菜单效果
2017/09/11 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
学习python分支结构
2019/05/17 Python
python3实现高效的端口扫描
2019/08/31 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
介绍一下linux的文件系统
2015/10/06 面试题
延安红色之旅心得体会
2014/10/07 职场文书