编码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. 【分享】博士生提高科研幸福感的途径
  2. Android p2p service,android – WifiP2pDnsSdServiceInfo.newInstance中的可用服务类型
  3. 保存数组类型数据_JS基本数据类型和引用数据类型的区别及深浅拷贝
  4. 干货 | 数万实例数百TB数据量，携程Redis治理演进之路
  5. C# 派生类的XmlSerializer序列化XML
  6. Ubuntu 下 apt-get 命令
  7. iphone降级_ios14.2怎么降级到14.1 ios14.2耗电严重吗[多图]-热门资讯
  8. 分号不是个“随便的人”
  9. Gym 101915J（并查集）
  10. 网络编程t-io介绍
  11. 使Android 自带SDK 完美支持HTML5 之 html5webview
  12. 抽象函数和虚函数有什么区别？
  13. c++最小的引用（）demo
  14. 二、运行盛派的Demo(看下效果)
  15. 怎么修改android内存,安卓内存修改器怎么用?
  16. 25、ExtJs操作用友华表Cell插件（No.1）认识Cell
  17. vue图片宽高自适应_Vue组件宽高自适应问题
  18. 什么是IDC？数据中心该如何选择？
  19. oracle 11g下载_oracle11下载
  20. 怎样借助Python爬虫给宝宝起个好名字--python 学习

热门文章

  1. SpringCloud 微服务 (十五) 服务容错 Hystrix
  2. Java网络编程----基础
  3. 【原生JS组件】javascript 运动框架
  4. 加载执行预编译的Sql :prepareStatement
  5. MongoDB学习笔记~以匿名对象做为查询参数，方便查询子对象
  6. ibatis This SQL map does not contain a MappedStatement
  7. 3G时代 一起走近无线运维的3A标准——柳州市劳动和社会保障局
  8. python2 urllib2_python2.7 urllib和urllib2
  9. openglpython3d重构_python+opengl显示三维模型小程序
  10. python日志_python 日志模块