JavaScript:配列内の要素をシャッフル(ランダムソート)する方法

Tips

JavaScript:配列内の要素をシャッフル(ランダムソート)する方法

JavaScriptで配列内の要素をシャッフル(ランダムソート)する方法で、理論上は偏りなくシャッフルできるアルゴリズムとして有名な「Fisher–Yates shuffle」を用いたものになります。

※「Fisher–Yates shuffle」については割愛するので、詳しく知りたい方は「フィッシャー–イェーツのシャッフル - Wikipedia」を参照してください。

JavaScript

const shuffle = ([...array]) => {
  for (let i = array.length - 1; i >= 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

ざっくりになりますが動きとしては、まず配列内の末尾要素からループを開始してランダム値(サンプルコードのj)を取得し、その後ijの値を用いて要素の並び替えを行うというもので、要素の並び替え部分は分割代入を用いることで以前からよく知られている記述よりもシンプルにできます。

関数使用時は下記のような形で記述し、このサンプルコードの場合は1〜10までの数値をランダムに並び替えています。

JavaScript

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(shuffle(array)); // [2, 8, 4, 7, 10, 3, 1, 6, 5, 9]

for (let i = 0; i < 10; i++) {
  console.log(shuffle(array));
}
// [9, 7, 5, 8, 3, 4, 1, 6, 10, 2]
// [5, 8, 7, 1, 3, 9, 4, 10, 2, 6]
// [7, 5, 9, 6, 2, 4, 3, 10, 8, 1]
// [4, 5, 7, 10, 2, 8, 6, 1, 3, 9]
// [1, 5, 10, 6, 2, 3, 4, 7, 8, 9]
// [9, 7, 3, 1, 4, 2, 10, 8, 6, 5]
// [2, 8, 9, 10, 6, 5, 4, 7, 3, 1]
// [5, 4, 2, 10, 3, 6, 7, 1, 8, 9]
// [2, 8, 3, 5, 10, 4, 9, 6, 7, 1]
// [5, 10, 8, 2, 1, 9, 6, 3, 4, 7]

※出力結果は例となります。

また、複数の配列を結合してシャッフルさせたい場合は下記のような形で記述します。
引数部分でスプレッド構文を用いており、...配列名という形で,区切りに記述していきます。

JavaScript

const array01 = [1, 2, 3, 4, 5];
const array02 = [6, 7, 8, 9, 10];

console.log(shuffle([...array01, ...array02])); // [3, 6, 5, 9, 2, 7, 4, 1, 8, 10]

for (let i = 0; i < 10; i++) {
  console.log(shuffle([...array01, ...array02]));
}
// [8, 1, 5, 3, 7, 6, 10, 2, 4, 9]
// [4, 9, 3, 5, 7, 8, 6, 2, 1, 10]
// [10, 3, 2, 5, 7, 4, 1, 6, 9, 8]
// [7, 6, 4, 10, 8, 1, 3, 9, 5, 2]
// [6, 9, 5, 3, 2, 8, 7, 4, 10, 1]
// [4, 2, 6, 9, 8, 7, 5, 10, 1, 3]
// [10, 2, 5, 1, 8, 4, 6, 9, 3, 7]
// [2, 3, 10, 7, 5, 9, 4, 8, 1, 6]
// [4, 2, 8, 6, 3, 7, 5, 1, 10, 9]
// [6, 5, 3, 9, 4, 7, 10, 8, 2, 1]

※出力結果は例となります。

Close the search window,
please press close button or esc key.