JS裡的居民們5-陣列(棧)
阿新 • • 發佈：2018-12-06
編碼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->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("->"); 29 } 30 popbtn.onclick = function () { 31 stack.shift(); 32 stackcont.innerHTML = "棧內容：" + stack.join("->"); 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->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("<-"); 29 } 30 popbtn.onclick = function () { 31 stack.pop(); 32 stackcont.innerHTML = "棧內容：" + stack.join("<-"); 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>