I have stumbled into several methods of looping in JavaScript, what I like the most is:
for(var i = 0; i < a.length; i++){
var element = a[i];
}
But as tested here (http://www.robertnyman.com/2008/04/11/javascript-loop-performance/), it should probably be written so that the length is only calculated once.
In jQuery there is a .each that you can stick a function. I like this a little better, because I don't have to type the array twice, like in the above solution.
If JavaScript supported macros it would be a piece of cake to roll your own, but sadly it does not.
So what do you guys use?
I've started using iterators where relevant. Performance is reasonable, however more importantly it allows you to encapsulate the looping logic:
function createIterator(x) {
var i = 0;
return function(){
return x[i++];
};
}
Then to use:
var iterator=createIterator(['a','b','c','d','e','f','g']);
iterator();
returns "a";
iterator();
returns "b";
and so on.
To iterate the whole list and display each item:
var current;
while(current=iterator())
{
console.log(current);
}
Be aware that the above is only acceptable for iterating a list that contains "non-falsy" values. If this array contained any of:
0
false
""
null
NaN
the previous loop would stop at that item, not always what you want/expect.
To avoid this use:
var current;
while((current=iterator())!==undefined)
{
console.log(current);
}
Small improvement to the original, to only calculate the array size once:
for(var i = 0, len = a.length; i < len; i++){ var element = a[i]; }
Also, I see a lot of for..in loops. Though keep in mind that it's not technically kosher, and will cause problems with Prototype specifically:
for (i in a) { var element = a[i]; }
Just store the length in a variable first.
var len = a.length;
for (var i = 0; i < len; i++) {
var element = a[i];
}
I know I'm late to the party, but I use reverse loops for loops that don't depend on the order.
Very similar to #Mr. Muskrat's - but simplifying the test:
var i = a.length, element = null;
while (i--) {
element = a[i];
}
You could just always use a while loop, and compute the array limit before hand.
Var max = a.length-1;
var i = 0;
while(i <= max)
{
var element = a[i];
i++;
}
If you have many elements in the array and speed is an issue then you want to use a while loop that iterates from highest to lowest.
var i = a.length;
while( --i >= 0 ) {
var element = a[i];
// do stuff with element
}
I don't use it myself, but one of my colleagues uses this style:
var myArray = [1,2,3,4];
for (var i = 0, item; item = myArray[i]; ++i) {
alert(item);
}
like Ash's answer, this will hit issues if you've got "falsey" values in your array. To avoid that problem change it to (item = myArray[i]) != undefined
I don't see what the problem with using a standard for(;;) loop is.
A little test
var x;
var a = [];
// filling array
var t0 = new Date().getTime();
for( var i = 0; i < 100000; i++ ) {
a[i] = Math.floor( Math.random()*100000 );
}
// normal loop
var t1 = new Date().getTime();
for( var i = 0; i < 100000; i++ ) {
x = a[i];
}
// using length
var t2 = new Date().getTime();
for( var i = 0; i < a.length; i++ ) {
x = a[i];
}
// storing length (pollution - we now have a global l as well as an i )
var t3 = new Date().getTime();
for( var i = 0, l = a.length; i < l; i++ ) {
x = a[i];
}
// for in
var t4 = new Date().getTime();
for( var i in a ) {
x = a[i];
}
// checked for in
var t5 = new Date().getTime();
for( var i in a ) {
if (a.hasOwnProperty(i)) {
x = a[i];
}
}
var t6 = new Date().getTime();
var msg = 'filling array: '+(t1-t0)+'ms\n'+
'normal loop: '+(t2-t1)+'ms\n'+
'using length: '+(t3-t2)+'ms\n'+
'storing length: '+(t4-t3)+'ms\n'+
'for in: '+(t5-t4)+'ms\n'+
'checked for in: '+(t6-t5)+'ms';
console.log( msg );
results in:
filling array: 227ms
normal loop: 21ms
using length: 26ms
storing length: 24ms
for in: 154ms
checked for in: 176ms
So:- for in's take the longest, using the length property (which is a property and doesn't need to be calculated) is nearly as fast as storing it first - which is only a whisker slower than using an integer.
AND a for() is the usual way to loop over an array, which everyone expects and understands.
All of them add a variable to the scope they run in - i - which is a common name for this use and so shouldn't be used for other things. Storing the length first adds another var - l - to the scope, which is unnecesary
So, first you identify the perfect javascript loop, I believe it should look like this:
ary.each(function() {$arguments[0]).remove();})
This may require the prototype.js library.
Next, you get disgustet with the arguments[0] part and have the code be produced automatically from your server framework. This works only if the ladder is Seaside.
Now, you have the above generated by:
ary do: [:each | each element remove].
This comes complete with syntax completion and translates exactly to the above javascript. And it will make people's head spin that haven't used seasides prototype integration before, as they read your code. It sure makes you feel cool, too. Not to mention the gain in geekiness you can get here. The girls love it!
Related
I want to display an array without showing of indexes. The for loop returns the array indexes which is not showing in usual declaration.
I want to send an array like [1,2,3 ...] but after retrieving from for loop, I haven't the above format. How can I store my values as above.
var a = [];
for (var i = 1; i < 8; i++) {
a[i] = i;
};
console.log(a);
Outputs:
[1: 1, 2: 2 ...]
Desired output:
[1,2,3]// same as console.log([1,2,3])
Array indices start at zero, your loop starts at 1, with index 0 missing you have a sparse array that's why you get that output, you can use push to add values to an array without using the index.
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
console.log(a);
The problem is that you start your array with 1 index, making initial 0 position being empty (so called "hole" in array). Basically you treat array as normal object (which you can do of course but it defeats the purpose of array structure) - and because of this browser console.log decides to shows you keys, as it thinks that you want to see object keys as well as its values.
You need to push values to array:
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
I have to disagree with the answers provided here. The best way to do something like this is:
var a = new Array(7);
for (var i = 0; i < a.length; i++) {
a[i] = i + 1;
}
console.log(a);
Your code is making each index equal to i, so use it this way
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
console.log(a);
I use following code to reset a deleted flag:
for( var prefix in $42.words ) {
var words = $42.words[prefix]; // words is an array of objects
for( var j=0 ; j<words.length ; j++ ) $42.words[prefix][j].deleted = false;
}
The elements of the array are also objects.
Is it possible to implement this in a simpler or faster way?
This is a little bit faster, because there's only one lookup for words.length and no lookups for
$42.words[prefix] in the inner loop:
for( var prefix in $42.words ) {
var words = $42.words[prefix];
for( var j = words.length - 1; j >= 0; j-- ) words[j].deleted = false;
}
something like:
given some stub data. If I had an example of your data, that would be best:
var $42 = {};
$42.words = [{isOn:true, deleted:true},{isOn:true, deleted:true},{isOn:true, deleted:true}];
$42['words'].forEach(function(obj,i){
obj.deleted = false;
});
I have the following javascript
information0 = xmlDoc.getElementsByTagName("info")[0].textContent;
information1 = xmlDoc.getElementsByTagName("info")[1].textContent;
information2 = xmlDoc.getElementsByTagName("info")[2].textContent;
information3 = xmlDoc.getElementsByTagName("info")[3].textContent;
information4 = xmlDoc.getElementsByTagName("info")[4].textContent;
information5 = xmlDoc.getElementsByTagName("info")[5].textContent;
information6 = xmlDoc.getElementsByTagName("info")[6].textContent;
I want to create a new var for each index number. There are 600 in total. How can I do this using a for loop?
Thanks in advance
The best thing here is to use an array, not a bunch of individual variables.
var information = [];
var index;
var info = xmlDoc.getElementsByTagName("info");
for (index = 0; index < info.length; ++index) {
information[index] = info[index].textContent;
}
Um... use an array? Also, don't call getElementsByTagName repeatedly, it's expensive!
var tags = xmlDoc.getElementsByTagName('info'), l = tags.length, i, information = [];
for( i=0; i<l; i++) information[i] = tags[i].textContent;
If you're in a reasonably up-to-date browser:
var information = [].map.call(xmlDoc.getElementsByTagName('info'),function(a) {return a.textContent;});
Like this:
var information = [],
i,
elements = xmlDoc.getElementsByTagName("info"),
n = elements.length;
for (i = 0; i < n; ++i) {
information[i] = elements[i].textContent;
}
You need to use an array.
var infoTags = xmlDoc.getElementsByTagName("info"),
i = 0,
len = infoTags.length,
values = []; //array literal syntax, you could also use new Array()
for (; i < len; i++) {
values.push(infoTags[i].textContent); //push the textContent into the array
}
Things that you should note:
I cached the result of getElementsByTagName instead of performing the query multiple times.
I cached the length property of infoTags. That avoids multiple property lookups to access infoTags.length on every iterations. Property lookups are expensive in JavaScript.
To know how you can work with arrays, have a look at the Array object.
-
I am having issues with a couple arrays below and the match method. On my page I call the Checkout() function and it sets a temporary array equal to the array I've been building with different options. It then loops through the temporary array and removes html from one of the elements. The issue is that when I alert the array Remote.Cart.products before the loop it is exactly as it was built, but when I call the function again the exact same alert shows the new updated values even though I am not modifying the Remote.Cart.products array anywhere in the function.
function Checkout() {
tmp = null;
tmp = Remote.Cart.products;
alert( Remote.Cart.products );
for ( i = 0, li = tmp.length; i < li; i++ ) {
for ( j = 0, lj = tmp[ i ][1].length; j < lj; j++ ) {
tmp[ i ][1][j][1] = tmp[ i ][1][j][1].match(/<a\s+[^>]*href="([^\"]*)"[^>]*>(.*)<\/a>/i)[2];
}
}
}
Your help / insight is much appreciated!
You are using the same array. Just a different variable that points to the same array. In memory it's the same object.
You need to rebuild the array in your loop so that you can get an identical but new array.
More info on copying arrays and other objects can be found here: http://my.opera.com/GreyWyvern/blog/show.dml/1725165
Clint, you have to understand that tmp and Remote.Cart.products are different names for the same array. If you want to clone the array, do:
var tmp = [];
for(var i = 0; i < Remote.Cart.products.length; i++)
{
tmp[i] = []
for(var j = 0; j < Remote.Cart.products[i].length; j++)
{
tmp[i][j] = [];
for(var k = 0; k < Remote.Cart.products[i][j].length; k++)
{
tmp[i][j][k] = Remote.Cart.products[i][j][k].slice();
}
}
}
EDIT: Nesting corrected thanks to Squeegy
"even though I am not modifying the Remote.Cart.products array anywhere in the function"
tmp = Remote.Cart.products;
...
tmp[ i ][1][j][1] = ...
It sure looks like you are.
I have a comma separated string, out of which I need to create a new string which contains a random order of the items in the original string, while making sure there are no recurrences.
For example:
Running 1,2,3,1,3 will give 2,3,1 and another time 3,1,2, and so on.
I have a code which picks a random item in the original string, and then iterates over the new string to see if it does not exist already. If it does not exist - the item is inserted.
However, I have a feeling this can be improved (in C# I would have used a hashtable, instead of iterating every time on the new array). One improvement can be removing the item we inserted from the original array, in order to prevent cases where the random number will give us the same result, for example.
I'd be happy if you could suggest improvements to the code below.
originalArray = originalList.split(',');
for (var j = 0; j < originalArray.length; j++) {
var iPlaceInOriginalArray = Math.round(Math.random() * (originalArray.length - 1));
var bAlreadyExists = false;
for (var i = 0; i < newArray.length; i++) {
if (newArray[i].toString() == originalArray[iPlaceInOriginalArray].toString()) {
bAlreadyExists = true;
break;
}
}
if (!bAlreadyExists)
newArray.push(originalArray[iPlaceInOriginalArray]);
}
Thanks!
You can still use a 'hash' in javascript to remove duplicates. Only in JS they're called objects:
function removeDuplicates(arr) {
var hash = {};
for (var i=0,l=arr.length;i<l;i++) {
hash[arr[i]] = 1;
}
// now extract hash keys... ahem...
// I mean object members:
arr = [];
for (var n in hash) {
arr.push(n);
}
return arr;
}
Oh, and the select random from an array thing. If it's ok to destroy the original array (which in your case it is) then use splice:
function randInt (n) {return Math.floor(Math.random()*n)}
function shuffle (arr) {
var out = [];
while (arr.length) {
out.push(
arr.splice(
randInt(arr.length),1 ));
}
return out;
}
// So:
newArray = shuffle(
removeDuplicates(
string.split(',') ));
// If you sort the first array, it is quicker to skip duplicates, and you can splice each unique item into its random position as you build the new array.
var s= 'Function,String,Object,String,Array,Date,Error,String,String,'+
'Math,Number,RegExp,Group,Collection,Timelog,Color,String';
var A1= s.split(',').sort(), A2= [], tem;
while(A1.length){
tem= A1.shift();
while(A1[0]== tem) tem= A1.shift();
if(tem) A2.splice(Math.floor(Math.random()*A2.length), 0, tem);
}
alert(A2.join(', '))
With your solution, you are not guaranteed not to pick same number several times, thus leaving some others of them never being picked. If the number of elements is not big (up to 100), deleting items from the source array will give the best result.
Edit
originalArray = originalList.split(',');
for (var j = 0; j < originalArray.length; j++) {
var iPlaceInOriginalArray = Math.round(Math.random() * (originalArray.length - 1 - j));
var bAlreadyExists = false;
for (var i = 0; i < newArray.length; i++) {
if (newArray[i].toString() == originalArray[iPlaceInOriginalArray].toString()) {
bAlreadyExists = true;
break;
}
}
var tmp = originalArray[originalArray.length - 1 - j];
originalArray[originalArray.Length - 1 - j] = originalArray[iPlaceInOriginalArray];
originalArray[iPlaceInOriginalArray] = tmp;
if (!bAlreadyExists)
newArray.push(originalArray[iPlaceInOriginalArray]);
}