フィッシャー - イェーツのシャッフルをわかりやすく説明してみた

クイズの問題

こちらを参照しました。 https://dotinstall.com/lessons/quiz_js/44207

ドットインストールはいつもわかりやすい。 勉強にはもってこいのサイト。

  var quizSet = [
    {q: 'What is A?', a: ['A0', 'A1', 'A2']},
    {q: 'What is B?', a: ['B0', 'B1', 'B2']},
    {q: 'What is C?', a: ['C0', 'C1', 'C2']}
  ];

  var currentNum = 0;



  function shuffle(arr) {
    var i;
    var j;
    var tmp;
    for (i = arr.length - 1; i >= 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      tmp = arr[i];
      arr[i] = arr[j];
      arr[j] = tmp;
    }
    return arr;
  }

  question.textContent = quizSet[currentNum].q;
  shuffledAnswers = shuffle(quizSet[currentNum].a);
  answers[0].textContent = shuffledAnswers[0];
  answers[1].textContent = shuffledAnswers[1];
  answers[2].textContent = shuffledAnswers[2];
})();
var quizSet = [
    {q: 'What is A?', a: ['A0', 'A1', 'A2']},

は回答と質問の配列。
配列の中にハッシュが入っている。
キーと値でデータを持っている。

{q: 'What is A?', a: ['A0', 'A1', 'A2']},

これだとキーがqで、 値が'What is A?'これがつまり質問
qというキーでアクセスすると、'What is A?'が取得できる。

quizSet[0].q;

でquizSetの配列の初めの要素のqつまり'What is A?'が取得できる
もう一つはいっている。それが回答
aがキー、 ['A0', 'A1', 'A2']が回答。
aのキーでアクセスすると、回答の配列が取得できる。

quizSet[0].a;

で回答の配列が取得できます。

でここからがシャッフル。 これが結構わかりにくい

//引数には配列を渡すみたい
 function shuffle(arr) {
    var i;
    var j;
    var tmp;
    for (i = arr.length - 1; i >= 0; i--) {
//乱数発生 →説明1
      j = Math.floor(Math.random() * (i + 1));
      tmp = arr[i];
      arr[i] = arr[j];
      arr[j] = tmp;
    }
    return arr;
  }

j = Math.floor(Math.random() * (i + 1));

範囲 乱数 配列      結果

1-8  6  1 2 3 4 5 8 7   6

1-8の間で乱数を発生 発生した乱数を取り出す
それを配列arr配列の中で置き換えている。
配列の一番最後に入れている。
二回目のループではこうなる

範囲 乱数 配列      結果(配列の最後に配置)

1-7  2  1 3 4 5 8 7   2 6

これを繰り返すと、配列の中がシャッフルされる。