编码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. Android来电、去电监听

    Android手机中添加手机来电的状态,使用PhoneStateListener来监听. TelephonyManager telephonyManager = (TelephonyManager) ...

  2. NSScanner 扫描字符串

    两个常用于扫描字符串的方法 //'指针'只移动一个位置,判断当前所指的字符是否是目标字符@"x", 若是则存入result中,返回YES,否则NO BOOL res = [scan ...

  3. 123th LeetCode Weekly Contest Broken Calculator

    On a broken calculator that has a number showing on its display, we can perform two operations: Doub ...

  4. python2.x提示这个错误：UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position

    查了好久下面这个方法可用: 发现应该是因为python2.x的默认编码是ascii,而代码中可能由utf-8的字符导致,解决方法是设置utf-8. 找到出错的文件,在import后增加下面几行: #! ...

  5. oracle12c之一 控制-PDB的磁盘I/O(IOPS,MBPS)资源管理

    在以前的版本中,没有简单的方法来控制单个PDB使用的磁盘I / O量. 因此,某个PDB可能耗尽大量磁盘I / O,并影响同一实例中的其他PDB的性能. Oracle 12c R2可以控制PDB使用的 ...

  6. Binder 驱动(三)

    Binder 驱动是 Binder 的最终实现, ServiceManager 和 Client/Service 进程间通信最终都是由 Binder 驱动投递的. Binder 驱动的代码位于 ker ...

  7. 点击劫持（click jacking）

    什么是点击劫持劫持原理劫持案例代码示例优酷频道刷粉的POC腾讯微博刷粉防御 什么是点击劫持 点击劫持,clickjacking,也被称为UI-覆盖攻击.这个词首次出现在2008年,是由互联网安全专家罗 ...

  8. logback.xml文件配置（按时间、文件大小和log名称生成日志）

    之前项目中日志多用的log4j2,偶然看到在importNew看到了logback,自己查了下,发现Logback和log4j是非常相似的,其作者也是同一个人,并且logback相比于log4j性能更 ...

  9. 【CSS】 布局之剖析负边距

    我们都知道,一个元素框的大小是由元素内容+内边距+边框+外边距来决定的. 关于内边距padding,内边距呈现了元素的背景,其设置值是不可以为负的. 而对于外边距margin,默认为透明,设置值可以为 ...

  10. JavaScript数组forEach循环

    JavaScript数组forEach循环 今天写JavaScript代码把forEach循环数组忘记写法了,在此记录一下以防止未来忘记. let a = [1, 2, 3]; a.forEach(f ...