前端進擊的巨人（二）：棧、堆、隊列、內存空間

面試常常遇到的深淺拷貝，事件輪詢，函數調用棧，閉包等容易出錯的題目，究其緣由，都是跟JavaScript基礎知識不牢固有關，下層地基沒打好，上層就是豆腐渣工程，新人小白，踏實踩土纔是關鍵。

打地基第二篇：本篇咱們將對JavaScript數據結構的知識點詳解一二。

JavaScript中有三種數據結構： 棧（stack) 、堆（heap)、 隊列（queue)。

棧（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)

基礎類型的值保存在棧中，這些類型的值有固定大小，"按值來訪問"；

引用類型的值保存在堆中，棧中存儲的是引用類型的引用地址（地址指針），"按引用訪問"，引用類型的值沒有固定大小，可擴展（一個對象咱們能夠添加多個屬性）。

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）進行標記清除，讓其失去引用，以便下一次垃圾回收時進行有效回收。

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

全局環境只有頁面退出時纔會出棧，解除變量引用。因此開發者應儘可能避免在全局環境中建立全局變量，如需使用，也要在不須要時手動標記清除，將其內存釋放掉。

垃圾回收算法除了**"標記清除"，還有一種"引用計數"**，不經常使用，僅做了解。

---

參考文檔：

• stack的三種含義
• 內存空間詳細圖解
• JavaScript變量——棧內存or堆內存

本文首發Github，期待Star！ https://github.com/ZengLingYong/blog

做者：以樂之名 本文原創，有不當的地方歡迎指出。轉載請指明出處。

原文出處：https://www.cnblogs.com/kenz520/p/10291227.html