JavaScript - размер массива удваивается после перетасовки даже с использованием slice () - PullRequest
Новая
       13

JavaScript - размер массива удваивается после перетасовки даже с использованием slice ()

0 голосов
/ 10 октября 2018

У меня есть массив из 5 слов, которые я хочу произвольно разместить в разделе таблицы HTML.Когда я запускаю приведенный ниже код, ключевые слова случайно появляются в таблице, но их числа удваиваются (я получаю всего 10 слов в сетке).Я не уверен, почему клонирование со слайсом не работает.Я новичок в JS и пока не понимаю всех его технических особенностей.Любые отзывы о том, что я могу делать неправильно, будут оценены.

var keywords = ["s1", "s2", "s3", "s4", "s5"];
function shuffle(array) {
  var currentIndex = array.length, temp, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temp = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temp;
} 
 return array;
}
function drawBoard(rows, cols){
    var grid = document.getElementById("grid");
    grid.className = 'grid';
    for (var r = 0; r < rows; r++){
        var row = grid.appendChild(document.createElement('tr'));
        for (var c = 0; c < cols; c++){
            var cell = row.appendChild(document.createElement('td'));
        }       
    }
    grid.rows[0].cells[0].innerHTML = "START";
    grid.rows[7].cells[7].innerHTML = "FINISH";
    const filtered = Array.from(grid.querySelectorAll('td')).filter(({cellIndex, parentElement: {rowIndex}}) => rowIndex  && rowIndex < ROW - 1 && cellIndex && cellIndex < COL -1);
    shuffle(filtered);
    const sliced = filtered.slice(0, keywords.length);
    const index = Math.floor(Math.random() * keywords.length);
    sliced.forEach((cell, index) => cell.innerHTML = keywords[index]);
    return grid;
}
const table = document.body.appendChild(drawBoard(ROW, COL));

1 Ответ

0 голосов
/ 10 октября 2018

Есть ли вероятность, что вы могли бы звонить drawBoard дважды?Я получаю только 5 записей, когда выполняю код (фрагмент ниже) 

var ROW = 8;
var COL = 8;

var keywords = ["s1", "s2", "s3", "s4", "s5"];
function shuffle(array) {
  var currentIndex = array.length, temp, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temp = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temp;
} 
 return array;
}


function drawBoard(rows, cols){
    var grid = document.getElementById("grid");
    grid.className = 'grid';
    for (var r = 0; r < rows; r++){
        var row = grid.appendChild(document.createElement('tr'));
        for (var c = 0; c < cols; c++){
            var cell = row.appendChild(document.createElement('td'));
        }       
    }
    
    
    grid.rows[0].cells[0].innerHTML = "START";
    grid.rows[7].cells[7].innerHTML = "FINISH";
    const filtered = Array.from(grid.querySelectorAll('td')).filter(({cellIndex, parentElement: {rowIndex}}) => rowIndex  && rowIndex < ROW - 1 && cellIndex && cellIndex < COL -1);
    shuffle(filtered);
    const sliced = filtered.slice(0, keywords.length);
    const index = Math.floor(Math.random() * keywords.length);
    sliced.forEach((cell, index) => cell.innerHTML = keywords[index]);
    return grid;
}
const table = document.body.appendChild(drawBoard(ROW, COL));
<table id='grid'></table>
...