读jq之五（jq对象的slice方法）

这篇看看jq的slice方法，源码是jQuery1.4.2 。先了解下first，last，eq方法。以下html片段

 

<div id="a">A</div> <div id="b">B</div> <div id="c">C</div> <div id="d">D</div>

 

$('div').first() 返回jq对象集合的第一个元素， 即Div[id=a]，结构:{0:div,length:1,...}；//...表示省略了其它属性

$('div').last() 返回jq对象集合的最后的元素， 即Div[id=d]，结构:{0:div,length:1,...}；

$('div').eq(2) 返回jq对象匹配的第三个元素， 即Div[id=c]，结构:{0:div,length:1,...}；

 

查看jq1.4.2源码得知：

1，first，last方法中直接调用了eq方法。

2，eq方法中调用了slice方法。

 

因此$().slice方法才是根本。该方法让我们自然想到数组的slice方法，实际上jquery正是利用Array的push和slice方法。

1，利用Array.prototype.slice方法将 伪数组 转成 数组

2，利用Array.prototype.push方法将 数组 转成 伪数组

 

以下示例更容易理解了：

var json = {0:'one',1:'two',2:'three',length:3}, //伪数组 ary = ['one','two','three'];//数组 //将伪数组转成数组 function setJsonToArray(json){ var slice = Array.prototype.slice; return slice.call(json,0); } //将数组转成伪数组 function setArrayToJson(ary){ var obj = {}, push = Array.prototype.push; push.apply(obj,ary); return obj; } console.log(setJsonToArray(json)); console.log(setArrayToJson(ary));

 

参考：http://snandy.javaeye.com/blog/580373

 

当然jq1.4.2中的slice方法调用了pushStack。这里简写了slice，如下：

 

slice : function(){ var ret = $();//关键的一句,构造一个新的jq对象， var ary = slice.apply(this,arguments);//这里的this是jq对象，根据参数转成数组子集 push.apply(ret,ary);//转成jq对象，即伪数组形式 return ret; },