JS裡的居民們4-陣列((堆)佇列
阿新 • • 發佈：2018-12-06
編碼1（隊頭在最右）
練習如何使用陣列來實現佇列，綜合考慮使用陣列的 push，pop，shift，unshift操作
基於程式碼，實現如按鈕中描述的功能：
- 實現如閱讀材料中，佇列的相關入隊、出隊、獲取隊頭、判空的操作
- 隊頭對應陣列中最後一個元素
- 入隊和出隊操作後，需要在 id 為 queue-cont 的 p 標籤中更新顯示佇列中的內容，隊頭在最右側，中間用 -> 連線（練習使用陣列的join方法）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>JS裡的居民們4-陣列((堆)佇列-隊頭在右)</title> 6 </head> 7 <body> 8 <input id="queue-input" type="text"> 9 <p id="queue-cont">佇列內容：apple->pear</p> 10 <button id="in-btn">入隊</button> 11 <button id="out-btn">出隊</button> 12 <button id="font-btn">列印隊頭元素內容</button> 13 <button id="empty-btn">判斷佇列是否為空</button> 14 <script> 15 var queue = ["apple", "pear"]; 16 var buttons=document.getElementsByTagName("button"); 17 var txt=document.getElementById("queue-input"); 18 var queuecont=document.getElementById("queue-cont"); 19 buttons[0].addEventListener("click",function(){ 20 queue.unshift(txt.value); 21 queuecont.innerHTML="佇列內容："+queue.join("->"); 22 console.log(queue); 23 }) 24 buttons[1].addEventListener("click",function(){ 25 queue.pop(); 26 queuecont.innerHTML="佇列內容："+queue.join("->"); 27 console.log(queue); 28 }) 29 buttons[2].addEventListener("click",function(){ 30 var q0=queue[queue.length-1]; 31 queuecont.innerHTML="佇列內容："+q0; 32 console.log(q0); 33 }) 34 buttons[3].addEventListener("click",function(){ 35 if(queue.length==0){ 36 console.log("空"); 37 queuecont.innerHTML="佇列內容："+"空"; 38 } 39 else{ 40 console.log("不為空"); 41 queuecont.innerHTML="佇列內容："+"不為空"; 42 } 43 }) 44 </script> 45 </body> 46 </html>
編碼2（隊頭在最左）
對上面練習稍作小調整：
基於程式碼，實現如按鈕中描述的功能：
- 實現如閱讀材料中，佇列的相關入隊、出隊、獲取隊頭、判空的操作
-
- 隊頭對應陣列中第一個元素
- 入隊和出隊操作後，需要在 id 為 queue-cont 的 p 標籤中更新顯示佇列中的內容，隊頭在最左側，中間用 <- 連線（練習使用陣列的join方法）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>JS裡的居民們5-陣列((堆)佇列-隊頭在左)</title> 6 </head> 7 <body> 8 <input id="queue-input" type="text"> 9 <p id="queue-cont">佇列內容：apple->pear</p> 10 <button id="in-btn">入隊</button> 11 <button id="out-btn">出隊</button> 12 <button id="font-btn">列印隊頭元素內容</button> 13 <button id="empty-btn">判斷佇列是否為空</button> 14 <script> 15 //-> 為-> 16 //<- 為<- 17 var queue = ["apple", "pear"]; 18 var buttons=document.getElementsByTagName("button"); 19 var txt=document.getElementById("queue-input"); 20 var queuecont=document.getElementById("queue-cont"); 21 buttons[0].addEventListener("click",function(){ 22 queue.push(txt.value); 23 queuecont.innerHTML="佇列內容："+queue.join("<-"); 24 console.log(queue); 25 }) 26 buttons[1].addEventListener("click",function(){ 27 queue.shift(); 28 queuecont.innerHTML="佇列內容："+queue.join("<-"); 29 console.log(queue); 30 }) 31 buttons[2].addEventListener("click",function(){ 32 var q0=queue[0]; 33 queuecont.innerHTML="佇列內容："+q0; 34 console.log(q0); 35 }) 36 buttons[3].addEventListener("click",function(){ 37 38 if(queue.length==0){ 39 console.log("空"); 40 queuecont.innerHTML="佇列內容："+"空"; 41 } 42 else{ 43 console.log("不為空"); 44 queuecont.innerHTML="佇列內容："+"不為空"; 45 } 46 }) 47 </script> 48 </body> 49 </html>