棧、堆、隊列深刻理解，面試無憂
1、前言
三者都屬於數據結構，做爲專業的技術人員來講，理解數據結構是不可或缺的一部分。在平常的面試中，可能會遇到棧、堆、隊列等一系列問題。 html
- Event Loop的執行棧、任務隊列。
- 變量存儲的堆、棧問題。
- 棧、隊列數據結構的實現問題。
- 棧、堆、隊列是什麼？
- 還有一些列相關的手寫問題。
在面試中，常常問遇到與之相關的一些列問題哈。java
2、棧
2.1 簡介
棧 是一種遵循 後進先出（LIFO） 原則的有序集合。新添加和待刪除的數據都保存在棧的同一端棧頂，另外一端就是棧底。新元素靠近棧頂，舊元素靠近棧底。 棧由編譯器自動分配釋放。棧使用一級緩存。調用時處於存儲空間，調用完畢自動釋放。git
舉個栗子：乒乓球盒子/搭建積木程序員
2.2 基本數據結構的存儲（存儲棧）
javaScript中，數據類型分爲基本數據類型和引用數據類型，基本數據類型包含：string、number、boolean、undefined、null、symbol、bigint這幾種。在內存中這幾種數據類型存儲在棧空間，咱們按值訪問。原型類型都存儲在棧內存中，是大小固定而且有序的。es6
2.3 執行棧（函數調用棧）
咱們知道了基本數據結構的存儲以後，咱們再來看看JavaScript中如何經過棧來管理多個執行上下文。面試
- 程序執行進入一個執行環境時，它的執行上下文就會被建立，並被推入執行棧中(入棧)。
- 程序執行完成時，它的執行上下文就會被銷燬，並從棧頂被推出(出棧)，控制權交由下一個執行上下文。
JavaScript中每個可執行代碼，在解釋執行前，都會建立一個可執行上下文。按照可執行代碼塊可分爲三種可執行上下文。 算法
- 全局可執行上下文：每個程序都有一個全局可執行代碼，而且只有一個。任何不在函數內部的代碼都在全局執行上下文。
- 函數可執行上下文：每當一個函數被調用時, 都會爲該函數建立一個新的上下文。每一個函數都被調用時都會建立它本身的執行上下文。
- Eval可執行上下文：Eval也有本身執行上下文。
由於JS執行中最早進入全局環境，因此處於"棧底的永遠是全局環境的執行上下文"。而處於"棧頂的是當前正在執行函數的執行上下文"，當函數調用完成後，它就會從棧頂被推出（理想的狀況下，閉包會阻止該操做，閉包後續文章深刻詳解）。編程
"全局環境只有一個，對應的全局執行上下文也只有一個，只有當頁面被關閉以後它纔會從執行棧中被推出，不然一直存在於棧底"瀏覽器
看個例子：緩存
let name = '蝸牛';
function sayName(name) {
sayNameStart(name);
}
function sayNameStart(name) {
sayNameEnd(name);
}
function sayNameEnd(name) {
console.log(name);
}
複製代碼
當代碼進行時聲明：
2.4 建立一個棧(實現棧方法）
咱們須要本身建立一個棧，而且這個棧包含一些方法。
- push(element(s)):添加一個（或多個）新元素到棧頂
- pop():刪除棧頂的元素，並返回該元素
- peek():返回棧頂的元素，不對棧作任何操做
- isEmpty():檢查棧是否爲空
- size():返回棧的元素個數
- clear():清空棧
function Stack() {
let items = [];
this.push = function(element) {
items.push(element);
};
this.pop = function() {
let s = items.pop();
return s;
};
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 = [];
}
}
複製代碼
可是這樣的方式在建立多個實例的時候爲建立多個items的副本。就不太合適了。 用ES如何6實現Stack類了。能夠用WeakMap實現，並保證屬性是私有的。
let Stack = (function() {
const items = new WeakMap();
class Stack {
constructor() {
items.set(this, []);
}
getItems() {
let s = items.get(this);
return s;
}
push(element) {
this.getItems().push(element);
}
pop() {
return this.getItems().pop();
}
peek() {
return this.getItems()[this.getItems.length - 1];
}
isEmpty() {
return this.getItems().length == 0;
}
size() {
return this.getItems().length;
}
clear() {
this.getItems() = [];
}
}
return Stack;
})();
複製代碼
2.5 使用棧解決問題
棧能夠解決十進制轉爲二進制的問題、任意進制轉換的問題、平衡園括號問題、漢羅塔問題。
// 例子十進制轉二進制問題
function divideBy2(decNumber) {
var remStack = new Stack(),
rem,
binaryString = '';
while (decNumber > 0) {
rem = Math.floor(decNumber % 2);
remStack.push(rem);
decNumber = Math.floor(decNumber / 2);
}
while(!remStack.isEmpty()) {
binaryString += remStack.pop().toString();
}
return binaryString;
}
// 任意進制轉換的算法
function baseConverter(decNumber, base) {
var remStack = new Stack(),
rem,
binaryString = '',
digits = '0123456789ABCDEF';
while (decNumber > 0) {
rem = Math.floor(decNumber % base);
remStack.push(rem);
decNumber = Math.floor(decNumber / base);
}
while(!remStack.isEmpty()) {
binaryString += digits[remStack.pop()].toString();
}
return binaryString;
}
複製代碼
2.6 棧溢出問題
2.6.1 棧大小限制
不一樣瀏覽器對調用棧的大小是有限制，超過將出現棧溢出的問題。下面這段代碼能夠檢驗不用瀏覽器對調用棧的大小限制。
var i = 0;
function recursiveFn () {
i++;
recursiveFn();
}
try {
recursiveFn();
} catch (ex) {
console.log(`個人最大調用棧 i = ${i} errorMsg = ${ex}`);
}
複製代碼
谷歌瀏覽器：
2.6.2 遞歸調用的棧溢出問題
function Fibonacci (n) {
if ( n <= 1 ) {return 1};
return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10) // 89
Fibonacci(100) // 超時
Fibonacci(500) // 超時
複製代碼
上面代碼是一個階乘函數，計算n的階乘，最多須要保存n個調用記錄，複雜度 O(n) 。若是超出限制，會出現棧溢出問題。
2.6.3 尾遞歸調用優化
遞歸很是耗費內存，由於須要同時保存成千上百個調用幀，很容易發生「棧溢出」錯誤（stack overflow）。但對於尾遞歸來講，因爲只存在一個調用幀，因此永遠不會發生「棧溢出」錯誤。
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
if( n <= 1 ) {return ac2};
return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}
Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity
複製代碼
因而可知，「尾調用優化」對遞歸操做意義重大，因此一些函數式編程語言將其寫入了語言規格。ES6 亦是如此，第一次明確規定，全部 ECMAScript 的實現，都必須部署「尾調用優化」。這就是說，ES6 中只要使用尾遞歸，就不會發生棧溢出（或者層層遞歸形成的超時），相對節省內存。
2.6.4 爲何這個例子裏尾遞歸佔用的棧內存也會隨着參數增長呢
列子來源：ECMAScript 6 入門
3、堆
3.1 簡介
堆，通常由操做人員（程序員）分配釋放，若操做人員不分配釋放，將由OS回收釋放。分配方式相似鏈表。堆存儲在二級緩存中。
3.2 堆內存
JavaScript 的數據類型除了原始類型，還有一類是 Object 類型，它包含：
- Object
- Function
- Array
- Date
- RegExp
Object 類型都存儲在堆內存中，是大小不定，複雜可變的。 Object 類型數據的 指針 存儲在棧內存空間， 指針實際指向的值存儲在堆內存空間。
3.3 爲何會有堆內存、棧內存之分
一般與垃圾回收機制有關。爲了使程序運行時佔用的內存最小。
當一個方法執行時，每一個方法都會創建本身的內存棧，在這個方法內定義的變量將會逐個放入這塊棧內存裏，隨着方法的執行結束，這個方法的內存棧也將天然銷燬了。所以，全部在方法中定義的變量都是放在棧內存中的；
當咱們在程序中建立一個對象時，這個對象將被保存到運行時數據區中，以便反覆利用（由於對象的建立成本一般較大），這個運行時數據區就是堆內存。堆內存中的對象不會隨方法的結束而銷燬，即便方法結束後，這個對象還可能被另外一個引用變量所引用（方法的參數傳遞時很常見），則這個對象依然不會被銷燬，只有當一個對象沒有任何引用變量引用它時，系統的垃圾回收機制纔會在覈實的時候回收它。
4、隊列
4.1 簡介
隊列遵循FIFO，先進先出原則的一組有序集合。隊列在尾部添加元素，在頂部刪除元素。在現實中最多見的隊列就是排隊。先排隊的先服務。（請你們文明排隊，不要插隊。）
4.2 任務隊列
JavaScript是單線程，單線程任務被分爲同步任務和異步任務。同步任務在調用棧中等待主線程依次執行，異步任務會在有告終果以後，將回調函數註冊到任務隊列，等待主線程空閒（調用棧爲空），放入執行棧等待主線程執行。
Event loop執行以下圖，任務隊列只是其中的一部分。
執行棧在執行完同步任務以後，若是執行棧爲空，就會去檢查微任務（MicroTask）隊列是否爲空，若是爲空的話，就會去執行宏任務隊列（MacroTask）。不然就會一次性執行完全部的微任務隊列。 每次一個宏任務執行完成以後，都會去檢查微任務隊列是否爲空，若是不爲空就會按照先進先出的方式執行完微任務隊列。而後在執行下一個宏任務，如此循環執行。直到結束。
4.3 建立一個隊列(實現隊列方法）
實現包含如下方法的Queue類
- enqueue(element(s)):向隊列尾部添加一個（或多個）元素。
- dequeue():移除隊列的第一項，並返回移除的元素。
- front():返回隊列的第一個元素--最早被添加，最早被移除的元素。
- isEmpty():判斷隊列是否爲空。
- size():返回隊列的長度。
// 隊列Queue類簡單實現
function Queue() {
let items = [];
// 添加元素
this.enqueue = function(element) {
items.push(element);
};
// 刪除元素
this.dequeue = function() {
return items.shift();
};
// 返回隊列第一個元素
this.front = function() {
return items[0];
};
// 判斷隊列是否爲空
this.isEmpty = function() {
return items.length === 0;
};
// 返回隊列長度
this.size = function() {
return items.length;
};
}
複製代碼
ES6語法實現Queue隊列類，利用WeakMap來保存私有屬性items,並用外層函數（閉包）來封裝Queue類。
let Queue1 = (function() {
const items = new WeakMap();
class Queue1 {
constructor() {
items.set(this, []);
}
// 獲取隊列
getQueue() {
return items.get(this);
}
// 添加元素
enqueue (element) {
this.getQueue().push(element);
}
// 刪除元素
dequeue() {
return this.getQueue().shift();
}
// 返回隊列第一個元素
front() {
return this.getQueue()[0];
}
// 判斷隊列是否爲空
isEmpty() {
return this.getQueue().length === 0;
}
// 返回隊列長度
size() {
return this.getQueue().length;
}
}
return Queue1;
})();
複製代碼
4.4 優先隊列
元素的添加和刪除基於優先級。常見的就是機場的登機順序。頭等艙和商務艙的優先級高於經濟艙。實現優先隊列，設置優先級。
// 優先列隊
function PriorityQueue() {
let items = [];
// 建立元素和它的優先級（priority越大優先級越低）
function QueueElement(element, priority) {
this.element = element;
this.priority = priority;
}
// 添加元素（根據優先級添加）
this.enqueue = function(element, priority) {
let queueElement = new QueueElement(element, priority);
// 標記是否添加元素的優先級的值最大
let added = false;
for (let i = 0; i < items.length; i++) {
if (queueElement.priority < items[i].priority) {
items.splice(i, 0, queueElement);
added = true;
break;
}
}
if (!added) {
items.push(queueElement);
}
};
// 刪除元素
this.dequeue = function() {
return items.shift();
};
// 返回隊列第一個元素
this.front = function() {
return items[0];
};
// 判斷隊列是否爲空
this.isEmpty = function() {
return items.length === 0;
};
// 返回隊列長度
this.size = function() {
return items.length
};
// 打印隊列
this.print = function() {
for (let i = 0; i < items.length; i++) {
console.log(`${items[i].element} - ${items[i].priority}`);
}
};
}
複製代碼
4.5 循環隊列（擊鼓傳花）
// 循環隊列（擊鼓傳花）
function hotPotato(nameList, num) {
let queue = new Queue(); //{1} // 構造函數爲4.3建立
for(let i =0; i< nameList.length; i++) {
queue.enqueue(nameList[i]); // {2}
}
let eliminted = '';
while(queue.size() > 1) {
// 把隊列num以前的項按照優先級添加到隊列的後面
for(let i = 0; i < num; i++) {
queue.enqueue(queue.dequeue()); // {3}
}
eliminted = queue.dequeue(); // {4}
console.log(eliminted + '在擊鼓傳花遊戲中被淘汰');
}
return queue.dequeue(); // {5}
}
let names = ['John', 'Jack', 'Camila', 'Ingrid', 'Carl'];
let winner = hotPotato(names, 7);
console.log('獲勝者是：' + winner);
複製代碼
- 利用隊列類，建立一個隊列。
- 把當前玩擊鼓傳花遊戲的全部人都放進隊列。
- 給定一個數字，迭代隊列，從隊列的開頭移除一項，添加到隊列的尾部（如遊戲就是：你把花傳給旁邊的人，你就能夠安全了）。
- 一旦迭代次數到達，那麼這時拿着花的這我的就會被淘汰。
- 最後剩下一我的，這我的就是勝利者。
參考來源：
- 1. 棧、堆、隊列深刻理解，面試無憂
- 2. 深刻理解Java的棧與堆棧
- 3. 堆，堆棧(棧),隊列
- 4. 棧，隊列，堆
- 5. 深刻理解TAILQ隊列
- 6. 深刻理解任務堆棧以及堆棧溢出
- 7. 【IT筆試面試題整理】堆棧和隊列
- 8. 隊列和堆棧
- 9. 堆、棧和隊列
- 10. 堆棧和隊列
- 更多相關文章...
- • C# 堆棧（Stack） - C#教程
- • C# 隊列（Queue） - C#教程
- • 算法總結-深度優先算法
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 棧、堆、隊列深刻理解，面試無憂
- 2. 深刻理解Java的棧與堆棧
- 3. 堆，堆棧(棧),隊列
- 4. 棧，隊列，堆
- 5. 深刻理解TAILQ隊列
- 6. 深刻理解任務堆棧以及堆棧溢出
- 7. 【IT筆試面試題整理】堆棧和隊列
- 8. 隊列和堆棧
- 9. 堆、棧和隊列
- 10. 堆棧和隊列