深入理解javascript系列(一):從三種資料結構開始

Panthon發表於2018-06-11

    在Javascript中,有三種常用的資料結構是我們必須瞭解的。它們分別是棧(stack)、堆(heap)、佇列(queue)。它們是我們理解javascript核心的基礎。棧、堆、佇列對應不同的應用場景。

1.1  棧

    當我們遇到棧的時候,可能會是不同的棧。什麼意思了?我們先必須理清不同應用場景下的棧。

    場景1:棧是一種資料結構,表示的是資料的一種儲存方式,這是一種理論基礎。

    場景2:棧是可用來規定程式碼的執行順序,在javascript中叫做函式呼叫棧(call stack),他是根據棧資料結論理論的一種實踐。

    場景3:棧表達的是一種資料在記憶體中的儲存區域,通常叫做作棧區。但是javascript並沒有想別語言那樣區分棧區和堆區。因此這裡不做擴充套件。我們可以簡單粗暴的認為在javascript中,所有的資料都是存放在堆記憶體空間中的。

    這裡需要我們理解棧這種資料結構的原理和特點,學習它的最終目的是掌握函式呼叫棧的執行方式。下面我們通過兵乓球盒這個案例來放便理解棧的存取方式。

深入理解javascript系列(一):從三種資料結構開始

    如圖所示,兵乓球盒中依次放入兵乓球,當我們想取出兵乓球時,必須從頂部一個一個的拿出,直到取到我們第一個放入的兵乓球。

    這種情況與棧的資料結構如出一轍。這中存取方式可以總結為“先進後出,後進先出(LIFO,Last In,First Out)"。如圖中的,出於棧頂的true,最後進棧,最先出棧。1在棧底,最先進的棧,但只能最後出棧。

   在javascript中,陣列(Array)提供了兩個棧方法來對應這種存取方式。

   push:向陣列末尾新增元素(進棧方法)

    push方法可以接收任意引數,並把他們逐個新增到陣列的末尾,並放回陣列的長度。

var a = [];
a.push(1);            //a:[1]
a.push(2,3,4);        //a:[1,2,3,4]
var l = a.push(5)     //a:[1.2.3.4.5]     l:5複製程式碼

    pop:彈出陣列末尾的一個元素

    pop刪除陣列末尾的一個元素,並返回。

var a = [1,2,3];
a.pop();    //a:[1,2]
a.pop()的返回結果為3複製程式碼

1.2  堆

堆資料是一種樹形結構

他的存取方式與從書架中取書相似。書齊地擺放在書架上,我們只要清除我們要在哪本書(知道書名)就能準確的找到我們想要的書。我們不用關係書的擺放順序,即不用想兵乓球盒那樣,必須將一些兵乓球取出來才能拿到我們想拿到的。

因為GC的存在,所以JavaScript中無法直接用堆的方式申請記憶體(類似的情況在Java中也存在),但是我們可以參考JSON格式的資料,或者陣列物件,我們儲存的key-value可以是無序的,因為順序的不同並不影響我們的使用,我們只需要關心書的名字。我們操作的都棧的物件。

1.3  佇列

在javascript中,理解佇列資料結構的目的是為了搞清楚事件迴圈(Event Loop)機制到底怎麼回事。之後的系列會講事件迴圈。

佇列(queue)是一種先進先出的(FIFO)資料結構。正如排隊過安檢一樣,排在隊伍前面的人一定是最先過安檢的人。原理如圖:

深入理解javascript系列(一):從三種資料結構開始

記住:兵乓球盒(棧)、書架取書(堆)、排隊進站(佇列)


相關文章