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-&gt;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("-&gt;");
22         console.log(queue);
23     })
24     buttons[1].addEventListener("click",function(){
25         queue.pop();
26         queuecont.innerHTML="队列内容："+queue.join("-&gt;");
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-&gt;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     //-&gt;   为->
16     //&lt;-   为<-
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("&lt;-");
24         console.log(queue);
25     })
26     buttons[1].addEventListener("click",function(){
27         queue.shift();
28         queuecont.innerHTML="队列内容："+queue.join("&lt;-");
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>

 

posted @ 2018-12-06 21:18  JoeJoan  阅读(332)  评论(0)  编辑  收藏  举报