從 HTML 輸入字段創建隨機 javascript 數組

Question

我有一個基本的 HTML 表單，要求輸入 1 到 10 之間的數字。基於該數字，我想創建一個新數組。 現在，代碼顯示了新創建數組的警告框，但最終它將是一個顯示結果的表格。 當前數組有 10 個值，我希望它隨機生成一個新數組。 我想我擁有它，只是缺少一件事或幾件事。

function createRandomArray () {

var numOfGamesElement = document.getElementById("numOfGames");
var numOfGames = numOfGamesElement.value;

var gamesPicked [];

  const boardGames = ["UNO", "Monopoly", "Clue", "Pandemic", "Catan", "Articulate!", "Codenames", "Fallout", "Candy Land", "Scrabble"];


let gamesPicked = boardGames[Math.floor(Math.random() * boardGames.length)];

for(let i = 0; i < numOfGames; i++){
  gamesPicked.push(i);
}
  alert(gamesPicked.join("\n"));
//createTable(gamesPicked)
}

Answer 1

一個問題是您的隨機游戲選擇數組中可能會出現重復項。 打亂數組（隨機化）然后只獲取 X 項的slice可能會更好，就像這樣。 請注意，我通過在前面加上+將numOfGames值從字符串更改為數字

/* Randomize array in-place using Durstenfeld shuffle algorithm */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}    
const boardGames = ["UNO", "Monopoly", "Clue", "Pandemic", "Catan", "Articulate!", "Codenames", "Fallout", "Candy Land", "Scrabble"];    
function createRandomArray () {
   let numOfGames = +document.getElementById("numOfGames").value || 0;
   let gamesPicked = shuffleArray(boardGames).slice(0, numOfGames)
   alert(gamesPicked.join("\n"));
}

Answer 2

你可以像這樣使用vanilla JS來做到這一點

function samples(array, length) {
    var samplesSet = new Set();
    if (array.length < length) {
        throw Error("requested length is greater than given array");    
    }
    while(samplesSet.size < length) {
        samplesSet.add(array[Math.floor(Math.random() * array.length)]);
    }
    return [...samplesSet];
}
function createRandomArray () {

var numOfGamesElement = document.getElementById("numOfGames");
var numOfGames = numOfGamesElement.value;

  const boardGames = ["UNO", "Monopoly", "Clue", "Pandemic", "Catan", "Articulate!", "Codenames", "Fallout", "Candy Land", "Scrabble"];


let gamesPicked = samples(boardGames, numOfGames);
  alert(gamesPicked.join("\n"));
//createTable(gamesPicked)
}

或者像這樣使用lodash sampleSize

let _ = require('lodash');

function createRandomArray () {

var numOfGamesElement = document.getElementById("numOfGames");
var numOfGames = numOfGamesElement.value;

  const boardGames = ["UNO", "Monopoly", "Clue", "Pandemic", "Catan", "Articulate!", "Codenames", "Fallout", "Candy Land", "Scrabble"];


let gamesPicked = _.sampleSize(boardGames, numOfGames);
  alert(gamesPicked.join("\n"));
//createTable(gamesPicked)
}

Answer 3

這有效，但沒有解決隨機函數可以選擇重復項的問題。

<!DOCTYPE html>
<head>
<script>
function createRandomArray () {
    var numOfGamesElement = document.getElementById("numOfGames");
    var numOfGames = numOfGamesElement.value;

    const boardGames = ["UNO", "Monopoly", "Clue", "Pandemic", "Catan", "Articulate!", "Codenames", "Fallout", "Candy Land", "Scrabble"];

    var gamePicked;
    var gamesPicked = {};
    for(let i = 0; i < numOfGames; i++){
      gamePicked = boardGames[Math.floor(Math.random() * boardGames.length)];
      gamesPicked[i] = gamePicked;
      alert(gamesPicked[i]);
    }
    // could build table here
}
</script>
</head>

<body>
<label>Number of games (1 to 10):
<input id="numOfGames">
</label>
<button onclick="createRandomArray()">Click Me</button>
</body>

從 HTML 輸入字段創建隨機 javascript 數組

問題描述

3 個解決方案

解決方案1
0 2021-07-27 20:15:01

解決方案2
0 2021-07-27 20:15:39

解決方案3
0 已采納 2021-07-27 20:18:02

從 HTML 輸入字段創建隨機 javascript 數組

問題描述

3 個解決方案

解決方案1 0 2021-07-27 20:15:01

解決方案2 0 2021-07-27 20:15:39

解決方案3 0 已采納 2021-07-27 20:18:02

解決方案1
0 2021-07-27 20:15:01

解決方案2
0 2021-07-27 20:15:39

解決方案3
0 已采納 2021-07-27 20:18:02