JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列をランダム化（シャッフル）する方法

JavaScriptの配列をランダムに並び替えて、要素をシャッフルした状態で表示したいケースはよくあります。そのような場合は、以下のコードを実行することで簡単に実現できます。

コード例

<html>
<body>
<script>
function randomFunc(myArr) {
   var l = myArr.length, temp, index;
   while (l > 0) {
      index = Math.floor(Math.random() * l);
      l--;
      temp = myArr[l];
      myArr[l] = myArr[index];
      myArr[index] = temp;
   }
   return myArr;
}
var arr = [10, 20, 30, 40, 50];
document.write(randomFunc(arr));
</script>
</body>
</html>

出力結果

20,50,40,30,10

※ Math.random() を使用しているため、実行するたびに出力される順序は変わります。

コードの仕組み

この関数は、Fisher-Yates（フィッシャー・イェーツ）シャッフルと呼ばれる古典的なアルゴリズムを採用しています。処理の流れは以下の通りです。

  • 配列の末尾から先頭に向かってループ処理を行います。
  • Math.random() と Math.floor() を組み合わせて、0 以上 l 未満のランダムなインデックスを生成します。
  • 変数 temp を使って、現在の末尾の要素と選ばれたインデックスの要素を入れ替えます。
  • この操作をすべての要素に対して繰り返すことで、シャッフルが完了します。

このアルゴリズムの計算量は O(n) と効率的で、すべての要素がどの位置にも等しい確率で配置されるため、偏りのない公平なシャッフルが可能です。単純な sort() にランダム値を渡す方法と比べて精度が高く、実務でも広く推奨されている手法です。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ