StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>jQuery creates what are called (in the ES standard) array-like objects. In particular, they have a length property, and also (which makes use of the length property) they have the relevant items placed under integer-based indices.</p> <p>It's as simple as:</p> <pre><code>var arrayLike = {length: 3, 0:'first', 1:'second', 2:'third'}; Array.prototype.join.call(arrayLike, '|'); // "first|second|third" </code></pre> <p>If you take a look at <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" rel="nofollow noreferrer">the standard</a> (15.4.4), particularly the <code>Array.prototype</code> methods you'll see the following note under each and every one:</p> <blockquote> <p>NOTE The * 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 * function can be applied successfully to a host object is implementation-dependent.</p> </blockquote> <p>If you look at the description of these algorithms, they pretty much just use the length property to iterate over the object (in our case an <em>array-like</em> object) and access the values behind those integer-based keys. For that reason they're generic and work on regular js objects with the relevant properties.</p> <p>Essentially that's all jQuery does (if I remember correctly the building is done in sizzle, jquery's css selector engine). You can test this out/prove it in a variety of ways. For example, a standard js Array performs some magic when the length property is shortened, but the jquery object doesn't:</p> <pre><code>var arr = [1,2,3], $arr = $('div'); // assuming three divs arr.length=2; arr[2]; // undefined $arr.length=2; $arr[2]; // still references the div </code></pre> <p><a href="http://jsfiddle.net/cnkB9/" rel="nofollow noreferrer">http://jsfiddle.net/cnkB9/</a></p> <p>So jquery's <code>makeArray</code> converts the jquery array-like object, and makes it into an actual native js array, but as you said, then it doesn't have all the jquery methods attached.</p> <p>As for why it shows up in the console, I refer to this excellent answer: <a href="https://stackoverflow.com/questions/4951054/what-makes-firebug-chrome-console-treat-a-custom-object-as-an-array">What makes Firebug/Chrome console treat a custom object as an array?</a> that explains that the presence of the <code>length</code> property and <code>splice</code> function allow it to appear like an array in <strong>most</strong> consoles. As is mentioned, that isn't the case in FF4's Web Console, which just shows you that it's not a native js array. Interestingly enough, the <code>splice</code> function doesn't actually have to work, just be present, and be a function. For example:</p> <pre><code>>> console.log({length:2,0:'some',1:'thing',splice:new Function}); ["some", "thing"] </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload