Fisher-Yates 如何打乱 JavaScript 数组？

Question

I'm trying to modify this quiz app from a tutorial from Awais Mirza

I would like to pick a random selection of questions from a master array and push it in to a selection array the script uses to populate questions, so the quiz will give a random set of questions form the master array every time the quiz is run. I thought i could use Fisher-Yates shuffle to randomize the master array before pushing the selected number of questions into a selection array.

Why does the Fisher-Yates shuffle work with this array;

 var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; var i = arr.length, j, temp; while(--i > 0){ j = Math.floor(Math.random()*(i+1)); temp = arr[j]; arr[j] = arr[i]; arr[i] = temp; } console.log(arr);

but not with this array?

var Questions = [
    new Question("What comes after 1?", ["1", "2","3", "4"], "2"),
    new Question("What comes after 2?", ["1", "2", "3", "4"], "3"),
    new Question("What comes after 3?", ["1", "2", "3", "4"], "4")
];

Answer 1

The Fisher-Yates algorithm works exclusively with array indexes so you don't need different implementations depending on array contents .

To illustrate that I've moved the sorting code to a function so it can be reused:

 function shuffle(arr) { var i = arr.length, j, temp; while(--i > 0){ j = Math.floor(Math.random()*(i+1)); temp = arr[j]; arr[j] = arr[i]; arr[i] = temp; } } class Question { constructor(title, options, solution) { this.title = title; this.options = options; this.solution = solution; } } var integerArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; var questions = [ new Question("What comes after 1?", ["1", "2","3", "4"], "2"), new Question("What comes after 2?", ["1", "2", "3", "4"], "3"), new Question("What comes after 3?", ["1", "2", "3", "4"], "4") ]; shuffle(integerArray); shuffle(questions); console.log(integerArray, questions);

Answer 2

Could be a tad easier with randojs.com , which uses this method of shuffling, but it's completely preference.

 function Question(question, choices, answer){ this.question = question; this.choices = choices; this.answer = answer; } // create questions var questions = [ new Question("Which one is not an object oriented programming language?", ["Java", "C#","C++", "C"], "C"), new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"), new Question("There are ____ main components of object oriented programming.", ["1", "6","2", "4"], "4"), new Question("Which language is used for web apps?", ["PHP", "Python", "Javascript", "All"], "All"), new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], "Framework") ]; // Shuffle array var sequence = randoSequence(questions); sequence.forEach((item, i) => {sequence[i] = item.value;}); // choose 3 first questions from shuffeled array var selection = sequence.slice(0, 3); console.log(selection);

 <script src="https://randojs.com/1.0.0.js"></script>

Answer 3

I sloved it with this:

// create questions
var questions = [
    new Question("Which one is not an object oriented programming language?", ["Java", "C#","C++", "C"], "C"),
    new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
    new Question("There are ____ main components of object oriented programming.", ["1", "6","2", "4"], "4"),
    new Question("Which language is used for web apps?", ["PHP", "Python", "Javascript", "All"], "All"),
    new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], "Framework")
];

// Shuffle array
var arr = questions;
var i = arr.length, j, temp;
while(--i > 0){
    j = Math.floor(Math.random()*(i+1));
    temp = arr[j];
    arr[j] = arr[i];
    arr[i] = temp;
}

// choose 3 first questions from shuffeled array
var selection = arr.slice(0, 3);

// create quiz
var quiz = new Quiz(selection);

// display quiz
populate();

Thank you ever so much for your help :)