随机产生20个单词
隨機產生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 <!--<h2 class="word">單詞</h2>--> 185 <!--<div class="explain">解釋</div>--> 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()方法，來實現這個算法。那么到底哪個算法會節省系統資源呢？
之后我想寫一個相關的測試函數，運算時間方面，完全可以在測試函數的開頭與結尾都獲取一個時間戳，通過兩者的差值就可以算出這個算法的運行時間。那么內存、運算量等相信也可以通過一些方法解決。但是如何提高這個測試函數的通用性，也就是如何讓這個測試函數可以測試多個類型的算法呢，畢竟不同的算法有著不同的參數，有時候還需要調用個函數等等。所以這個思考分為兩個部分，一個是這個算法的性能測試，一個是測試函數的拓展。
?
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： Java --＞ 斗地主案例实现洗牌、随
- 下一篇： navicat如何粘贴多行数据