Grow your CSS skills. Land your dream job.

Last updated on:

Shuffle Array

Technique #1

function Shuffle(o) {
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};

Usage

var testArray = [1,2,3,4,5];
Shuffle(testArray);

// jQuery to dump out new values to element with ID of 'dump'
$(function() {
   for (var i=0;i<testArray.length;i++) {
      $("#dump").append(testArray[i]);
   }
});

Technique #2

yourArray.sort(function() { return 0.5 - Math.random() });

Comments

  1. Sam
    Permalink to comment#

    Nice.. this code snippet helped me a lot! Thanks :)

  2. Permalink to comment#

    Hey, once again absolutely helpful, really glad to see that apart from a really good CSS resource, CSS-tricks is great as a JS asset as well!!
    thanks!!

  3. Permalink to comment#

    Hey,
    Very usefull! thanks! 1 question, can you explain me what technique 2 does?
    Especially the { return 0.5 – Math.random() });. How does this sort the array?

    Greetz

    • I’ll try my hand at explaining it.

      The sort function allows you to pass a compare function to it, what that function returns then sorts the object in the array.

      So if it returns -1 then object A will be given a lower index than B. 0 will leave their order the same, and 1 will give B a lower index than A. That is what I can figure from the documentation.

      But how does this apply to the code provided ?

      Math.random() returns a random number between 0 and 1. So putting in the 0.5 - Math.random() you will get a number between -1 and 1, which is what the sort function needs.

      So each object in the array is given a random index number and then sorted by that index.

      I could be wrong, I most likely am, but that is how I can interpret it. I’m 100% on the 0.5 - Math.Random part, but the sort function is where I am not completely certain.

      But hey it works right ?

  4. How this works is like follows:

    When such a function is passed into array.sort(), the array elements are sorted based on the relationship between each pair of elements “a” and “b” and the function’s return value. The three possible return numbers are: 0 (greater than 0):

    Less than 0: Sort “a” to be a lower index than “b”
    Zero: “a” and “b” should be considered equal, and no sorting performed.
    Greater than 0: Sort “b” to be a lower index than “a”

    When you do Math.random() it returns a random number between 0 and 1. So in 50% of the cases, the 0.5 in the above case will be smaller than the Math.random() number and in the other half of the cases, it will be larger. When it is smaller, the sort order will be ascending, when it is larger, the sort order will be descending. That leads to a random sort order of the array.

  5. Axel
    Permalink to comment#

    Do no use the Array.sort() technique! It’s doesn’t perform randomised shuffling. The Fisher-Yates algorithm, implemented in the first technique, is the way to go. The link below shows a cleaner implementation of this algorithm, and explains why the Array.sort() technique is wrong.

    http://sroucheray.org/blog/2009/11/array-sort-should-not-be-used-to-shuffle-an-array/

  6. Vagner

    You is a genius !!!! Thanks!

  7. eagle-design
    Permalink to comment#

    You is a genius !!!! Thanks!

    http://eagle-design.ir/

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".