巧用JS数组方法

Author : lovecicy

当我们用jQuery选择元素之后,如果要取到第一个元素,我们会用类似下面的方法
$('div')[0];
很自然的,我们会以为jQuery返回的是一个所有符合选择器条件的DOM元素的数组,因为我们不但可以通过$('div')[n]这种方式获取,也可以获取jQuery返回对象的length属性。但是今天看了篇文章,发现其实jQuery返回的是一个对象,而不是数组。我们可以通过$('div')[0]这种方式获取是因为jQuery对象在模拟数组对象。
看了些网上的文章,发现jQuery这种做法其实是对数组方法的巧妙使用,我们来看下面的代码:
var aPush = Array.prototype.push;
var testObj = {0:'a',1:'b'};
testObj.length = 2;
aPush.apply(testObj, ['c','d']);
console.log(aPush);

查看控制台,可以看到下面的输出:

Object {0: “a”, 1: “b”, 2: “c”, 3: “d”, length: 4}

通过实验,发现在chrome下,如果一个对象拥有length属性,就可以使用数组方法对其进行操作。但是对象如果是函数,则不行。其他浏览器待测验。

至于为什么我们可以对对象进行数组操作,ES5的规范中有这样一段话:

NOTE The push function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the push function can be applied successfully to a host object is implementation-dependent.
NOTE push函数被有意的设计成通用的;它并不要求它的this属性是一个Array对象。因此,它可以被其他对象作为方法使用。push方法是否能成功的被其他宿主对象apply依赖浏览器的实现。

而关于jQuery为什么要生成一个类数组对象,这里给了一个解释:F2ES

standard

Have your say