编码1（队头在最右）

练习如何使用数组来实现队列，综合考虑使用数组的 push，pop，shift，unshift操作

基于代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关入队、出队、获取队头、判空的操作
  • 队头对应数组中最后一个元素
  • 入队和出队操作后，需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容，队头在最右侧，中间用 -> 连接（练习使用数组的join方法）
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>JS里的居民们4-数组((堆)队列-队头在右)</title>

 </head>

 <body>

     <input id="queue-input" type="text">

     <p id="queue-cont">队列内容：apple-&gt;pear</p>

     <button id="in-btn">入队</button>

     <button id="out-btn">出队</button>

     <button id="font-btn">打印队头元素内容</button>

     <button id="empty-btn">判断队列是否为空</button>

     <script>

     var queue = ["apple", "pear"];

     var buttons=document.getElementsByTagName("button");

     var txt=document.getElementById("queue-input");

     var queuecont=document.getElementById("queue-cont");

     buttons[0].addEventListener("click",function(){

         queue.unshift(txt.value);

         queuecont.innerHTML="队列内容："+queue.join("-&gt;");

         console.log(queue);

     })

     buttons[1].addEventListener("click",function(){

         queue.pop();

         queuecont.innerHTML="队列内容："+queue.join("-&gt;");

         console.log(queue);

     })

     buttons[2].addEventListener("click",function(){

         var q0=queue[queue.length-1];

         queuecont.innerHTML="队列内容："+q0;

         console.log(q0);

     })

     buttons[3].addEventListener("click",function(){

         if(queue.length==0){

             console.log("空");

             queuecont.innerHTML="队列内容："+"空";

         }

         else{

             console.log("不为空");

             queuecont.innerHTML="队列内容："+"不为空";

         }

     })

     </script>

 </body>

 </html>

编码2（队头在最左）

对上面练习稍作小调整：

基于代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关入队、出队、获取队头、判空的操作
    • 队头对应数组中第一个元素
  • 入队和出队操作后，需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容，队头在最左侧，中间用 <- 连接（练习使用数组的join方法）
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>JS里的居民们5-数组((堆)队列-队头在左)</title>

 </head>

 <body>

     <input id="queue-input" type="text">

     <p id="queue-cont">队列内容：apple-&gt;pear</p>

     <button id="in-btn">入队</button>

     <button id="out-btn">出队</button>

     <button id="font-btn">打印队头元素内容</button>

     <button id="empty-btn">判断队列是否为空</button>

     <script>

     //-&gt;   为->

     //&lt;-   为<-

     var queue = ["apple", "pear"];

     var buttons=document.getElementsByTagName("button");

     var txt=document.getElementById("queue-input");

     var queuecont=document.getElementById("queue-cont");

     buttons[0].addEventListener("click",function(){

         queue.push(txt.value);

         queuecont.innerHTML="队列内容："+queue.join("&lt;-");

         console.log(queue);

     })

     buttons[1].addEventListener("click",function(){

         queue.shift();

         queuecont.innerHTML="队列内容："+queue.join("&lt;-");

         console.log(queue);

     })

     buttons[2].addEventListener("click",function(){

         var q0=queue[0];

         queuecont.innerHTML="队列内容："+q0;

         console.log(q0);

     })

     buttons[3].addEventListener("click",function(){

         if(queue.length==0){

             console.log("空");

             queuecont.innerHTML="队列内容："+"空";

         }

         else{

             console.log("不为空");

             queuecont.innerHTML="队列内容："+"不为空";

         }

     })

     </script>

 </body>

 </html>

JS里的居民们4-数组((堆)队列的更多相关文章

  1. JS里的居民们7-对象和数组转换

    编码 学习通用的数据用不同的数据结构进行存储,以及相互的转换 对象转为数组: var scoreObject = { "Tony": { "Math": 95, ...

  2. JS里的居民们6-数组排序

    编码 var arr = [43, 54, 4, -4, 84, 100, 58, 27, 140]; 将上面数组分别按从大到小以及从小到大进行排序后在console中输出 var arr = ['a ...

  3. JS里的居民们5-数组(栈)

    编码1(栈顶在最右) 练习如何使用数组来实现栈,综合考虑使用数组的 push,pop,shift,unshift操作 基于代码,实现如按钮中描述的功能: 实现如阅读材料中,队列的相关进栈.退栈.获取栈 ...

  4. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  5. JS~JS里的数据类型

    JS里的数据类型,它虽然是个弱类型的语言,但它也有自己的规定的,它不会向其它语言那么,使用int来声明一个整形变量,而是使用 var,如果你是一个C#的开发者,你就会知道,原来C#现在也在和JS学,开 ...

  6. Augular JS里的各种ng

    Augular JS里的各种ng- 正文: 1．ng-disabled="一种状态:该状态下不可用"例如: %button.btn.btn-2(ng-disabled=" ...

  7. 前端要革命？看我在js里写SQL

    在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...

  8. js中如何访问对象和数组

    js中如何访问对象和数组 一.总结 一句话总结:js访问对象点和中括号,访问数组的话就是中括号 对象 . [] 数组 [] 1.js访问对象的两种方式? . [] 可以使用下面两种方式访问对象的属性和 ...

  9. 对于js里的闭包的理解

    Ali的回答: 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) {     var tmp = 3;      ...

随机推荐

  1. numpy之转置（transpose）和轴对换

    转置(transpose)和轴对换 转置可以对数组进行重置,返回的是源数据的视图(不会进行任何复制操作). 转置有三种方式,transpose方法.T属性以及swapaxes方法. 1 .T,适用于一 ...

  2. python 强大的工具

    numpy Python科学计算的基础包 安装工具 pip3 install numpy pandas包含了高级的数据结构和操作工具,它们使得Python数据分析更加快速和容易. 安装工具 pip3 ...

  3. CSS3 文本溢出问题

    一.单行: 效果: 实现这各效果必须要加上: text-overflow: ellipsis; /*文本溢出*/ overflow: hidden; /*配合使用:溢出隐藏*/ white-space ...

  4. 使用FFmpeg进行视频抽取音频，之后进行语音识别转为文字

    1.首先需要下载FFmpeg: 2.Gradle依赖 def void forceVersion(details, group, version) { if (details.requested.gr ...

  5. hdu1495 bfs搜索、模拟

    大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多.但see ...

  6. url传递参数带 + ，解决办法

    修改客户端,将客户端带“+”的参数中的“+”全部替换为‍“%2B”,这样参数传到服务器端时就能得到“+”了.

  7. python调用另一个.py文件中的类和函数

    同一文件夹下的调用 1.调用函数 A.py文件如下:def add(x,y):    print('和为:%d'%(x+y)) 在B.py文件中调用A.py的add函数如下: import AA.ad ...

  8. openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】

    1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...

  9. SpringMVC入门（二）

    使用注解的方式进行Handler的开发   注意:此处只介绍和方式一不同的地方 1.注解的处理器适配器  在spring3.1之前使用org.springframework.web.servlet.m ...

  10. SQL拼接 html 发送

    --在Job BES_Daily_FTP_filedownload 中使用 ALTER proc [dbo].[RSP_FN_UNAPPLIED_Mail_Reminder] as Declare @ ...