面試經常遇到的深淺拷貝，事件輪詢，函數調用棧，閉包等容易出錯的題目，究其原因，都是跟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

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

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