读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.iteye.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;
},

 

完整源码见附件