Skip to content

Instantly share code, notes, and snippets.

@mrspeaker
Created April 27, 2011 12:58
Show Gist options
  • Save mrspeaker/944209 to your computer and use it in GitHub Desktop.
Save mrspeaker/944209 to your computer and use it in GitHub Desktop.
Collection mapping test: jQuery vs jQuery vs JavaScript
<!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>
// 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;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment