编码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. python3入门之集合set

    之前介绍python的数据结构时,没有介绍set(集合)现在在这里稍微介绍下: set原理 Python 还 包 含 了 一 个 数 据 类 型-- set ( 集 合 ) . 集 合 是 一 个 无 ...

  2. 斐讯K2P配置文件破解笔记

    手上有一个斐讯K2P路由器,刷机前我想把原机带的固件备份出来.搜到恩山A大开启telnet.固件备份的教程,里面提到了配置文件破解的方法,心血来潮试了一下,发现算出的密码不能解密,一直报"b ...

  3. 对csrf的理解

    用户浏览并登陆信任网站A 通过验证,在用户浏览器产出A的cookie 用户在没有登出A的情况下访问攻击网站B B要求访问第三方站点A,发出一个请求 根据B的请求,浏览器带着A的cookie访问A A不 ...

  4. 微信小程序 没有找到node_modules目录 ，小程序引入vant框架报错。

    如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: ...

  5. 第九届蓝桥杯大赛个人赛决赛（软件类）真题Java

    更新中.......... 同一年的题解:https://www.cnblogs.com/dgwblog/p/10111903.html   01 结果填空 (满分11分) 标题:年龄问题 s夫人一向 ...

  6. Flask基础应用

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 Django: 优点: 大而全,组件非常全面. 缺点: 太大,加载太大,浪费资源. Flask: 优点: ...

  7. D-Link DIR-645 信息泄露漏洞

    D-Link DIR-645 getcfg.php 文件由于过滤不严格导致信息泄露漏洞. $SERVICE_COUNT = cut_count($_POST["SERVICES"] ...

  8. linux新增特性timerfd

    https://blog.csdn.net/shreck66/article/details/49745149

  9. openerp学习笔记 日期时间相关操作

    日期格式化字符串:DATE_FORMAT = "%Y-%m-%d" 日期时间格式字符串:DATETIME_FORMAT = "%Y-%m-%d %H:%M:%S" ...

  10. git学习笔记6

    打标签 git tag -m "Say bye-bye to all previous practice." old_practice //引号里是注释 本地删除不是真的删除,对暂 ...