编码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. Web App三年将取代原生App？

    从技术角度讲,html5现在是可以获取很多用户的资源,上传提交服务器,与用户进行交互.但是你可以观察一下PC或Mac,web网页发展了这么长时间了,取代了客户端了吗? 对于现在而言,html5虽已可以 ...

  2. 【算法】禁忌搜索算法(Tabu Search，TS)超详细通俗解析附C++代码实例

    01 什么是禁忌搜索算法? 1.1 先从爬山算法说起 爬山算法从当前的节点开始,和周围的邻居节点的值进行比较. 如果当前节点是最大的,那么返回当前节点,作为最大值 (既山峰最高点):反之就用最高的邻居 ...

  3. 记录两道有趣的有关php数组的面试题

    <?php $arr=[ ['张三','李四','王五'], ['吃鸡','消消乐','火影'], ['25','26','28'], ]; '如何转换为' $arr1=[ ['张三','吃鸡' ...

  4. 北航软院2012级C#期末考试部分考题解答

    博主注:本渣渣水平有限,文中若有不对的地方敬请指出,谢谢. 本文中大部分图片来自老师的PPT,感谢邵老师,想要的可以点击右边QQ联系我:) 一.选择题(2*15=30) 1.In C# what is ...

  5. CSS z-index在ie67中不起作用

    在chrome浏览器中可以看到这样的效果: 但是在ie67中看到的是: 这是z-index在ie浏览器中的一个兼容性问题: 一般来说z-index越大,层级越高,就会越在顶层显示,但是在ie67浏览器 ...

  6. rm: cannot remove `xxx’: Operation not permitted问题的处理方案

    第一步:22.txt lsattr 22.txt 查看文件属性 看到的情况 -----a------- 第二步:去除a的属性 chattr -a 22.txt 第三步:在此执行删除 rm 22.txt

  7. CSAPP阅读笔记-变长栈帧，缓冲区溢出攻击-来自第三章3.10的笔记-P192-P204

    一.几个关于指针的小知识点: 1.  malloc是在堆上动态分配内存,返回的是void *,使用时会配合显式/隐式类型转换,用完后需要用free手动释放. alloca是标准库函数,可以在栈上分配任 ...

  8. web file

    Blob 对象表示一个不可变.原始数据的类文件对象 构造函数 var aBlob = new Blob( array, options ); var aFileParts = ['<a id=& ...

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

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

  10. 【Css】Layout布局(二)

    css定位(Positioning) 所谓定位,即允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. css提供了三种基本的定位机制:普通流.浮动和 ...