棧(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中函數的執行過程,其實就是一個入棧出棧的過程:
- 當腳本要調用一個函數時,JS解析器把該函數推入棧中(push)並執行
- 當函數運行結束后,JS解析器將它從堆棧中推出(pop)
具體執行過程可翻閱上篇文章《前端進擊的巨人(一):執行上下文與執行棧,變量對象》,這里不再贅述。
2. 內存存儲(棧、堆)
JavaScript中變量類型有兩種:
- 基礎類型(
Undefined, Null, Boolean, Number, String, Symbol
)一共6種 - 引用類型(
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執行過程中內存分配:
- 為變量對象分配需要的內存
- 在分配到的內存中進行讀/寫操作
- 不再使用時將其銷毀,釋放內存
內存管理不善,會出現內存泄露,造成瀏覽器內存占用過多,頁面卡頓等問題。
垃圾回收機制
JavaScript中有自動垃圾回收機制,會通過標記清除的算法識別哪些變量對象不再使用,對其進行銷毀。開發者也可在代碼中手動設置變量值為null(a = null
)進行標記清除,讓其失去引用,以便下一次垃圾回收時進行有效回收。
局部環境中,函數執行完成后,函數局部環境聲明的變量不再需要時,就會被垃圾回收銷毀(理想的情況下,閉包會阻止這一過程)。
全局環境只有頁面退出時才會出棧,解除變量引用。所以開發者應盡量避免在全局環境中創建全局變量,如需使用,也要在不需要時手動標記清除,將其內存釋放掉。
為什么會有棧內存和堆內存之分?
通常與垃圾回收機制有關。為了使程序運行時占用的內存最小。
當一個方法執行時,每個方法都會建立自己的內存棧,在這個方法內定義的變量將會逐個放入這塊棧內存里,隨着方法的執行結束,這個方法的內存棧也將自然銷毀了。因此,所有在方法中定義的變量都是放在棧內存中的;
當我們在程序中創建一個對象時,這個對象將被保存到運行時數據區中,以便反復利用(因為對象的創建成本通常較大),這個運行時數據區就是堆內存。堆內存中的對象不會隨方法的結束而銷毀,即使方法結束后,這個對象還可能被另一個引用變量所引用(方法的參數傳遞時很常見),則這個對象依然不會被銷毀,只有當一個對象沒有任何引用變量引用它時,系統的垃圾回收機制才會在核實的時候回收它。