public
Created

Collection mapping test: jQuery vs jQuery vs JavaScript

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!DOCTYPE html>
<html>
<head>
<title>Collection mapping: jQuery vs jQuery vs JavaScript</title>
</head>
<body>
<h1>Comparing Maps</h1>
<h2>jQuery vs jQuery vs JavaScript</h2>
<p>Output is in the JavaScript console.</p>
<p>For more info, view source (or visit <a href="http://www.mrspeaker.net/2011/04/27/reducing-map/">Mr Speaker's "reducing map"</a>)
 
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="mapper.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
mapper.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
// Log and run mapping function over a collection
function mapper(description, collection, func) {
console.group(description);
console.log("Before:", collection);
 
// Run it
var results = func(collection);
console.log("After:", results);
console.groupEnd();
}
 
// Exercise 1a: inline jQuery map. $("#list li").map(...)
mapper(
"1a: inline jQuery map. $('#list li').map(...)",
$("#list li"),
function(coll) {
return coll.map(function(){
console.log("this:", this, " args:", arguments);
return parseInt($(this).text(), 10);
});
});
 
// Exercise 1b: global jQuery map. $.map($("#list li"),...)
mapper(
"1b: global jQuery map. $.map($('#list li'),...)",
$("#list li"),
function(coll) {
return $.map(coll, function(el){
console.log("this:", this, " args:", arguments);
return parseInt($(el).text(), 10);
});
});
 
// Exercise 1c: JavaScript map over array
mapper(
"1c: JavaScript map over array",
$("#list li").get(),
function(coll) {
return coll.map(function(el, index, something){
console.log("this:", this, " args:", arguments);
return parseInt($(el).text(), 10);
});
});
 
// Exercise 1d: JavaScript map over jQuery collection
mapper(
"1d: JavaScript map over jQuery collection (Array.proto.call)",
$("#list li"),
function(coll) {
return Array.prototype.map.call(coll, function(el){
console.log("this:", this, " args:", arguments);
return parseInt($(el).text(), 10);
});
});
 
 
var holey = [ "1", "2", null, ["4a", "4b"], , "6"];
 
// Exercise 2a: jQuery global map-to-index over "holey" array
mapper(
"2a: jQuery global map-to-index over 'holey' array",
holey,
function(coll) {
return $.map(coll, function(el, index){
return index;
});
});
 
// Exercise 2b: JavaScript map-to-index over holey array
mapper(
"2b: JavaScript map-to-index over 'holey' array",
holey,
function(coll) {
return coll.map(function(el, index){
return index;
});
});
// Exercise 2c: JavaScript map-to-element over holey array
mapper(
"2c: JavaScript map-to-element over 'holey' array",
holey,
function(coll) {
return coll.map(function(el){
return el;
});
});
 
// Exercise 2d: jQuery global map-to-element over holey array
mapper(
"2d: jQuery global map-to-element over 'holey' array",
holey,
function(coll) {
return $.map(coll, function(el){
return el;
});
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.