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 学习 - 提高篇
Feb 02 Javascript
javascript函数库-集合框架
Apr 27 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2016党校培训心得体会
2016/01/07 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
深入理解python多线程编程
2021/04/18 Python
Vue如何清空对象
2022/03/03 Vue.js
golang连接MySQl使用sqlx库
2022/04/14 Golang
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python