Hvordan ser den mest effektive repeater ud i JavaScript?
Ved repeater forstår jeg en funktion, der kan gentage en streng n gange. Jeg bruger den slags repeatere i udstrakt grad, når jeg laver jQuery-plugins, så der ligger en potentiel forbedring af mine moduler, hvis jeg kan tune lidt på det område. Den mest oplagte måde at gentage, er ved hjælp af en for-next løkke:
String.prototype.repeatWithForNext = function(n) {
var ret;
for (var i = 0; i < n; i++)
ret += this;
return ret;
}
// Brug:
"Gentag dette".repeat(10);
Blandt mange jQuery-udviklere, er det meget udbredt at bruge en metode hvor man konstruerer et array objekt, med n+1 antal tomme elementer, og så kalder join med strengens som separatorparameter:
String.prototype.repeatWithArray = function(n) {
var arr = new Array(n + 1);
return arr.join(this);
};
Metoden er smart, men på mange niveauer forkert. Man bruger et objekt og dets funktioner på en utilsigtet måde, og resultatet er overraskende – smart.
Hvis man bruger IE’s script profiler, og laver en sammenligning mellem de to metoder, får man følgende resultat:
Array metoden er ca. 40% hurtigere. Det synes jeg måske er lidt overraskende, da man jo bruger et noget mere avanceret objekt.
Hvad så hvis man bruger en kombination af Array og Regex objektet? Jeg forsøgte bare for sjov, for det lyder jo ikke så effektivt vel:
String.prototype.repeatWithArrayAndRegex = function(n) {
var ret = new Array(n+1).join(" ");
return ret.replace(/./g, this);
}
Resultatet:
Wroooom! - Den metode er 66% hurtigere end for-next løkken. Jeg har reduceret processtiden på min jQuery-plugin med ca 30 %.
Som Rembrandt udtrykte det: “De ware schoonheid schuilt in de details.”.
Code on…