Unique random values from array of unique values javascript

Question

I have twelve squares and six of those are selected randomly and a style then applied. This is achieved by generating random values from an array of unique values. The problem is the random values being generated aren't unique e.g 5 could be chosen more than once. I've looked at so many posts on here and there seems to be a number of different ways of achieving this - shuffling etc. Which would be the most effective?

   for (var i = 0; i < 6 ; i++)
    (function (i) {
      setTimeout(function () {
        var rand = arr[Math.floor(Math.random() * arr.length)];
        var square = document.getElementById('square' + rand);
        square.style.background = black;
    if (i == 6) Reset();
   }, 1500 * i);
   })(i);
   };

you say you've found solutions, so what have you tried? I don't see any attempts in your code — charlietfl, Nov 29 '13 at 20:12
I didn't state that I'd found solutions - I stated that I'd read a number of posts on SO on this subject and was asking for an opinion on what method of achieving is the most effective. — user3047072, Nov 29 '13 at 20:15
pick one and try it...there is no `most effective`, or `easiest to insert`. — charlietfl, Nov 29 '13 at 20:20
@BrunoLM Thank you. The "square" elements are divs so yes can change them to have a new attribute? — user3047072, Nov 29 '13 at 20:21
An example of shuffling in javascript is given at http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript . If you have a small list of values, shuffling then selecting serially is a good way to get "only unique" numbers. As the number of options gets bigger, there are different techniques (some more memory intensive, others faster). There isn't a single "best" way. But in your case I would go with a simple shuffle. — Floris, Nov 29 '13 at 20:25

BrunoLM · Accepted Answer · 2013-11-29T20:29:35.540

2

Just for the sake of simplicity I will assume your elements have a class.

Example on jsFiddle

So, I would grab all elements:

var elements = document.getElementsByClassName("square");

Then I would create an array with the IDs

var ids = [];

for (var i = 0; i < elements.length; ++i)
{
    ids.push(elements[i].getAttribute("id"));
}

And then generate random numbers on the length of the array

var random = roundingFunction(Math.random() * ids.length);

Then retrieve the element at the index and remove from the array

var elementID = ids.splice(random, 1);

And repeat.

edited Nov 29 '13 at 20:29

answered Nov 29 '13 at 20:21

BrunoLM

97,872
84
296
452

2

Thank you @BrunoLM - its good to know there are some helpful people on here. – user3047072 Nov 29 '13 at 20:31

score 2 · Answer 2 · answered Nov 29 '13 at 20:25

There are bascially three different approaches:

Pick an item by random and repeat if it was used before.
Put all items in an array, pick by random and remove from the array.
Put all items in an array and shuffle.

Which one would be the most efficient can't be answered in the scope of your question. The difference between them is so small that it negligible considering how much the performance differs between browsers.

If you really need the most efficient, you have to try them all and test the performance in a wide variety of browser.

Otherwise just pick the one that seems easiest to implement. The are all good enough for any normal application.

Unique random values from array of unique values javascript

2 Answers2

Linked

Related