JS里的居民们5-数组(栈)

2018-12-09 11:19:51来源：博客园阅读 ()

编码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>