JS里的居民们4-数组((堆)队列
Posted JoeJoan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS里的居民们4-数组((堆)队列相关的知识，希望对你有一定的参考价值。
编码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>
以上是关于JS里的居民们4-数组((堆)队列的主要内容，如果未能解决你的问题，请参考以下文章