Javascript:javascriptで配列の中身をランダムに並び替える

Javascript配列の中身をランダム並び替える方法をメモします。

sort()メソッドを使用することで配列の順番を並び替えることができます。
引数がない場合はアルファベット順でソートされます。

今回はsort()メソッドに無名関数を指定し、random()メソッドで生成した値に
‘0.5’を引いた値で配列の順番をソートしています。


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

正の値、負の値、0で比較し配列を並び替えます。

下記は画像をランダムに並べ替えて表示した際の方法です。


複数の画像をランダム表示

javascript,jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // 配列を設定
        var img = new Array("img1.jpg", "img2.jpg", "img3.jpg");

        // 配列の中身をランダムに並び替える
        img.sort(
            function() {
                return Math.random() - 0.5;
            }
        );

        // 配列をループさせ、imgタグを出力
        for(i = 0; i < img.length; i++) {
            $("div#hoge").append('<img src="img/' + img[i] + '" />');
        }

    });
</script>

HTML

<div id="hoge"></div>

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です