从数组 Javascript 生成随机元素组

Posted 2023-03-05

【中文标题】从数组 Javascript 生成随机元素组

【英文标题】：Generating Random Groups of Elments from an Array Javascript

【发布时间】：2016-04-27 01:48:12

【问题描述】：

您好，我正在为学校做项目，我正在尝试从姓名列表中生成随机的姓名组。组大小和组数量将基于用户输入。我有从数组中随机生成单个元素的代码，但我需要一些帮助分组。 到目前为止，这是我的代码。它不起作用 请帮忙谢谢

function yeah()
        
        var arr = prompt("Enter your names").split(",")
        console.log(arr);
        var random = arr[Math.floor(Math.random() * arr.length)];
         document.getElementById("h2").innerhtml = random;
        
       

 function groups()
         
            var arr = prompt("Enter your names").split(",");
            var random = arr[Math.floor(Math.random() * arr.length)];
            var numElem = document.getElementById("input2").value;
            for (i=0;i <= arr.length; i++)
               
                
                  
                var newArr = [random];
                console.log(newArr);
               //print name to a new list
                //remove name from old list
                /* var arr = prompt("Enter your names").split(",")
                var groupNum = document.getElementById("input1").value;
                var newArrays =  arr.length / groupNum; */
                
        
            
            
        
        

  /* Reset */
  * 
  	margin: 0;
  	padding: 0;
  

  html,body 
    height:100%;
    margin:0;
    font-family: 'Montserrat', 'sans-serif';
    color:#424242;
    overflow: hidden;
  
  .display 
    text-align: center;
    display: table;
    height:100%;
    margin:0 auto;
  
  .wrap 
    display: table-cell;
    vertical-align: middle;
  
  p 
    font-size: 50px; /* For lamers who don't support viewport sizing */
    font-size:20vmin;
    text-align: center;
    margin: 0;
  
#h2 
    float: center;
    font-size: 30vmin;

    background-size: contain;


  input.text-display 
    display: inline-block;
    color: #5E5E5E;
    font: bold 20px arial;
    text-decoration: none;
    text-align: center;
    margin: 20px auto;
    padding: 15px 20px;
    background: #EFF0F2;
    border-radius: 4px;
    border-top: 1px solid #F5F5F5;
    box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
    text-shadow: 0px 1px 0px #F5F5F5;
  

  span.love 
    display: block;
    position: absolute;
    bottom:10px;
    width: 100%;
    text-align: center;
  
  span.love a 
    text-decoration: none;
    color:#D12026;
  
  .twitter-follow-button 
    vertical-align: text-bottom;
  
  .twitter-share-button 
    vertical-align: text-bottom;
  

<div class="display">
            <div class="wrap">
                <p>Your random value is:</p>
                <div id="h2">Null</div>
                
                <input  class="text-display" type="button" onclick="yeah()"   value="click to input data">
               <!-- <input type="button" onclick="display()" value="display random"> -->
                <br>
                <input id="input1" value="Enter number of Groups">
                <input id="input2" value="Enter number of elements per Group">
                <input type="button" onclick="groups()">
            </div>
            
        </div>

【参考方案1】：

这是我对您问题的解释。希望对你有帮助..

    <script>
    var arr = new Array();   
    function yeah()
    
    arr = prompt("Enter your names").split(",")
    console.log(arr);
    //var random = arr[Math.floor(Math.random() * arr.length)];
    var allStudents ="";

    for(var i=0; i<arr.length; i++) 
        allStudents += arr[i] + "<br/>\n";
    

     document.getElementById("h2").innerHTML = allStudents;
    


    function groups()
      
        var arr = prompt("Enter your names").split(",");

        var groups = document.getElementById("groups").value;
        var perGrp = document.getElementById("per_grp").value;

        var innerText = "<h4>All</h4> ";
        for(var i=0; i<arr.length; i++) 
            innerText += arr[i] + ",";
        
        innerText += "<br/>\n";            


        arr = shuffleArray(arr);

        var finalGroups = new Array();

        for(var i=0; i<groups; i++) 
            // assign shuffled elements
            var grpArr = "";
            for(j=0; j<perGrp; j++) 
                grpArr += arr[0] + ",";
                arr.shift(); // removes first element from array    
            

            grpArr = grpArr.substring(0,grpArr.length - 1);
            finalGroups[i] = grpArr;
        




        innerText += "<h4>Groups</h4><br/>\n";
        innerText += "<table width='100%' border='1'><tr>\n";           
        for(var i=0; i<groups; i++) 
            // print groups
            var j=i+1;
            var grpArr = finalGroups[i].split(",");
            innerText += "<td>Group " +j+"<br>";
            for(var k=0; k < grpArr.length; k++)
              innerText += grpArr[k] + "<br>";
            

            innerText += "</td>\n";
        
        innerText += "</tr></table>\n";

        document.getElementById("FinalGroups").innerHTML = innerText;


    

   /**
    * Randomize array element order 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;
       
       return array;
   


</script>
    <style>
    /* Reset */
      * 
            margin: 0;
            padding: 0;
      

      html,body 
        height:100%;
        margin:0;
        font-family: 'Montserrat', 'sans-serif';
        color:#424242;
        overflow: hidden;
      
      .display 
        text-align: center;
        display: table;
        height:100%;
        margin:0 auto;
      
      .wrap 
        display: table-cell;
        vertical-align: middle;
      
      p 
        font-size: 30px; /* For lamers who don't support viewport sizing */
        font-size:10vmin;
        text-align: center;
        margin: 0;
      
    #h2 
        float: center;
        font-size: 10vmin;

        background-size: contain;

    
      input.text-display 
        display: inline-block;
        color: #5E5E5E;
        font: bold 20px arial;
        text-decoration: none;
        text-align: center;
        margin: 20px auto;
        padding: 15px 20px;
        background: #EFF0F2;
        border-radius: 4px;
        border-top: 1px solid #F5F5F5;
        box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
        text-shadow: 0px 1px 0px #F5F5F5;
      

      span.love 
        display: block;
        position: absolute;
        bottom:10px;
        width: 100%;
        text-align: center;
      
      span.love a 
        text-decoration: none;
        color:#D12026;
      
      .twitter-follow-button 
        vertical-align: text-bottom;
      
      .twitter-share-button 
        vertical-align: text-bottom;
      


    </style>

    <div class="display">
        <div class="wrap">
            <p>Create Random Groups</p>
            <!--<div id="h2"> </div>

            <input  class="text-display" type="button" onclick="yeah()"  value="click to input data"> -->
           <!-- <input type="button" onclick="display()" value="display random"> -->
            <br>
            <input id="groups" placeholder="Enter number of Groups" >
            <input id="per_grp" placeholder="Enter number of elements per Group">
            <br/>
            <input type="button" value="Create Groups" onclick="groups()">
            <div id="FinalGroups"></div>
        </div>



    </div>

【参考方案2】：

不确定您的职能小组在做什么。正如我所看到的，它将所有数据放入 arr 并以随机顺序放入 newarr。您应该检查 .push() 方法以创建新数组。它应该使您的代码工作。

示例代码：

var newarr = ["David", "Mic"];
newarr.push("Adeline");

结果：您的 newarr 将包含所有 3 个名称。

【参考方案3】：

这是第一个解决方法：要向数组添加新元素（就像您在 for 循环中所做的那样），您应该使用 arr.push() 方法。在此之前，您还需要将 newArr 声明为空数组。

不过，我不完全确定您是否按照您在小组职能中的意图行事。现在，您似乎正在从列表中选择一个随机名称，然后根据列表中的名称多次将该随机名称分配给您的新数组。

可能对您有所帮助的是写出您想要采取的步骤的列表（我们称之为伪代码），然后将该列表转换为 javascript 代码。在该列表中发现不一致之处可能比筛选有时令人困惑的代码要容易得多。

希望对您有所帮助，如果您还有其他问题，请告诉我！

【讨论】：

您好，感谢您的帮助！！！现在我很难找到实现我正在尝试做的事情的最佳方法（我基本上是在处理想法并运行代码以查看它是否有效）如果你能阐明如何实际实现我正在尝试做的事情那太好了！谢谢

另一件经常帮助我的事情是一次完成一个项目。我会做一件小事（对要使用的值进行硬编码），然后从那里开始工作以整合更多功能或使用动态输入。

如果我理解你，这个的核心功能是取一个名字列表，并抓取一定数量的随机元素，对吗？

该项目的功能是获取用户输入的名称列表，并从用户输入中创建具有随机名称的组。用户通过指定组的数量和每个组中的名称数量来创建参数

好的，所以我要做的第一件事是在没有“输入”位的情况下对其进行编码。显式编写一个包含十个左右名称的数组，看看是否可以让 javascript 创建一个包含其中四个的随机列表。从那里可以很容易地用用户输入的值替换新数组中的名称数量、名称列表本身等。循序渐进。