编码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. Ionic无法通过npm安装解决方案

    http://www.jianshu.com/p/5a99334eb62d 一般从 node.js官网下载安装完之后,npm也会同时安装完. 如果通过 $ npm install -g cordova ...

  2. Deeplearning学习

    Deeplearning 概念 Deep Learning:   观点: 认为AI是最新的电力,大约在一百年前,我们社会的电气化改变了每个主要行业,从交通运输行业到制造业.医疗保健.通讯等方面,我认为 ...

  3. 用IDA辅助分析grub的小技巧

    IDA可以辅助我们分析grub的代码,但是bootloader本身只是bin文件,为了让IDA能正确识别分析,我们还需要提供一些基本的参数,比如文件加载到内存的地址等. 图中MBR是加载到0x7C00 ...

  4. ubuntu 上运行的django 出现No space left on device错误

    运行django出现错误信息: [2016-02-16 14:33:24,476 pyinotify ERROR] add_watch: cannot watch /usr/local/lib/pyt ...

  5. selenium+python+unittest:一个类中只执行一次setUpClass和tearDownClass里面的内容（可解决重复打开浏览器和关闭浏览器，或重复登录等问题）

    unittest框架是python自带的,所以直接import unittest即可,定义测试类时,父类是unittest.TestCase. 可实现执行测试前置条件.测试后置条件,对比预期结果和实际 ...

  6. Eclipse Alt + / 快捷键失效

    需要重新设置快捷键.按快捷键ctrl+shirt+L,然后在按一下L.设置快捷键的对话框就出来了,然你将Word Completion移除,在将Content Assist 这个设置为alt+/.就可 ...

  7. [转] vagrant系列(2)：使用Vagrantfile实现集成预安装

    在我们的开发目录下,有一个文件Vagrantfile,里面包含有大量的配置信息,主要包括三个方面:虚拟机配置.SSH配置.基础配置.Vagrant是使用Ruby开发的,所以它的配置语法也是Ruby的, ...

  8. linux 系统管理(二) 磁盘分区

    LINUX下分区命令Parted详解 通常划分分区工具我们用的比较多是fdisk命令,但是现在由于磁盘越来越廉价,而且磁盘空间越来越大. 而fdisk工具他对分区是有大小限制的,它只能划分小于2T的磁 ...

  9. 关于 IsLocalUrl 方法的注意事项

    用于判断是否为本地url的方法 Url.IsLocalUrl() 的注意事项: 此方法是以判断传入的url字符串的开头是否为 "/" 为依据来判断是否为本地url,所以如果传入的u ...

  10. 手机端页面调试工具-vconsole使用

    用的是VUE-CLI3第一步.安装vconsole npm install vconsole 第二步.创建js文件并写入内容 import Vconsole from 'vconsole' let v ...