编码1（栈顶在最右）

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

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

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中最后一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最右侧，中间用 -> 连接（练习使用数组的join方法）
 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>JS里的居民们6-数组(栈-栈顶在右)</title>
 7 </head>
 8
 9 <body>
10     <input id="stack-input" type="text">
11     <p id="stack-cont">栈内容：apple-&gt;pear</p>
12     <button id="push-btn">进栈</button>
13     <button id="pop-btn">退栈</button>
14     <button id="font-btn">打印栈顶元素内容</button>
15     <button id="empty-btn">判断栈是否为空</button>
16
17     <script>
18         var stack = ["apple", "pear"];
19         var txt = document.getElementById("stack-input");
20         var stackcont = document.getElementById("stack-cont");
21         var pushbtn = document.getElementById("push-btn");
22         var popbtn = document.getElementById("pop-btn");
23         var fontbtn = document.getElementById("font-btn");
24         var emptybtn = document.getElementById("empty-btn");
25
26         pushbtn.onclick = function () {
27             stack.unshift(txt.value);
28             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");
29         }
30         popbtn.onclick = function () {
31             stack.shift();
32             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");
33         }
34         fontbtn.onclick = function () {
35             stackcont.innerHTML = "栈内容：" + stack[stack.length - 1];
36         }
37         emptybtn.onclick = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = "栈内容：空";
40             } else {
41                 stackcont.innerHTML = "栈内容：不为空";
42             }
43         }
44     </script>
45 </body>
46
47 </html>

编码2（栈顶在最左）

对上面练习进行小调整

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

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中第一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最左侧，中间用 -< 连接（练习使用数组的join方法）
 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>JS里的居民们7-数组(栈-栈顶在左)</title>
 7 </head>
 8
 9 <body>
10     <input id="stack-input" type="text">
11     <p id="stack-cont">栈内容：apple-&gt;pear</p>
12     <button id="push-btn">进栈</button>
13     <button id="pop-btn">退栈</button>
14     <button id="font-btn">打印栈顶元素内容</button>
15     <button id="empty-btn">判断栈是否为空</button>
16
17     <script>
18         var stack = ["apple", "pear"];
19         var txt = document.getElementById("stack-input");
20         var stackcont = document.getElementById("stack-cont");
21         var pushbtn = document.getElementById("push-btn");
22         var popbtn = document.getElementById("pop-btn");
23         var fontbtn = document.getElementById("font-btn");
24         var emptybtn = document.getElementById("empty-btn");
25
26         pushbtn.onclick = function () {
27             stack.push(txt.value);
28             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");
29         }
30         popbtn.onclick = function () {
31             stack.pop();
32             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");
33         }
34         fontbtn.onclick = function () {
35             stackcont.innerHTML = "栈内容：" + stack[0];
36         }
37         emptybtn.onclick = function () {
38             if (stack.length == 0) {
39                 stackcont.innerHTML = "栈内容：空";
40             } else {
41                 stackcont.innerHTML = "栈内容：不为空";
42             }
43         }
44     </script>
45 </body>
46
47 </html>

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10079638.html

JS里的居民们5-数组(栈)相关推荐

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

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

  2. 前端利用js里数组的filter方法进行多条件过滤查询

    需求:用户在输入框输入多个条件时,可以对表格数据进行过滤查询,无需后端接口处理,利用了前端js里数组的filter方法进行过滤. 如下是效果图: 当用户在姓名的输入框里输入"张"后 ...

  3. freemarker 数组转字符串_TypeScript 实战算法系列（一）：实现数组栈与对象栈

    本文由图雀社区认证作者 神奇的程序员 写作而成,图雀社区将连载其TypeScript 实战算法系列,点击阅读原文查看作者的掘金链接,感谢作者的优质输出,让我们的技术世界变得更加美好? 前言 栈作为一种 ...

  4. 用JS描述的数据结构及算法表示——栈和队列（基础版）

    前言:找了上课时数据结构的教程来看,但是用的语言是c++,所以具体实现在网上搜大神的博客来看,我看到的大神们的博客都写得特别好,不止讲了最基本的思想和算法实现,更多的是侧重于实例运用,一边看一边在心里 ...

  5. 关于JS里面的Call Stack and Heap

    关于JS里面的Call Stack and Heap Abstract What is the Call Stack and Heap in JS What is the difference bet ...

  6. 如何从ngrx-store-devtools.js里找到actions的触发源头

    找到ngrx-store-devtools.js: Action输入参数表明,这是一个LoadCmsPageData的Action: LoadCmsPageData定义在core/src/cms/st ...

  7. 【JS 逆向百例】如何跟栈调试？某 e 网通 AES 加密分析

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...

  8. 谈谈JS里的{ }大括号和[ ]中括号的用法

    为什么80%的码农都做不了架构师?>>>    谈谈JS里的{ }大括号和[ ]中括号的用法,理解后就可以看懂JSON结构了. 一.{ } 大括号,表示定义一个对象,大部分情况下要有 ...

  9. JS案例：使用对象、对象数组、正则表达式

    JS案例:使用对象.对象数组.正则表达式 1.使用对象 声明对象变量,其实就是将一个json对象赋给一个变量,可以看到json对象就由一些键值对构成. 运行效果: 如果将{id: 3, name: & ...

最新文章

  1. 第十三届光华工程科技奖公布，彭士禄、张伯礼、王海峰等40人及1个团体获奖
  2. 【跟着我们学Golang】Go语言全平台安装
  3. （转）学习directx遇到的问题
  4. Pandas一些小技巧
  5. 面向接口的开发到面向对象的编程
  6. ubuntu11.04下安装TCL及TK
  7. WebM视频格式怎么转换成MP4
  8. 国际信息安全管理标准体系--BS7799
  9. KDD 2022 | 美团技术团队精选论文解读
  10. 【语音识别】基于keras的简易语音识别
  11. 路易斯安那州立大学计算机科学,路易斯安那州立大学
  12. php notice undefined variable,解决PHP提示Notice: Undefined variable的办法
  13. [附源码]java毕业设计海雨市高校实验设备报修系统
  14. MATLAB多方法车牌识别系统（bp+模板+GUI）
  15. org.springframework.data.mongodb.UncategorizedMongoDbException
  16. 贸易动力带您使用海关数据开发客户
  17. SwiftUI是什么，听听大牛们如何说
  18. EJB框架 详细介绍和注解的使用
  19. 【什么是哈希， 什么是哈希冲突，怎么解决哈希冲突？ 】
  20. Python 自动贩卖机系统

热门文章

  1. 韩国巨型机器人曝光，走一步地动山摇
  2. ubuntu 绑定网卡
  3. Oracle 12c与GoldenGate 12c的一些问答
  4. [leetcode] Merge k Sorted Lists
  5. iptables高级应用实例
  6. Netty核心组件 ChannelPipeline和ChannelHandler与ChannelHandler的入站出站规则
  7. 分层架构、六边形架构、CQRS架构模式解读
  8. gabor 幅值域 matlab,组合局部多通道Gabor滤波器和ICA的人脸描述与识别
  9. 根据ip获取所在城市 php,PHP：根据IP地址获取所在城市
  10. python中如何统计元组中元素的个数_Python：count直到列表中的元素是一个元组