初識前端中的棧

什麼是棧？

棧是一種遵從先進後出（Last In First Out ）原則的有序集合。新新增的元素儲存在棧頂，越早新增的元素越接近棧底。刪除元素只能從棧頂刪除。
- 舉慄：吃瓜群眾圍觀原配打小三（嘿嘿）。越早來的群眾越接近事發現場（舊元素在棧底），剛來的群眾只能在外圍（新元素在棧頂）。這時候散場了，外圍的走完裡面的群眾才能走出來（刪除元素）。
- 棧也被程式語言的編譯器和記憶體中儲存變數、方法呼叫等，也被用於瀏覽器歷史記錄（瀏覽器的返回按鈕）
- 在javascript中有兩種建立棧的方式
基於陣列的棧

    class StackArray {
        constructor() {
        this.items = [];
        }
    }
複製程式碼

這便是一個基於陣列建立的棧，然後我們要為它宣告一些方法。

1、新增元素

要注意該方法只新增元素到棧頂，也就是這個陣列的末尾。因此我們可以用陣列的push方法來實現

    push(element) {
    this.items.push(element);
  }
複製程式碼

2、刪除元素

同樣只能從棧頂刪除，因為是基於陣列建立的，所以可以使用陣列的pop方法

pop() {
    return this.items.pop();
  }
複製程式碼

3、檢視棧頂元素

利用陣列的長度來檢視陣列最後一個元素

peek() {
   return this.items[this.items.length - 1];
 }
複製程式碼

4、檢查棧是否為空

如果陣列的長度為零，那它就是空的

isEmpty() {
   return this.items.length === 0;
 }
複製程式碼

5、清空棧元素

可以直接把陣列重置為空

clear() {
   this.items = [];
 }
複製程式碼

這是我舉慄建立的幾個簡單方法，接下來讓我使用這個Stack類

const stack = new StackArray();
console.log(stack.isEmpty()) // 此時輸出為true
stack.push(5);      // [] ==>[5]
stack.push(8);     //  [5] ==>[5,8]
console.log(stack.peek()); // 輸出為8
stack.push(11);    // [5,8] ==>[5,8,11]
console.log(stack.isEmpty()) // 這時的輸出為false
stack.pop();  // [5,8,11] ==>[5,8]
複製程式碼

以上便是一個簡單的基於陣列的棧。建立一個Stack類最簡單的方式就是用一個陣列來儲存元素。在使用陣列時，大部分方法的時間複雜度是O(n)。意思是，我們需要迭代整個陣列直到找到要找的那個元素，如果它在棧底，就需要迭代陣列的所有位置，其中的n代表陣列的長度。如果陣列元素越多，所需時間就越長。另外，陣列是元素的一個有序集合，為了保證元素排列有序，它會佔用更多的記憶體空間。
如果我們能直接獲取元素，佔用較少的記憶體空間，並且仍然保證所有元素按照我們的需要排列，那不是更好嗎？我們可以使用一個javascript物件來儲存所有的棧元素。

基於物件的棧

class Stack{
    constructor(){
        this.count=0;
        this.items = {};
    }
}
複製程式碼

這就是一個基於物件的棧，因為物件沒有length屬性，我們要使用一個count屬性來記錄棧的大小。下面是物件棧的一些簡單的方法。

1、新增元素

我們用count變數來作為物件的鍵名，插入的元素就是它的值，同時在向棧插入元素後，我們遞增count變數

push(element) {
   this.items[this.count] = element;
   this.count++;
 }
複製程式碼

2、檢查棧是否為空

這個直接判斷count的值就可以了

isEmpty() {
   return this.count === 0;
複製程式碼

3、刪除元素

首先要判斷它是否為空，(如果為空那還有啥可刪的嘛！) ==>然後將count屬性減1==>找到棧頂的值並儲存==>然後用物件的delete方法將其刪除==>最後做一個像陣列的pop方法一樣的功能，將刪除的元素返回

pop() {
   if (this.isEmpty()) { // 判斷是否為空
     return undefined;
   }
   this.count--; // 棧的大小減1
   const result = this.items[this.count]; // 儲存棧頂值
   delete this.items[this.count]; // 刪除棧頂值
   return result; // 返回刪除值
 }
複製程式碼

4、建立toString方法

在陣列版本中，我們不需要關心toString方法的實現，因為資料結構可以直接使用陣列原生的toString方法。對於使用物件的版本，我們來建立一個toString方法來像陣列一樣列印出棧的內容。首先，判斷是否為空==>如果不空就用棧底的第一個元素作為字串的初始值==>然後迭代整個棧的鍵==>用上一個相加好的字串加上當前的字串，中間用逗號隔開。這樣寫的好處是如果棧只有一個元素，迴圈將不會執行（畢竟能不迴圈最好不要嘛）。

toString() {
   if (this.isEmpty()) {
     return '';
   }
   let objString = `${this.items[0]}`;
   for (let i = 1; i < this.count; i++) {
     objString = `${objString},${this.items[i]}`;
   }
   return objString;
 }
複製程式碼

好了，實現完toString方法後，我們就完成了一個簡單的基於物件的棧類。對於使用這個棧的開發者，選擇使用基於陣列或者基於物件的版本並不重要。兩者都可以實現相同的功能，只是內部實現很不一樣！！！

除了toString方法，我們建立其它物件棧方法的複雜度均為O(1),代表我們可以直接找到目標元素並對其進行操作（push、pop）
複製程式碼

如何保護資料結構內部元素？

在建立需要別的開發者也可以使用的資料結構或物件時，我們希望保護內部的元素，只有我們暴露出的方法才能修改內部結構。要確保元素只會被新增到棧頂，而不是其它任何位置。但是我們上面所宣告的兩種方式並不是。那我們基於物件建立的類來說。舉慄說明：

const stack = new Stack()
console.log(Object.keys(stack));  // ['count','items']
console.log(stack.items); // 可以直接訪問這個類的內部屬性
複製程式碼

我們可以通過Object.keys方法來直接獲取這個物件上的所有屬性，然後我們就能對暴露出來的屬性賦新的值。這是不允許的！接下來我們來看如何使用Javascript來實現私有屬性的方法。

1、下劃線命名約定

有的開發者喜歡在Javascript中使用下劃線命名約定來標記一個屬性為私有屬性。

class Stack {
    constructor() {
      this._count = ();
      this._items = {};
    }
}
複製程式碼

但這種方式只是一種約定，並不能保護資料，而且只能依賴於使用我們程式碼的開發者所具備的常識

2、用ES6的WeakMap實現類

ES6的WeakMap可以儲存鍵值對，其中鍵是物件，值可以是任意資料型別。我們來寫一個用WeakMap來儲存items屬性的陣列版本的類

const items = new WeakMap();  // 宣告一個WeakMap型別的變數items
class Stack {
    constructor () {
        items.set(this,[]); // 在constructor中，以this為鍵，把代表棧的陣列存入items
    }
    push(element){
        const s = items.get(this); // 從WeakMap中取出值，即以this為鍵從items中取值
        s.push(element);
    }
    pop(){
        const s = items.get(this);
        const r = s.pop();
        return r;
    }
}
複製程式碼

這樣做，items在Stack類裡是真正的私有屬性。採用這種方法，程式碼的可讀性不強，而且在擴充套件該類時無法繼承私有屬性。兩種方式也是都有各自的優缺點，魚與熊掌不可兼得呦。

最後

本文的內容來自本人閱讀過《學習Javascript資料結構與演算法》後按照個人的理解對第四章的部分內容做得一個簡單的整理，如果各位看官覺得還可以，請給小弟點個贊。我是一個努力幹活還不磨人的小妖精~~~

初識前端中的棧

什麼是棧？

基於陣列的棧

基於物件的棧

如何保護資料結構內部元素？

最後

相關文章