js中的棧、堆、隊列、記憶體空間

棧（stack) 、堆（heap)、 隊列（queue)是js的三種數據結構。

棧（stack）

棧的特點是"LIFO，即後進先出（Last in, first out）"。數據存儲時只能從頂部逐個存入，取出時也需從頂部逐個取出。《前端進擊的巨人（一）：執行上下文與執行棧，變數對象》中解釋執行棧時，舉了一個乒乓球盒子的例子，來演示棧的存取方式，這裡再舉個慄子搭積木。

舉個慄子：乒乓球盒子/搭建積木

JavaScript中Array數組模擬棧：

var arr = [1, 2, 3, 4, 5];

arr.push(6); // 存入數據 arr -> [1, 2, 3, 4, 5, 6]
arr.pop();   // 取出數據 arr -> [1, 2, 3, 4, 5]

堆（heap）

堆的特點是"無序"的key-value"鍵值對"存儲方式。

舉個慄子：書架存書

我們想要在書架上找到想要的書，最直接的方式就是通過查找書名，書名就是我們的key。拿著這把key，就可以輕鬆檢索到對應的書籍。

"堆的存取方式跟順序沒有關係，不局限出入口"。

隊列 （queue）

隊列的特點是是"FIFO，即先進先出（First in, first out）" 。
數據存取時"從隊尾插入，從隊頭取出"。

"與棧的區別：棧的存入取出都在頂部一個出入口，而隊列分兩個，一個出口，一個入口"。

舉個慄子：排隊取餐

JavaScript中Array數組模擬隊列：

var arr = [1, 2, 3, 4, 5];

// 隊尾in
arr.push(6);    // 存入 arr -> [1, 2, 3, 4, 5, 6]
// 隊頭out
arr.shift();    // 取出 arr -> [2, 3, 4, 5, 6]

棧、堆、隊列在JavaScript中的應用

1. 代碼運行方式（棧應用/函數調用棧）

《前端進擊的巨人（一）：執行上下文與執行棧，變數對象》詳解了JavaScript運行時的函數調用過程，而其中執行棧（函數調用棧）就是用到棧的數據結構。

JavaScript中函數的執行過程，其實就是一個入棧出棧的過程:

1. 當腳本要調用一個函數時，JS解析器把該函數推入棧中（push）並執行
2. 當函數運行結束後，JS解析器將它從堆棧中推出（pop）

具體執行過程可翻閱上篇文章《前端進擊的巨人（一）：執行上下文與執行棧，變數對象》，這裡不再贅述。

2. 記憶體存儲（棧、堆）

JavaScript中變數類型有兩種：

1. 基礎類型（Undefined, Null, Boolean, Number, String, Symbol）一共6種
2. 引用類型（Object)

JS中的基礎數據類型，這些值都有固定的大小，往往都保存在棧記憶體中（閉包除外），由系統自動分配存儲空間。我們可以直接操作保存在棧記憶體空間的值，因此基礎數據類型都是按值訪問 數據在棧記憶體中的存儲與使用方式類似於數據結構中的堆棧數據結構，遵循後進先出的原則。

JS的引用數據類型，比如數組Array，它們值的大小是不固定的。引用數據類型的值是保存在堆記憶體中的對象。JS不允許直接訪問堆記憶體中的位置，因此我們不能直接操作對象的堆記憶體空間。在操作對象時，實際上是在操作對象的引用而不是實際的對象。因此，引用類型的值都是按引用訪問的。這裡的引用，我們可以粗淺地理解為保存在棧記憶體中的一個地址，該地址與堆記憶體的實際值相關聯。

3. 事件輪詢（隊列）

JavaScript中事件輪詢（Event Loop）的執行機制，就是採用隊列的存取方式，因事件輪詢（Event Loop）也是JS基礎中的一個比較難理解的知識點，後續另開一篇章再作詳細探究。

深淺拷貝

將一個變數的值賦值給另一個變數，相當於在棧記憶體中創建了一個新的記憶體空間，然後從棧中複製值，存儲到這個新空間中。對於基本類型，棧中存儲的就是它自身的值，所以新記憶體空間存儲的也是一個值。直接改變新變數的值，不會影響到舊變數的值，因為他們值存儲的記憶體空間不同。

// 基本類型複製變數
var a = 10;
var b = a;
b = 20;

a // 10
b // 20

而對於引用類型來說，同樣是複製棧中存儲的值。但是棧存儲的只是其引用地址，其具體的值存儲在堆中。變數複製僅複製棧中存儲的值，不會複製堆中存儲的值，所以新變數在棧中的值是一個地址指針。

// 引用類型複製變數
var a = { age: 27 };
var b = a;
b.age = 29;

a.age == b.age; // 29

可見，變數複製賦值，都屬於棧存儲拷貝，因此深淺拷貝可以這樣區分：

• "淺拷貝：棧存儲拷貝"
• "深拷貝：棧堆存儲拷貝"

深拷貝會同時開闢新的棧記憶體，堆記憶體空間。

// 利用JSON對象方法實現深拷貝
var a = { age: 27 };
var b = JSON.parse(JSON.stringify(a));
b.age = 29;

a.age // 27
b.age // 29

函數傳參數是按值傳遞？按引用傳遞？

var person = {
 age: 27
};
function foo (person) {
  person.age = 29;
}
foo(person);
person.age // 29;

函數調用時，會對參數賦值。而參數傳遞過程其實同樣是變數複製的過程，所以它是按值傳遞。var person = person，因為傳遞參數是對象時，變數複製僅複製的棧存儲（淺拷貝），所以修改對象屬性會造成外部變數對象的修改。

至此，當我們理清棧、堆數據結構，以及JS中數據類型存取方式。深淺拷貝問題也就通順了。

記憶體空間

記憶體空間管理

JavaScript執行過程中記憶體分配：

1. 為變數對象分配需要的記憶體
2. 在分配到的記憶體中進行讀/寫操作
3. 不再使用時將其銷毀，釋放記憶體

記憶體管理不善，會出現記憶體泄露，造成瀏覽器記憶體占用過多，頁面卡頓等問題。

垃圾回收機制

JavaScript中有自動垃圾回收機制，會通過標記清除的演算法識別哪些變數對象不再使用，對其進行銷毀。開發者也可在代碼中手動設置變數值為null（a = null）進行標記清除，讓其失去引用，以便下一次垃圾回收時進行有效回收。

局部環境中，函數執行完成後，函數局部環境聲明的變數不再需要時，就會被垃圾回收銷毀（理想的情況下，閉包會阻止這一過程）。

全局環境只有頁面退出時才會出棧，解除變數引用。所以開發者應儘量避免在全局環境中創建全局變數，如需使用，也要在不需要時手動標記清除，將其記憶體釋放掉。

為什麼會有棧記憶體和堆記憶體之分？

通常與垃圾回收機制有關。為了使程式運行時占用的記憶體最小。

當一個方法執行時，每個方法都會建立自己的記憶體棧，在這個方法內定義的變數將會逐個放入這塊棧記憶體里，隨著方法的執行結束，這個方法的記憶體棧也將自然銷毀了。因此，所有在方法中定義的變數都是放在棧記憶體中的；

當我們在程式中創建一個對象時，這個對象將被保存到運行時數據區中，以便反覆利用（因為對象的創建成本通常較大），這個運行時數據區就是堆記憶體。堆記憶體中的對象不會隨方法的結束而銷毀，即使方法結束後，這個對象還可能被另一個引用變數所引用（方法的參數傳遞時很常見），則這個對象依然不會被銷毀，只有當一個對象沒有任何引用變數引用它時，系統的垃圾回收機制才會在核實的時候回收它。