【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

javascript

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどうしたらいいのか調べてみた。
するとJavaScriptでは割と有名なシャッフルするアルゴリズムがあるようなので調べたところ「配列を拡張してみた。Array.shuffle() Array.clone() – JavaScript」というサイトで見つかりました。

アルゴリズムの難しい話は置いておいて、今回はこのアルゴリズムを利用して、配列をシャッフルした後にjQueryも使ってランダムに表示させていたいと思います。

Array自体をprototypeで拡張する

まぁそのまんまjavascriptのarray要素自体をprototypeで拡張させます。Fisher–Yatesアルゴリズムらしいです。
拡張したshuffleメソッドは普通のpush()のように使えます。

//シャッフルのアルゴリズム prototypeで拡張しておく
Array.prototype.shuffle = function() {
    var i = this.length;
    while (i) {
        var j = Math.floor(Math.random() * i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}

jqueryを利用した要素の削除と設定の流れ

jqueryのemptyメソッドとappendメソッドを利用した一連の流れを下記に記述。

//-----------------------
//　①liタグの要素を配列で管理
//----------------------
var list = [];

//-----------------------
//　②シャッフルする要素を配列につっこむ
//----------------------
$("ul#list li").each(function(i) {
    list[i] = $(this).text();

});

//-----------------------
//　③emptyで削除した後シャッフルした要素をappendする
//----------------------
$("#btn").click(function() {
    //empty
    $("ul#list").empty();
    list.shuffle();
    for (var i = 0; i < list.length; i++) {
        //ulに追加
        var $li = $("
  • ");
        $li.append(list[i])
        $("ul#list").append($li);
    }

    • ①シャッフルする為の配列を用意する。

    ②今回はliタグの要素だけども、each関数で「ul#list」内のliタグの要素のtextメソッドで取得して配列につっこむ。

    ③まず「ul#list」内の子要素（li要素）をjqueryのemptyメソッドを利用して完全に削除します。その後に②で取得しておいた配列をシャッフルする。
    その後に配列の要素を配列の長さ分for文で繰り返し処理をする。
    jqueryで新しくli要素を作成して、その要素に配列の要素を追加する。そしてまた「ul#list」の子要素としてappnedで新しく追加することによってランダムに表示されているようにする。

    jsfiddleで実際の動作を確認できます