随机产生20个单词

灰太狼 2022-01-09 09:45 412阅读 0赞

**随机产生20个单词**

一、问题来源：

老师给了一份专业单词word，说第二天要全背下来。错了就五十遍啊五十遍。

然后，有人提出要做一个产生随机单词的Demo，来测试自己。

老师表示呵呵，做出来的就可以不用听写。

顿时，我就表示，是可忍，孰不可忍啊。这是在侮辱我们啊。这票我干了，不能让人看低了。我这么做绝对不是为了逃避五十遍，真的。

二、问题思考：

写Demo之前，先思考一下这个程序的逻辑。

首先，我要导入数据，然后将数据转化为便于使用的数据类型。

导入数据方面，我选择了直接复制，然后以字符串的形式保存在一个数组内。当然，如果在实际使用中更方便。直接将服务器端传输的JSON数据转化就OK了。

数据转换方面，我原本想着使用正则去识别。然而我发现WebStorm直接将空格和回车都转化出来了。那就方便了。建立一个函数trans来将字符串a转化为我们需要的Object数组。当然你也可以转化为字符串数组。但是我认为转化为Object数组后更易于理解与使用，也更符合逻辑。

在这之后就是从数组中挑选20个Object出来，显示出来。这涉及到两个问题，首先如何挑选，其次如何显示。

显示问题，太简单了。直接做一个按钮的监听事件，每一次点击都重新选取。记得每次选取前要初始化，即可。

下面就是这个Demo的最大看点，如何选取20不重复的随机数。当然这个问题，解决方法很多。常用的办法有这两种。（假设源数据数量为count）

一、建立一个大小为count的数组a，存储的数据从min到max。然后，利用random()方法产生一个随机数randomnumber，从数组a中抽取a\[randomnumber\]，保存在数组b中。之后每次抽取随机数randomnumber，都在数组b中遍历，是否存在。不过不存在就添加。直到数组b的length达到20。

二、建立一个大小为count的数组a，存储的数据从min到max。然后，利用random()方法产生一个随机数randomnumber，从数组a中抽取a\[randomnumber\]，保存在数组b中，同时将数组a中的a\[randomnumber\]删除。直到数组b的length达到20。

上述方法中有一些JS才有的方法，可以加快效率。比如数组的Indexof()方法来查找元素等等。

当然，我的方法和上面有所不同。（否则我也不会这么膨胀）方法如下：

建立一个大小为count的数组a，存储的数据从min到max。然后，利用random()方法产生一个随机数randomnumber，从数组a中抽取a\[randomnumber\]，保存在数组b中。与此同时，令数组c中c\[randomnumber\]=1。这样每次产生随机数后，只有在if(!c\[randomnumber\])条件成立，才向数组b内添加a\[randomnumber\]，同时，数组计数器+1。

虽然描写看起来更麻烦一些，但是这样就避免了查询已产生随机数的循环遍历的资源消耗。

三、完整代码：

1 <!DOCTYPE html>
      2 <html lang="zh-cn">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>random-words(20)</title>
      6     <script src="jquery-v1.12.4.js"></script>
      7     <script>
      8     let a = "continue\t继续。程序设计中跳出当次循环的关键字。\n" +
      9             "break\t终止。程序设计中终止循环的关键字。\n" +
     10             "next\t下一个。\n" +
     11             "function\t函数。程序设计中定义函数的关键字。\n" +
     12             "return\t返回。程序设计中函数返回数据的关键字。\n" +
     13             "true\t真的\n" +
     14             "false\t假的\n" +
     15             "var\t定义变量关键字。\n" +
     16             "int\t整型。\n" +
     17             "boolean\t布尔型。\n" +
     18             "float\t浮点型数值。\n" +
     19             "double\t双精度数值。\n" +
     20             "class\t类。定义类的关键字。\n" +
     21             "public\t公有的。\n" +
     22             "private\t私有的。\n" +
     23             "static\t静态的。\n" +
     24             "super\t超级。代指面向对象编程中父级类。\n" +
     25             "this\t这个。一般指当前对象。\n" +
     26             "window\t窗口。DOM中的浏览器窗口对象。\n" +
     27             "document\t文档。DOM中的文档对象。\n" +
     28             "width\t宽度\n" +
     29             "height\t高度\n" +
     30             "first\t第一个。\n" +
     31             "last\t最后的。\n" +
     32             "parent\t父亲，父级。\n" +
     33             "append\t追加。\n" +
     34             "before\t之前\n" +
     35             "after\t之后\n" +
     36             "focus\t焦点。CSS中的伪类名称，常用于设计控件获得焦点时的效果\n" +
     37             "hover\t悬停。CSS中的伪类名称，常用于设计鼠标经过效果\n" +
     38             "select\t选择。HTML中的下拉框标签名\n" +
     39             "checkbox\t复选框\n" +
     40             "submit\t提交\n" +
     41             "reset\t重置\n" +
     42             "click\t单击事件\n" +
     43             "keyup\t键盘松开事件\n" +
     44             "keydown\t键盘按下事件\n" +
     45             "mouseup\t鼠标松开或者弹起事件\n" +
     46             "mousedown\t鼠标按下事件\n" +
     47             "empty\t空的\n" +
     48             "remove\t移除\n" +
     49             "array\t数组\n" +
     50             "show\t显示\n" +
     51             "hide\t隐藏\n" +
     52             "animate\t动画。jQuery中的自定义动画方法。\n" +
     53             "event\t事件\n" +
     54             "replace\t替换\n" +
     55             "join\t数组方法之一，将元素合并成字符串\n" +
     56             "split\t字符串方法之一，将字符串切割成数组\n" +
     57             "splice\t数组方法之一，可增、删、改元素\n" +
     58             "underline\t下划线\n" +
     59             "fixed\t定位元素的样式属性值之一，固定定位\n" +
     60             "position\t定位元素的样式属性名\n" +
     61             "align\t对齐方式\n" +
     62             "background\t设置元素背景的属性名\n" +
     63             "display\t显示\n" +
     64             "solid\t边框线条样式值之一，实线类型\n" +
     65             "clear\t清除，清理\n" +
     66             "element\t元素\n" +
     67             "home\t家，或首页\n" +
     68             "middle\t中间的，垂直居中样式值\n" +
     69             "center\t水平居中\n" +
     70             "button\t按钮\n" +
     71             "hidden\t被隐藏的\n" +
     72             "important\t重要的，提升样式的优先级\n" +
     73             "margin\t元素外边距属性名\n" +
     74             "object\t对象\n" +
     75             "transform\t变换，设置CSS3变换的样式属性名称\n" +
     76             "relative\t相对的，定位属性值之一的相对定位\n" +
     77             "arguments\t参数集合，LESS混合中或者JS函数中代表参数集合\n" +
     78             "method\t方法\n" +
     79             "action\t动作，表单form的属性之一\n" +
     80             "number\t数字或数值，JavaScript中的数据类型之一\n" +
     81             "translate\t平移，用于设置元素的位置\n" +
     82             "padding\t元素内间距属性名\n" +
     83             "source\t来源\n" +
     84             "control\t控制或控件\n" +
     85             "video\t视频，H5新增播放视频的标签名\n" +
     86             "default\t默认的，缺省的\n" +
     87             "container\t容器\n" +
     88             "content\t内容\n" +
     89             "textarea\t文本输入域的标签名称\n" +
     90             "current\t当前的\n" +
     91             "visited\t已经访问过的\n" +
     92             "inner\t内部的\n" +
     93             "outer\t外部的\n" +
     94             "client\t客户端\n" +
     95             "location\t位置，定位\n" +
     96             "instance\t实例\n" +
     97             "prototype\t原型对象\n" +
     98             "property\t属性\n" +
     99             "constructor\t构造函数\n" +
    100             "innerWidth\t内部宽度\n" +
    101             "prepend\t在元素内部前置插入元素\n" +
    102             "trigger\t主动触发事件\n" +
    103             "triggerHandler\t主动触发事件，但不触发浏览器默认事件\n" +
    104             "fadeIn\t淡入动画方法\n" +
    105             "fadeOut\t淡出动画方法\n" +
    106             "currentTarget\t总是指向事件监听目标对象\n" +
    107             "focusin\t元素获得焦点时触发事件的方法\n";
    108     </script>
    109     <style>
    110         .container{
         
    111             border     : 5px solid #333333;
    112             padding    : 30px;
    113             background : sandybrown;
    114         }
    115         .top-container{
         
    116             width: 100%;
    117             height: 50px;
    118         }
    119         .headtitle{
         
    120             display: block;
    121             float: left;
    122             position: relative;
    123             width: 300px;
    124             font-size: 24px;
    125             text-align : center;
    126         }
    127         .ebuttom{
         
    128             display: block;
    129             float: left;
    130             top:5px;
    131             left: 20%;
    132             position: relative;
    133             width: 200px;
    134             font-size: 20px;
    135             text-align : center;
    136             background: lightgrey;
    137             border-radius: 5px;
    138             box-shadow: 0px 1px 1px;
    139 
    140         }
    141         .but-container{
         
    142             width: 100%;
    143             height: 50px;
    144             position: relative;
    145             top:20px;
    146         }
    147         .content{
         
    148             width: 100%;
    149             height:480px;
    150             position: relative;
    151             top:20px;
    152             font-size: 18px;
    153         }
    154         .word{
         
    155             display: block;
    156             float: left;
    157             position: relative;
    158             width:20%;
    159             text-align : center;
    160         }
    161         .explain{
         
    162             display: block;
    163             float: left;
    164             position: relative;
    165             width: 80%;
    166             text-align : center;
    167         }
    168         .title{
         
    169             font-size: 20px;
    170         }
    171         .content>.explain{
         
    172             left:10%;
    173             text-align: left;
    174         }
    175     </style>
    176 </head>
    177 <body>
    178     <div class="container">
    179 
    180         <div class="top-container">
    181             <div class="headtitle">专业单词测试</div>
    182             <div class="ebuttom" onclick="changewordlist()">产生随机单词</div>
    183         </div>
    184         
    185         
    186         <div class="but-container">
    187             <div class="title word">单词</div>
    188             <div class="title explain">解释</div>
    189         </div>
    190 
    191     </div>
    192 
    193     <script>
    194     let wordsBase = new Array();
    195     let count=20;
    196     let wordlistf=new Array();
    197     /**
    198      * 用于将基础的字符串转换为需要的Object数组
    199      * @ps 由于我们是通过\n来分解字符串，而字符串最后有一个/n，所以length得减一。
    200      * a [string]
    201      * return Array
    202      */
    203     function trans( a )
    204     {
    205 
    206         let wordesArray = a.split( "\n" );
    207 
    208         for( let i = 0; i < wordesArray.length - 1; i++ )
    209         {
    210             let wordArray = wordesArray[ i ].split( "\t" );
    211             let word = wordArray[ 0 ];
    212             let explain = wordArray[ 1 ];
    213             let wordBase = {
    214                 word: word,
    215                 explain: explain
    216             };
    217             wordsBase.push( wordBase );
    218         }
    219         return wordsBase;
    220     }
    221     wordsBase=trans(a);
    222 
    223     /**
    224      *  用于从min到max中输出count个不重复随机数字。
    225      * @param count number
    226      * @param min   number
    227      * @param max number
    228      */
    229     function norepeatRandom( count, min, max )
    230     {
    231         let resultArray = [];
    232         //        resultArray.length = 20;
    233         let markArray = [];
    234         //        markArray.length = 100;
    235         //        console.log(1,resultArray.length,markArray.length);
    236         //确保可以取到max
    237         let range = max - min + 1;
    238         for( let i = 0; i < count; )
    239         {
    240             let randomnumber = (range * Math.random() + min) >> 0;
    241             if( !markArray[ randomnumber ] )
    242             {
    243                 resultArray[ i ] = randomnumber;
    244                 markArray[ randomnumber ] = 1;
    245                 i++;
    246             }
    247         }
    248         return resultArray;
    249     }
    250 
    251     /**
    252      *  用于从Object数组wordlist中获取数组randomlist中数字指向的Object元素，并且组成新的数组，返回。
    253      * @param wordlist Array
    254      * @param randomlist   Array
    255      */
    256     function randomArray( wordlist,randomlist )
    257     {
    258         let wordlist20=[];
    259         for(let i=0;i<randomlist.length;i++){
    260             wordlist20[i]=wordlist[randomlist[i]];
    261             wordlist20[i]=wordlist[randomlist[i]];
    262         }
    263         return wordlist20;
    264     }
    265 
    266 
    267     /**
    268      * 点击产生新的随机单词list
    269      * @param e 获取单击事件
    270      */
    271     function changewordlist( e )
    272     {
    273         e = event || window.event;
    274         wordlistf=randomArray( wordsBase,norepeatRandom( 20, 0, 99 ) );
    275         let count=20;
    276         let $contentinit=$(".container>.content");
    277         if($contentinit.length){
    278             console.log($contentinit);
    279             $contentinit.remove();
    280         }
    281 
    282 
    283         $(".container>.but-container").after( "<div class=\"content\"></div>\n");
    284         for(let i=0;i<count;i++){
    285             let wordf=wordlistf[i].word;
    286             let explainf=wordlistf[i].explain;
    287             let $content=$(".container>.content");
    288             $content.append( "<div class=\"word\">"+wordf+"</div>\n" +
    289                              "\t\t\t<div class=\"explain\">"+explainf+"</div>");
    290 //            $content.append( "<div class=\"word\">单词</div>\n" +
    291 //                             "\t\t\t<div class=\"explain\">解释</div>");
    292         }
    293     }
    294     </script>
    295 </body>
    296 </html>

四、题后思考：

那么问题来了。在之前问题思考中，有一个JS的index()方法，来实现这个算法。那么到底哪个算法会节省系统资源呢？

之后我想写一个相关的测试函数，运算时间方面，完全可以在测试函数的开头与结尾都获取一个时间戳，通过两者的差值就可以算出这个算法的运行时间。那么内存、运算量等相信也可以通过一些方法解决。但是如何提高这个测试函数的通用性，也就是如何让这个测试函数可以测试多个类型的算法呢，毕竟不同的算法有着不同的参数，有时候还需要调用个函数等等。所以这个思考分为两个部分，一个是这个算法的性能测试，一个是测试函数的拓展。

转载于:https://www.cnblogs.com/Tiancheng-Duan/p/7724794.html