JavaScriptで配列の要素をランダムに並び替える・シャッフルする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで配列の要素をランダムに並び替える・シャッフルする方法について解説していきます。

1 JavaScriptで配列の要素をランダムに並び替える・シャッフルする方法
- 1.1 配列の要素をランダムに並び替える・シャッフルする関数
- 1.2 forEachでランダムに並び替える・シャッフルする
2 配列の要素をランダムに並び替える・シャッフルする関数のポイント
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

JavaScriptで配列の要素をランダムに並び替える・シャッフルする方法

配列の要素をランダムに並び替える・シャッフルする関数

次の関数が、配列の要素を並び替える・シャッフルする処理になります。

// 配列の要素をランダムに並び替える関数
const shuffleArray = (array) => {
  const cloneArray = [...array];

  for (let i = cloneArray.length - 1; 0 <= i; i--) {
    let randomNum = Math.floor(Math.random() * (i + 1));
    // 要素を一時的に保管する
    let tmpStorage = cloneArray[i];

    // 要素の保管場所を入れ替える
    cloneArray[i] = cloneArray[randomNum];
    cloneArray[randomNum] = tmpStorage;
  }
  return cloneArray;
};

console.log(shuffleArray([{id:1,age:23},{id:2,age:24},{id:3,age:25},{id:4,age:28},{id:5,age:35}, ]));

console.log(shuffleArray(['JavaScript', 'TypeScript', 'React', 'Next.js', 'Node.js', 'Express']));

forEachでランダムに並び替える・シャッフルする

forEachでランダムに並び替える・シャッフルするバージョンは、次のようになります。

const JsCategory = ['JavaScript', 'TypeScript', 'React', 'Next.js', 'Node.js', 'Express'];

JsCategory.forEach((item, idx) => {

  // ランダムの数値を取得する
  // 厳密には、(0 <= idx <= idx + 1) な数値を取得する
  let randomNum = Math.floor(Math.random() * (idx + 1));
  console.log({randomNum});
  // {randomNum: 0}

  // 要素を一時的に保管する
  let tmpStorage = JsCategory[idx];
  console.log({tmpStorage});
  // {tmpStorage: 'Express'}

  // 要素の保管場所を入れ替える
  JsCategory[idx] = JsCategory[randomNum];
  JsCategory[randomNum] = tmpStorage;
});

console.log('JsCategory', JsCategory);

配列の要素をランダムに並び替える・シャッフルする関数のポイント

Math.random()

Math.random() は、0以上1未満の「乱数」を返します。

// 1. Math.random() => 0以上1未満の「乱数」を返します
console.log(Math.random());
// 0.003657242827176832

Math.floor()

Math.floor() は、実引数に与えられた数値以下の「整数」を返します。

// 2. Math.floor() => 実引数に与えられた数値以下の「整数」を返します
console.log(Math.floor(2.25));
// 2

Math.floor() と Math.random() の組み合わせで数値を作成する

//「 0 <= randomNum <= 1 」な値をランダムに作成する
let randomNum = Math.floor(Math.random() * (1 + 1));
console.log({randomNum});

//「 0 <= randomNum2 <= 2 」な値をランダムに作成する
let randomNum2 = Math.floor(Math.random() * (2 + 1));
console.log({randomNum2});

//「 0 <= randomNum3 <= 3 」な値をランダムに作成する
let randomNum3 = Math.floor(Math.random() * (3 + 1));
console.log({randomNum3});