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

编码1（栈顶在最右）

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

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

• 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
• 栈顶对应数组中最后一个元素
• 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最右侧，中间用 -> 连接（练习使用数组的join方法）

 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8" />
     <title>JS里的居民们6-数组(栈-栈顶在右)</title>
 </head>

 <body>
     <input id="stack-input" type="text">
     <p id="stack-cont">栈内容：apple-&gt;pear</p>
     <button id="push-btn">进栈</button>
     <button id="pop-btn">退栈</button>
     <button id="font-btn">打印栈顶元素内容</button>
     <button id="empty-btn">判断栈是否为空</button>

     <script>
         var stack = ["apple", "pear"];
         var txt = document.getElementById("stack-input");
         var stackcont = document.getElementById("stack-cont");
         var pushbtn = document.getElementById("push-btn");
         var popbtn = document.getElementById("pop-btn");
         var fontbtn = document.getElementById("font-btn");
         var emptybtn = document.getElementById("empty-btn");

         pushbtn.onclick = function () {
             stack.unshift(txt.value);
             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");
         }
         popbtn.onclick = function () {
             stack.shift();
             stackcont.innerHTML = "栈内容：" + stack.join("-&gt");
         }
         fontbtn.onclick = function () {
             stackcont.innerHTML = "栈内容：" + stack[stack.length - 1];
         }
         emptybtn.onclick = function () {
             if (stack.length == 0) {
                 stackcont.innerHTML = "栈内容：空";
             } else {
                 stackcont.innerHTML = "栈内容：不为空";
             }
         }
     </script>
 </body>

 </html>

编码2（栈顶在最左）

对上面练习进行小调整

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

• 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
• 栈顶对应数组中第一个元素
• 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最左侧，中间用 -< 连接（练习使用数组的join方法）

 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8" />
     <title>JS里的居民们7-数组(栈-栈顶在左)</title>
 </head>

 <body>
     <input id="stack-input" type="text">
     <p id="stack-cont">栈内容：apple-&gt;pear</p>
     <button id="push-btn">进栈</button>
     <button id="pop-btn">退栈</button>
     <button id="font-btn">打印栈顶元素内容</button>
     <button id="empty-btn">判断栈是否为空</button>

     <script>
         var stack = ["apple", "pear"];
         var txt = document.getElementById("stack-input");
         var stackcont = document.getElementById("stack-cont");
         var pushbtn = document.getElementById("push-btn");
         var popbtn = document.getElementById("pop-btn");
         var fontbtn = document.getElementById("font-btn");
         var emptybtn = document.getElementById("empty-btn");

         pushbtn.onclick = function () {
             stack.push(txt.value);
             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");
         }
         popbtn.onclick = function () {
             stack.pop();
             stackcont.innerHTML = "栈内容：" + stack.join("&lt-");
         }
         fontbtn.onclick = function () {
             stackcont.innerHTML = "栈内容：" + stack[0];
         }
         emptybtn.onclick = function () {
             if (stack.length == 0) {
                 stackcont.innerHTML = "栈内容：空";
             } else {
                 stackcont.innerHTML = "栈内容：不为空";
             }
         }
     </script>
 </body>

 </html>