Не повторяющиеся случайные буквы в таблице

Question

Я пытаюсь создать таблицу с повторяющимися случайными буквами (только в верхнем регистре) с использованием JavaScript. Кто-то отправил ответ, но он был удален до того, как я получил шанс спросить: 1) Почему существует var x и var y вместо наличия только var x? 2) Почему вы помещаете i-1 в обратные буквы [i-1]?

HTML5:

<table class="bingo"> 
    <tr> 
     <td id="square0"></td> 
     <td id="square1"></td> 
     <td id="square2"></td> 
    </tr> 
    <tr> 
     <td id="square3"></td> 
     <td id="square4"></td> 
     <td id="square5"></td> 
    </tr> 
    <tr> 
     <td id="square6"></td> 
     <td id="square7"></td> 
     <td id="square8"></td> 
    </tr> 
</table> 

JS

//Create capital letters A - Z array 
var letters = []; 
    for (var i = 65; i < 91; i++) { 
     letters.push(String.fromCharCode(i)); 
} 

//Confuse about why there is a var x and a var y? 
    for (var i = 0; i < 26; i++) { 
     var x = Math.floor(Math.random() * 26); 
     var y = Math.floor(Math.random() * 26); 
     var temp = letters[x]; 
     letters[x] = letters[y]; 
     letters[y] = temp; 
} 

var rLetter = function(i) { 
    return letters[i-1]; 
}; 

window.onload = function() { 
    //calls the function 
    $("square0").innerHTML = rLetter(1); 
    $("square1").innerHTML = rLetter(2); 
    $("square2").innerHTML = rLetter(3); 
    $("square3").innerHTML = rLetter(4); 
    $("square4").innerHTML = rLetter(5); 
    $("square5").innerHTML = rLetter(6); 
    $("square6").innerHTML = rLetter(7); 
    $("square7").innerHTML = rLetter(8); 
    $("square8").innerHTML = rLetter(9); 

}

Answer 1

var letters = []; 
for (var i = 65; i < 91; i++) { 
    letters.push(String.fromCharCode(i)); 
} 

Код выше создает массив с символами от А до Z в алфавитный, не в случайном порядке.

for (var i = 0; i < 26; i++) { 
    var x = Math.floor(Math.random() * 26); 
    var y = Math.floor(Math.random() * 26); 
    var temp = letters[x]; 
    letters[x] = letters[y]; 
    letters[y] = temp; 
} 

Отвечая на ваш первый вопрос, что этот код делает это создание двух случайных чисел (x и y) и переменную с именем temp для хранения содержимого letters[x]. Затем функция назначает letters[x] тем, что было letters[y], а затем присвоить letters[x] как бы то ни было letters[y]. Целью этого является создание рандомизированного массива letters.

Допустим, что x = 1 и y = 2:

var temp = 'B';  // because letters[1] = B 
letters[1] = 'C'; // because letters[2] = C 
letters[2] = 'B'; // because temp = B 

Так что пока letters массив выглядит следующим образом:

letters[0] = A 
letters[1] = C 
letters[2] = B 
// etc... 

Это в основном только рандомизации весь массив.

Наконец, отвечая на второй вопрос, почему вы положили [i-1] потому, что индекс letters массива начинается с 0. Таким образом, при вызове rLEtters(1), это на самом деле захвата 0 (1-1 = 0) из letters массива.

Answer 2

1) Почему существует var x и var y вместо наличия только var x?

Похоже, что этот код создает массив из всех заглавных букв, а затем «рандомизирует» их путем переключения места на 2 буквы 26 раз. 2 необходимо создать переменную, чтобы удерживать позицию каждой из 2 букв, которые переключаются.

2) Почему вы помещаете i-1 в обратные буквы [i-1]?

Массив с нулевым индексом означает, что первое значение в массиве имеет буквы [0]. Использование i-1 позволяет получить первое значение в массиве с помощью rLetter (1), а не получить второе значение.

Я бы лично сделал это так:

var usedLetters = []; 

var rLetter = function(i) { 
    var alreadyUsed = 0; 
    var letter; 
    while(alreadyUsed >= 0) { 
    var x = Math.floor(Math.random() * 26); 
    letter = String.fromCharCode(65 + x); 
    alreadyUsed = usedLetters.indexOf(letter); 
    } 
    usedLetters.push(letter); 
    return letter; 
}; 


window.onload = function() { 
    //calls the function 
    $("square0").innerHTML = rLetter(1); 
    $("square1").innerHTML = rLetter(2); 
    $("square2").innerHTML = rLetter(3); 
    $("square3").innerHTML = rLetter(4); 
    $("square4").innerHTML = rLetter(5); 
    $("square5").innerHTML = rLetter(6); 
    $("square6").innerHTML = rLetter(7); 
    $("square7").innerHTML = rLetter(8); 
    $("square8").innerHTML = rLetter(9); 

}

Извините за ошибки кода. У меня очень мало опыта в JS.

Answer 3

Если вы действительно хотите случайную перетасовку (по крайней мере, алгоритмически), вы не можете просто выполнить 26 случайных свопов букв (как это сделал другой ответ).

Результат этого смещен - см. Implementation errors in Fisher-Yates shuffle & также Jeff Atwood's post on naïveté.

Ниже я использовал реализацию Майка Бостока в Shuffle от Fisher-Yates, чтобы произвести непредвзятое случайное упорядочение букв (вплоть до пределов генератора случайных чисел javascript).

// create array of uppercase letters 
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); 

// implentation of the Fischer-Yeates shuffle 
// as written by Mike Bostock (http://bost.ocks.org/mike/shuffle/) 
function shuffle(array) { 
    var m = array.length, t, i; 

    // While there remain elements to shuffle… 
    while (m) { 

    // Pick a remaining element… 
    i = Math.floor(Math.random() * m--); 

    // And swap it with the current element. 
    t = array[m]; 
    array[m] = array[i]; 
    array[i] = t; 
    } 

    return array; 
} 

window.onload = function() { 

    var shuffled = shuffle(letters); 

    for (var i=0; i<9; i++) { 
     $("#square" + i).html(shuffled[i]); 
    } 

} 

Codepen here.