JavaScript- 数组大小在洗牌后加倍，即使使用 slice()

Question

我有一个由 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));

Answer 1

你有没有可能给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>