摘要:所以,可以這樣寫利用數組的方法,就可以實現在棧頂末尾添加新的元素了。因為棧地內部使用數組保存元素,所以數組地就是棧的長度。實現方法,方法用來清空棧中所有的元素。感興趣可以自行百度去了解原文鏈接行無忌的成長小屋如何用手動實現一個棧
什么是棧(Stack)
棧是一種遵從后進先出(LIFO)原則的有序集合。
新添加的或待刪除的元素都保存在棧的末尾,稱為棧頂,另一端叫棧底。
在棧里,新元素都靠近棧頂,舊元素都接近棧底
現實中的例子在生活中也能發現很多棧的例子。例如,廚房里堆放的盤子,總是疊在上方的先被使用;輸入框內容進行刪除時,總是最后輸入的先刪除;彈夾中的子彈,越后裝入的,越先發射......
手動實現一個棧首先,創建一個類來表示棧
function Stack () { }
我們需要選擇一種數據結構來保存棧里的元素,可以選擇數組
function Stack(){ var items = []; //用來保存棧里的元素 }
接下來,為棧添加一些方法
push(element(s)); //添加新元素到棧頂 pop(); //移除棧頂的元素,同時返回被移除的元素 peek(); //返回棧頂的元素,不對棧做任何修改 isEmpty(); //如果棧里沒有任何元素就返回true,否則false clear(); //移除棧里的所有元素 size(); //返回棧里的元素個數,類似于數組的length屬性
我們需要實現的第一個方法時push。用來往棧里添加新元素,有一點很重要:該方法只添加到棧頂,也就是棧的末尾。所以,可以這樣寫:
this.push = function (element) { items.push(element); }
利用數組的push方法,就可以實現在棧頂末尾添加新的元素了。
接著,來實現pop方法,用來實現移除棧里的元素。棧遵從LIFO(后進先出)原則。移出去的是最后添加進去的元素。因此,可以使用數組的pop方法。
this.pop = function () { return items.pop(); }
這樣一來,這個棧自然就遵從了LIFO原則
現在,再來為這個棧添額外的輔助方法。
如果想知道棧里最后添加的元素是什么,可以用peek方法。這個方法將返回棧頂的元素
this.peek = function () { return items[items.length-1]; }
因為類內部是用數組保存元素的,所以這里訪問數組最后一個元素用length-1
下一個要實現的方法是isEmpty,如果棧為空的話,就返回true,否則返回false:
this.isEmpty = function () { return items.length == 0; }
使用isEmpty方法,就能簡單地判斷棧內部是否為空。
類似于數組地length屬性,我們也可以實現棧地length。
this.size = function () { return items.length; }
因為棧地內部使用數組保存元素,所以數組地length就是棧的長度。
實現clear方法,clear方法用來清空棧中所有的元素。最簡單的實現方法是:
this.clear = function () { items = []; }
其實多次調用pop方法也可以,但是沒有這個方法來的簡單快捷。
最后,為了檢查棧里的內容,還需要實現一個輔助方法:print。它會把棧里的元素都輸出到控制臺:
this.print = function () { console.log(items.toString()); }
至此,我們就完整地創建了一個棧!
棧的完整代碼function Stack(){ var items = []; //用來保存棧里的元素 this.push = function (element) { items.push(element); } this.pop = function () { return items.pop(); } this.peek = function () { return items[items.length-1]; } this.isEmpty = function () { return items.length == 0; } this.size = function () { return items.length; } this.clear = function () { items = []; } this.print = function () { console.log(items.toString()); } }使用Stack類
棧已經創建好了,我們來測試一下
首先,來初始化Stack類。然后,驗證一下棧是否為空
var stack = new Stack(); console.log(stack.isEmpty()); //控制臺輸出true
接下來,往棧里面添加一下元素:
stack.push(5); stack.push(8);
如果調用peek方法,很顯然將會輸出8,因為它是棧頂的元素:
console.log(stack.peek()); //控制臺輸出8
再添加一個元素:
stack.push(11); console.log(stack.size()); //控制臺輸出3
我們往棧里又添加了11。如果調用size方法,輸出為3,因為棧里有三個元素(5,8和11)。如果這時候調用isEmpty方法,會看到輸出了false(因為此時棧不為空)。最后,再來往里面添加一個元素:
stack.push(15);
然后,調用兩次pop方法從棧里移除兩個元素:
stack.pop(); stack.pop(); console.log(stack.size()); //控制臺輸出2 stack.print(); //控制臺輸出[5,8]
到這里,整個棧的功能測試完成。
用棧來解決問題使用棧來完成進制轉換。
現實生活中,我們主要用10進制,但在計算科學中,二進制非常重要,因為計算機里所有的內容都是用二進制數字0和1來表示的。大學的計算機課都會先教進制轉換。以二進制為例:
function divideBy2 (decNumber) { var remStack = new Stack(), rem, binaryString = ""; while (decNumber>0) { //{1} rem = Math.floor(decNumber % 2); //{2} remStack.push(rem); //{3} decNumber = Math.floor(decNumber / 2); //{4} } while (!remStack.isEmpty()) { //{5} binaryString += remStack.pop().toString(); } return binaryString; }
這段代碼里,當結果滿足和2做整除的條件時,(行{1}),我們會獲得當前結果和2的余數,放到棧里(行{2}、{3})。然后讓結果和2做整除(行{4})
注:JavaScript有數字類型,但是它不會區分時整數還是浮點數。因此,要使用Math.floor函數讓除法的操作僅返回整數部分。
最后,用pop方法把棧中的元素都移除,把出棧的元素連接成字符串(行{5})。
測試一下:
console.log(divideBy2(520)); //輸出1000001000 console.log(divideBy2(10)); //輸出1010 console.log(divideBy2(1000)); //輸出1111101000
接下來,可以很容易的修改上面的算法,使它能夠把十進制轉化為任何進制。除了讓十進制數字和2整除轉成二進制數,還可以傳入其他任意進制的基數作為參數,就像下面的算法這樣:
function baseConverter (decNumber, base) { var remStack = new Stack(), rem, baseString = ""; digits = "0123456789ABCDEF"; //{6} while (decNumber>0) { rem = Math.floor(decNumber % base); remStack.push(rem); //{3} decNumber = Math.floor(decNumber / base); } while (!remStack.isEmpty()) { baseString += digits[remStack.pop()]; //{7} } return baseString; }
在將十進制轉成二進制時,余數是0或1;在將十進制轉成八進制時,余數時0-8之間的數;但是將十進制轉成十六進制時,余數時0-9之間的數字加上A、B、C、D、E、F(對應10、11、12、13、14和15)。因此,需要對棧中的數字做個轉化才可以(行{6}、{7})。
來測試一下輸出結果:
console.log(baseConverter(1231,2)); //輸出10011001111 console.log(baseConverter(1231,8)); //輸出2317 console.log(baseConverter(1231,16)); //輸出4CF
顯然是正確的。
小結我們用js代碼自己實現了棧。并且通過進制轉換的例子來實際應用了它。棧的應用實例還有很多,比如平衡圓括號和漢諾塔。感興趣可以自行百度去了解
原文鏈接:行無忌的成長小屋:如何用JavaScript手動實現一個棧
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95481.html
摘要:翻譯瘋狂的技術宅原文許多前端開發人員都在用為他們的網站設計樣式。一些人喜歡在中添加一些自己偏好的樣式,我也一樣。我認為這是令人難以置信和奇怪的。不同的瀏覽器為表單元素和按鈕設置了不同的邊框樣式。這種風格的問題是它的特異性低。 翻譯:瘋狂的技術宅原文:https://medium.freecodecamp.o... 許多前端開發人員都在用 Normalize 為他們的網站設計樣式。一些...
摘要:格式化安裝插件如果題主認真讀了的的話,應該可以寫出下面的配置了。用來格式化和提示格式錯誤。在編碼過程中提示格式錯誤,養成良好的編碼習慣。 前言 感覺搭建一個舒服的前端開發環境,十分的重要定制化的格式化,編輯器自帶的格式化各種報錯,手動改真的會死人,因此搭建一個編輯器環境必不可少,現在要講的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...
摘要:此事件隊列的美妙之處在于它只是函數等待被調用和移動到調用棧的一個臨時存放區域。在事件循環不斷監視調用棧是否為空現在確實是空的時候調用創建一個新的調用棧來執行代碼。在執行完之后進入了一個新的狀態這個狀態調用棧為空事件記錄表為空事件隊列也為空。 這篇文章是對個人認為講解 JavaScript 事件循環比較清楚的一篇英文文章的簡單翻譯,原文地址是http://altitudelabs.com...
摘要:變量作者簡介是推出的一個天挑戰。這是一個的新特性,和目前都還不支持。命名寫法是變量名,在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。 Day03 - CSS 變量 作者:?liyuechun 簡介:JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是...
摘要:前端日報精選精讀與提案知乎專欄第期認識引擎記錄一次利用工具進行性能優化的真實案例簡書中的使用規則教程繼承的實現方法個人文章中文譯組件渲染性能探索個人文章周刊第期表單性能的改進實踐知乎專欄簡單可重用的圖表庫知乎專欄 2017-07-08 前端日報 精選 精讀 TC39 與 ECMAScript 提案 - 知乎專欄【第989期】認識 V8 引擎記錄一次利用 Timeline/Perform...
閱讀 1778·2021-11-15 11:37
閱讀 3048·2021-11-04 16:05
閱讀 1917·2021-10-27 14:18
閱讀 2748·2021-08-12 13:30
閱讀 2493·2019-08-29 14:18
閱讀 2080·2019-08-29 13:07
閱讀 2017·2019-08-27 10:54
閱讀 2718·2019-08-26 12:15