富贵资源网 Design By www.hznty.com
这篇文章来回答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="/UploadFiles/2021-04-02/jquery-1.4.2.js"><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/
什么是伪数组
能通过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="/UploadFiles/2021-04-02/jquery-1.4.2.js"><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/
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。